mzgkworks

iOSを中心にプログラミング関係について書く

【AutoLayout】画面サイズに対する比率でViewを定義する

iOS

例えば電卓のボタン。
横に３つのボタンを均等に配置する場合。
ボタンの高さは画面（ステータスバーを除く）の縦８分の１。

環境

1. BaseView

まず、レイアウトのベースとなるUIView（以降BaseView）を追加する。
これは、大元のViewを使うとステータスバーの領域がレイアウトに含まれるため。
BaseViewは、ステータスバーの直下（TopLayoutGuide:0）から画面一杯で制約を設定。
以降、このBaseViewをレイアウトのベースとする。

2. ボタン

ボタンを横に並べて３つ作成。
それぞれのレイアウト設定はしない。
ボタン３つをCmdを押しながら選択して、エディター右下のAuto Layout設定メニューでStackを押下。
StackViewでまとまる（自動で横並びになる。縦に並べた場合は縦並びになる）。
ボタンの幅を均等にするには、StackView -> Distribution -> Fill Equality

3. StackView

StackViewに対して制約を設定する。

  • 左右 : BaseView:0
  • 下 : BaseView:0
  • 高さ : BaseViewとStackViewを選択 -> Pin -> Equal Height
  • StackViewを選択し、Equal HeightのMultiplierを1->1:8（BaseViewの高さの８分の１）

これで、画面サイズに応じてボタンのレイアウトが崩れずに調整されて表示される。

【AutoLayout】複数の部品を同じサイズにする

iOS

複数の部品を同じサイズに指定する方法。
基準となる部品のサイズを変えると、連動して自動でサイズが反映されるので便利。

環境

方法

  • 基準となる部品のAutoLayout定義を行う
  • Ctrlを押しながら、揃える部品に向かってドラッグ＆ドロップする
  • メニューが表示されるので、「Equal Widths」を選択する

【Git】作業の途中で前のコミットに含めるべき誤りを発見した場合

git

直前のコミットではなく、いくつか前のコミットの誤りとか漏れを一旦作業を中断して、修正を行うような場合のメモ。
Push前まで限定。

log

* b4b1588 4-04: ファイルの追加と関連付け <- 2
* eb99f01 4-04: 計算結果画面のレイアウト <- 1
* 4ba3720 4-03: 機能の実装

手順

  1. （コーディング）画面レイアウトを作成 -> コミット : eb99f01
  2. （コーディング）ファイルの追加と関連付け -> コミット : b4b1588
  3. （コーディング）計算結果画面の実装 -> 途中でレイアウトの誤りを発見
  4. 作業を中断 -> $ git stash save -> スタッシュして退避
  5. コミットの修正 -> $ git rebase -i レイアウトの前のコミットID（4ba3720）
  6. 表示された内容の画面レイアウトの作成部分を edit に変更 -> 保存して終了
  7. Xcodeでレイアウトの誤りを修正
  8. $ git add .
  9. $ git commit --amend（必要ならコミットメッセージの修正）
  10. $ git rebase --continue
  11. $ git stash pop で退避を反映

【Shell】ディレクトリの内容をツリー表示する

shell

Macのターミナル上で、ディレクトリの中身をツリー表示させる。

インストール

Homebrewを使用。

$ brew install tree
...省略

# バージョン確認
$ tree --version
tree v1.7.0 (c) 1996 - 2014 by Steve Baker, Thomas Moore, 
Francesc Rocher, Florian Sesser, Kyosuke Tokoro

日本語ファイルの表示

インストールしたままだと、日本語ファイルで文字化けする。
オプションをつけた状態でaliasを作っておく。

$ vim ~/.bash_profile

# 以下を追加
# --charset=C : 罫線の文字コードをアスキーコードにする
# N : 日本語OK
# C : カラー表示（太文字になったりするので今回はパス）
alias tree='tree --charset=C -N'

$ source ~/.bash_profile

使い方

# [path]が無い場合はカレントディレクトリ
$ tree [path] [option]

# ツリー構造（全ファイル・２階層目まで）をクリップボートにコピー
$ tree -a -L 2 | pbcopy

オプション

  • -a : 隠しファイルなども表示
  • -d : ディレクトリのみ
  • -f : 相対パス
  • -h : ファイルサイズ
  • -u : オーナー
  • -g : グループ
  • -L 数字 : 表示する階層を指定

【Shell】ターミナルの内容をクリップボートにコピー

shell

ターミナル上で操作した内容をクリップボートにコピーする方法。
例えば、pwdで表示される現在の位置をコピーしたいなど。

環境

$ sw_versの結果

  • ProductName: Mac OS X
  • ProductVersion: 10.11.5
  • BuildVersion: 15F34

クリップボートにコピー

# pwdの結果をクリップボートにコピー
$ pwd | pbcopy

# Sample.txtの内容をクリップボートにコピー
$ pbcopy < /Desktop/Sample.txt

【Automator】シェルスクリプトをアプリとして作成する

shell

シェルスクリプトを.app形式にして、ダブルクリックで起動させる方法。
MacのAutomatorを使って作成する。

環境

$ sw_versの結果

  • ProductName: Mac OS X
  • ProductVersion: 10.11.5
  • BuildVersion: 15F34

方法

  1. Automator.appを起動
  2. アクション -> ライブラリ -> シェルスクリプトを実行
  3. 右ペインにドラッグ＆ドロップ
  4. シェル : /bin/bash ※デフォルト
  5. 入力の引き渡し方法 : stdinへ ※デフォルト
  6. シェルを記述
  7. メニュー -> ファイル -> 保存 -> フォーマット : アプリケーション

今回の作成

マウスELECOMのEX-G（M-XG1UBBK）

エレコムマウスアシスタント５が起動できない、マウスをMacに繋いでも設定したボタンが動作しない。
なので、商品のヘルプページに書いてあった下記の方法をシェルスクリプト化。

  • アプリケーション -> ユーティリティ -> ELECOM_Mouse_Util.app -> 右クリック -> パッケージの内容を表示
  • Contents -> Resources -> MacOSの２ファイルをクリック
    • ElecomGesture.app
    • MouseEventChange.app

シェル内容

open /Applications/Utilities/ELECOM_Mouse_Util.app/Contents/Resources/MacOS/ElecomGesture.app
open /Applications/Utilities/ELECOM_Mouse_Util.app/Contents/Resources/MacOS/MouseEventChange.app

【ATOM】AtomをOutlineエディターとして使う

Mac

Atomでいい感じにOutlineが作れて、ステータス付与とかタグとかFocusとかできる。
MacアプリのFoldingTextの一部機能をAtomに持ってきた感じ。
実際MacでFoldingTextを使ってMarkdown形式でTodo管理しているけど、元がプレーンテキスト系のアプリなのでシンプルでいい感じに楽しめている。
フォントや色もカスタマイズできる。

f:id:mzgkworks:20160608185817p:plain http://www.foldingtext.com/foldingtext-for-atom/

ガイド
https://jessegrosjean.gitbooks.io/foldingtext-for-atom-user-s-guide/content/

TaskPaper3とかWriteRoomと同じデベロッパーなので、テキストエディタ拡張系。
Version1.0から有料になるのかな...

Atomプラグイン

  • foldingtext-for-atom : version0.9.2

モード

  • テキストモード
    • 入力
  • アウトラインモード
    • 項目の操作（入替え・ステータスの付与など）

テキストモードでの操作

  • アウトラインモードへの切替え : Esc
  • 階層（深） : Tab
  • 階層（浅） : Shift + Tab
  • 装飾（押下後に入力する）
    • 太字 : Cmd + b
    • 斜体 : Cmd + i
    • 下線 : Cmd + u
    • リンク : Cmd + Shift + k
    • 装飾削除 : Ctrl + c
  • 折りたたみ : Cmd + .
  • タグ : Cmd + Shift + t（先頭に#つける）

アウトラインモードでの操作

  • テキストモードに切替え : a, i, ←, →, Enter
  • 項目削除 : del, Ctrl + d
  • 項目移動 : Cmd + Ctrl + ↑ or ↓
  • 階層移動 : Cmd + Ctrl + ← or →
  • 折りたたみ : .
  • ホイスト（カーソル下位項目のみ表示） : Cmd + Opt + ↑ or ↓
  • タグ : t（先頭に#つける）
  • ステータス（項目の後ろにマークが付く）
    • todo : s t
    • waiting : s w
    • active : s a
    • complete : s c or Space
  • プライオリティ
    • 1 〜 7
  • 装飾
    • 太字 : Cmd + b
    • 斜体 : Cmd + i
    • 下線 : Cmd + u
    • リンク : Cmd + Shift + k
    • 装飾削除 : Ctrl + c