MacにDockerをインストールして起動する

今更ですがDockerを触ってみました。

Dockerのインストール

Mac版のインストールはdocker storeから行います。
ページ右上の「Please Login To Download」ボタンからログインしてDockerをインストールします。

Docker Store

DockerでHello World

インストールしたらDockerを起動します。

一度起動すればコマンドライン上でDockerを使う事ができます。

まずはHelloWorldをやってみます。

docker run hello-world

ここでunauthorized: incorrect username or password.というエラーが出る場合、下コマンドでログインする必要があります。
この時、メールアドレスではなくログインIDを使ってログインする必要があります。

docker login

ログインした状態でHello Worldコマンドを打つと下のようにDockerが起動します。

DockerでWEBサーバーを立ち上げる

WEBサーバーはこちらのページのNginxを利用しました。

Docker Store

NginxのDockerは下コマンドで起動します。

docker run --name my-nginx -d -p 80:80 nginx

http://localhostにアクセスするとNginxが起動している事が分かります。

起動中のDockerはdocker psコマンドで確認する事ができます。

docker psで表示されるDockerのコンテナの停止はdocker stopコマンドを使います。
xxxxxにはdocker psで表示されたCONTAINER IDを入れます。

docker stop xxxxx

再びコンテナを起動するにはstartコマンドを使います。

docker start my-nginx

自分のコンテナ名は下コマンドで確認する事ができます。

docker container ls -a

コンテナの削除はrmコマンドを使います。

docker rm my-nginx

imgToAsciiでAAを自動生成

imgToAsciiというJSのライブラリで画像をAA化してみました。

github.com

使い方

ライブラリはimgToAscii.jsの1ファイルのみで、100行くらいのシンプルなライブラリです。

<script src="./imgToAscii.js"></script>

下のように画像を指定してdisplayメソッドを呼び出すだけでAAを表示する事ができます。

<script>
  let ele = new imgToAscii('./img.jpg', 0.3);
  ele.display();
</script>

AA化したのは下の猫画像です。
ぱくたそのものを利用しました。

AA化の結果は下の通りです。
綺麗にAAにする事ができました。

imgToAsciiの第2引数はAAの拡大率です。
デフォルトは1なんですが、それだととても大きくなってしまうので0.3にしています。

let ele = new imgToAscii('./img.jpg', 0.3);

AA化の仕組み

仕組みはとてもシンプルで「各ピクセルの色の明るさに応じた文字を割り当てる」という形です。
具体的には明るさに応じて下の文字を割り当てています。
左が一番暗くて右は明るい色です。

["@","%","#","*","+","=","-",":","."," "]

明るさは下の公式を使って算出しています。
rgbは画像のピクセルのRGBの値です。

(r * 0.2126) + (g * 0.7152) + (b * 0.0722)

この公式については下ページが詳しかったです。

グレースケール - Wikipedia

Invalid Document Configuration. という警告が出たときの対処法

Xcodeで下のような警告が出たので調べてみました。

WARNING ITMS-90737: "Invalid Document Configuration. Document Based Apps should support either the Document Browser (UISupportsDocumentBrowser = YES) or implement Open In Place (LSSupportsOpeningDocumentsInPlace = YES/NO). Visit https://developer.apple.com/document-based-apps/ for more information."

対処法

警告に書いてあるとおり、Info.plistにUISupportsDocumentBrowserかLSSupportsOpeningDocumentsInPlaceをセットすれば解決します。

UISupportsDocumentBrowserは他アプリがこのアプリのファイルを操作するためのものです。
LSSupportsOpeningDocumentsInPlaceは他アプリから渡されるファイルに関するキーで、コピーではなく元ファイルを取得できるようになります。

警告が出る原因

Info.plistにDocument typesをセットすると発生します。
Document typesは他アプリからこのアプリを呼び出すときに使うキーです。

iOS12のショートカット アプリを使ってみる

iOS12のショートカットというアプリを使ってみました。

ショートカットとは

様々なiPhone上の行動を自動化できるアプリです。
「特定ワードをTwitterでつぶやく」「クリップボードの内容をメモ帳に入力する」など色々なことができます。

もともとはWorkflowという名前の有料アプリだったんですが、アップルが買収して無料で使えるようになりました。

ショートカットの使い方

ショートカットの使い方は下のとおりです。
まず自分でショートカットを作ってそれを呼び出すという流れになります。

1. ショートカットを作る
2. 作成したショートカットを呼び出す

ショートカットを作って実行する

アプリを開くと下のような画面になっています。
ここの「ショートカットを作成」からショートカットを作ります。

作成ボタンを押すと下のような画面になります。
画面下のアクション一覧からアクションを選んでショートカットを作っていきます。

試しに特定のテキストをメモに記入するというアクションを作ってみます。

まずはメモに入力する内容を設定します。
テキストというアクションを探して好きな文字を入力します。

次に「メモを作成する」アクションを設定します。
下のようにメモを作成を探してタップします。

これでテキストの内容をメモに書き出すショートカットができました。
画面上部の再生ボタンを押すことで実行されます。

保存を押すとメモ帳に実際に書き込まれます。

ウィジェットに設定しておくといつでも呼び出せて便利です。

大手アプリは結構対応しているので、自分なりに色々試すと楽しそうです。

Xcode10のStoryboardでUILabelやUIButtonを配置する方法とショートカット

Xcode10からオブジェクトを選ぶ場所が大きく変わってたのでメモ。

オブジェクトを選ぶ場合、Xcode上部の丸いアイコンをクリックします。

クリックするとオブジェクト一覧が出てくるので、ここからオブジェクトを選択します。

メニューから選択することもできます。

ショートカットキーは Command + Shift + L です。

ロゴ生成サービス、Free Logo Generator Onlineを試してみる

こちらの記事で紹介されていたサービスを試してみました。

note.mu

今回は自分の運営している「体重管理アプリ」のロゴを作ってみます。

体重管理Fittで人気の体重管理ダイエットを

• hiroki sugimoto
• ヘルスケア／フィットネス
• 無料
• 

使い方

TOPページは下の通り。
会員登録なしで始める事ができます。

次はカテゴリー選択です。
健康系のアプリなのでHealth and beautyにしました。

次にデザインのスタイルを選びます。
ここでは3つまで選ぶことができます。

サービス名の入力をします。

最後にロゴをどこで使うかを選択します。

以上で選択は終了です。
下のようにロゴを何パターンも生成してくれます。

ロゴを押すと色やフォントを変更できる画面に移動します。

Nextボタンを押すとダウンロードページに遷移します。

メールアドレスを入れるとロゴデータを送ってくれます。
データ形式はpngです。

【Swift】VoiceOver対応について調べてみる

VoiceOverについて調べてまとめてみました。

VoiceOver(ボイスオーバー)とは

VoiceOverとはiPhoneの視覚障害者の方向けの機能です。
画面を音声で読み上げることで画面が見えなくてもiPhoneを使うことができます。

VoiceOverをONにするとタップしたボタンやCellを読み上げてくれるようになります。
読み上げ中のオブジェクトは上画像のように黒く選択します。

VoiceOverの使い方

VoiceOverはiPhoneの設定アプリ → 一般 → アクセシビリティ → VoiceOverでONにすることができます。
ONにすると下のようにタップやスワイプといったジェスチャーの役目が大幅に変わります。

• ボタンやCellをタップすると音声読み上げをする
• 今までのシングルタップを実現したい時はボタンを2回タップ
• スクロールしたい時は3本指でスクロール
• 2本指でスクロールすると読み上げ可能なボタンやCellを順番に読み上げる

アプリのVoiceOver対応方法

VoiceOverですが、ボタンやラベルはデフォルトで読み上げ対象になっています。
上画像のようにラベル・ボタン・Viewだけを配置したアプリを作ったところ、ラベルとボタンはタップすると読み上げてくれるようになっていました。

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var myView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        myView.isAccessibilityElement = true
        myView.accessibilityLabel = "My view"
    }
}

UIViewも読み上げ対象にしたい場合はisAccessibilityElementをtrueにします。
読み上げ内容はaccessibilityLabelで設定をします。

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var myButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        myButton.isAccessibilityElement = false
    }
}

逆に読み上げたくない場合はisAccessibilityElementをfalseにします。

iPhoneシミュレータでVoiceOverの検証をする方法

iPhoneシミュレータではVoiceOverをONにすることができません。
代わりにAccessibility Inspectorというツールを使います。

Accessibility InspectorはXcodeのメニューバーのXcode → Open Developer Toolから開きます。

シミュレータの画面をタップすることで、読み上げテキストの内容などを確認することができます。