You are using a pre-release version of Xcode…

はて。ぐぐってもよくわからんので、先に brew update と brew upgrade をやってみる。

Your XQuartz (2.7.8) is outdated…

brew cask reinstall xquartz これをやれって書いてあるのでやる。

Your Xcode (8.2) is outdated….

古いよって言われてるので Xcode をアップデートしたいところだが、まだ El Capitan なので 8.2 が最終バージョン。

最後に

brew update と brew upgrade をやった後にもう一度 brew doctor やっておしまい。

いえーい！もう 11 月ですが、今年もよろしくお願いします。年賀状早く準備しろよ！

Gists 埋め込みも直していないままだった。いつ直すのか。今でｓ（ｒｙ
直したよー！！

Your XQuartz (2.7.8) is outdated…

古いよって言われてるので新しいのを XQuartz から XQuartz-2.7.9.dmg をダウンロードしてインストールする。

Unbrewed header files were found in /usr/local/include…

問題を引き起こす可能性があるから削除してちょって言われてるので、指さし確認しながら削除。

Broken symlinks were found. Remove them with `brew prune`:…

brew prune しろって言われてるのでやっといた。

Some installed formula are missing dependencies…

依存関係にあるツールがないよって言われてるので brew install pcre2

最後に

brew update と brew upgrade をやった後にもう一度 brew doctor やっておしまい。

Your system is ready to brew.

いえーい！もう 10 月ですが、今年もよろしくお願いします。

Your XQuartz (2.7.7) is outdated…

古いよって言われてるので新しいのを XQuartz から XQuartz-2.7.8.dmg をダウンロードしてインストールする。

Some directories in your path end in a slash…

最後にスラッシュついてる環境変数があるから直してねって言われてる。fish shell の環境変数設定をいろいろやってたら何かがうまくいってエラー消えた。

fish shell の環境変数は毎回悩むし、ぐぐっても情報が少ないのでぴゃっとまとめておかねばならぬ。今日思ったのは config.fish につい

• Remove path from $fish_user_paths
• OSX – PATH設定がどこにあるか分からないときに見るべきファイル – Qiita

/usr/bin occurs before /usr/local/bin…

これも環境変数をいろいろやったら勝手にエラー消えてた。

Some keg-only formula are linked into the Cellar…

brew unlink openssl しろって言われてるのでやっといた。

You have unlinked kegs in your Cellar…

ひとつ上まで終わって brew update と brew upgrade を行った後に brew doctor もう一回やったら出てきた。そういえば Homebrew の node は使わず、別にインストールしていた気が…ということで削除して別途インストールし直し。

• 総務省｜北海道総合通信局｜電気通信事業の手続き
• 総務省｜北海道総合通信局｜ 届出書類 （届出電気通信事業）のダウンロード

レンタルサーバの再販をすることがあるかもしれないから届出しておこう、と思ったのですが、ウェブサイトを表示する領域の再販であれば届出が不要だそうです。ウェブサイトを表示する領域＋電子メールサービスを再販する場合は届出が必要とのこと。

マニュアルや書類の書き方の PDF も用意されているし、電話問い合わせで親切に教えていただきました！

• アイコンめんこい。
• 写真（モーメント）ではすべての写真が時系列に並ぶ。
• すべての写真（アルバム）でもすべての写真が表示されるけど、時系列でもないし何順だ？
• 人々の切り抜きが ○ になってるので、顔の形を切り抜いたとき、より自然なかんじでよい。
• 人々認識されなかった写真にも、情報ウィンドウから人を追加できる。
• 人々の「候補の人」をドラッグで人々に追加できるけど、複数選択して一気にドラッグはできないんだろうか。

iPhoto では写真を「イベント」で管理していましたが、写真アプリではどんどん追加して時系列で探す、または人々やキーワードを追加して探すようになっています。読み込む毎に自動的に追加されてしまう「イベント」が邪魔なことも多かったので、これはうれしい変更点！

起動！

どどーん。まずはクイックツアーを見てみます。

はい！使ってみます！！

中途半端な iPhoto ライブラリがあるけど新規でいきます。

デフォルトでこんな名称になっているので、特に変更せず。

iCloud フォトライブラリは使いません。写真データは手動でやりとり。

いらっしゃいましたー！！

環境設定

私は画像ファイルを yyyyMMdd_HHmmss_カメラ名.拡張子 という形式でリネームした上で、ピクチャフォルダ内の年月フォルダに入れて保存しています。写真アプリに読み込んだ写真を写真ライブラリにコピーする設定にすると、画像ファイルが重複して存在することになってしまうので、「項目を写真ライブラリにコピー」のチェックを外しておきます。

iCloud フォトライブラリとマイフォトストリームはオフで。

共有先の項目は、システム環境設定のこちらから変更できます。

キーボードショートカット

メニューの ヘルプ → キーボードショートカット を開くとキーボードショートカット記号のページが表示されますが、上部のリンク「キーボードショートカット」を開くとキーボードショートカットのリストが表示されます。以下、一部抜粋。

一般

• command + 1 写真を表示
• command + 2 共有された写真を表示
• command + 3 アルバムを表示
• command + 4 プロジェクトを表示
• option + command + S サイドバーを表示 / 隠す
• option + S 分割表示を表示 / 隠す

写真を編集する

• return 選択した写真を編集ビューで開く
• C トリミング
• A 調整
• F フィルタ
• E 赤目補正
• R レタッチ
• command + option + R 回転（時計回り）
• command + R 回転（反時計回り）
• M オリジナルの写真を表示（キーを押したままにする）
• → 次の写真へ移動
• ← 前の写真へ移動
• delete 選択した写真を削除
• command + F 検索
• Z 拡大 / 縮小
• command + + 段階的に拡大
• command + - 段階的に縮小
• command + L 選択した写真を隠す
• 写真をドラッグ 拡大時に写真の表示を調整

写真を整理する

• command + N 新しいアルバムを作成
• shift + command + K アルバムのキー写真を設定
• option + command + N スマートアルバムを作成
• shift + command + N フォルダを作成
• command + + サムネールサイズを大きく
• command + - サムネールサイズを小さく
• 写真をダブルクリック 拡大表示 / サムネール表示切替
• shift + command + T タイトルを表示 / 隠す
• command + I 情報ウインドウの写真情報を表示 / 隠す
• . 写真をお気に入りにする
• command + K キーワードマネージャを表示 / 隠す
• command + delete ライブラリから写真・項目を削除
• delete アルバムから写真を削除（ライブラリには残る）

読み込みと書き出し

• shift + command + I 写真を読み込む
• shift + command + E 写真を書き出す

iPhoto から「写真」へ

iPhoto が開発終了したと聞いたときからずっと待っていた写真アプリ。基本的な使い方は変わっていないので困ることはないし、サクサク軽いし、なによりアイコンがめんこいのは正義です。写真整理、少しずつやるぞー！おー！！

Adobe Document CloudおよびAcrobat DCの提供開始 | Adobe

見た目ががらっと変わって今風になって、Acrobat っぽさがなくなってスッキリしました。

スッキリ！

でも、アップデートしたらセキュリティポリシーがまるっと消えててしょんぼりでした。

You might want to send a paragraph from a document on your computer to someone over Whatsapp, or to insert a photo in that document from your phone. Wouldn’t it be great if you could simply copy and paste it between them?

Pasteasy makes that possible. Everyone already knows how to copy and paste — its simple, easy and quick. Why wait for your stuff to travel across the internet when those devices are next to each other? For this reason, we made Pasteasy work over local WiFi.

Pasteasy – Copy on the phone, paste on the computer

簡単、しかも素早くクリップボードを共有できます。

それぞれのデバイスにインストール後、デスクトップ版の QR コードをモバイルで読み込めば接続設定が完了します。あとはデスクトップ / モバイル両方を起動した状態で「コピー」の動作を行うと、クリップボードの内容が接続した先に Wi-Fi で飛んでいく仕組み。

速度については、テキストデータなら「コピー」してから 1 秒くらいで飛んでくるかんじです。画像だとファイルサイズによって異なりますが、普通に iPhone 5s で撮影した写真で 5 秒かからないくらいでした。

その他の使い方はヘルプページ見たらいろいろ書いてある！

デスクトップ版の Windows と Mac は無料！

iPhone / iPad はつい最近まで 600 円だったらしいんだけど、私が見たときには 240 円になっていました。値下げ情報の公式ブログ記事とか Twitter とか探したけど見つからず…こりゃお買い得じゃないの！と買ってしまいましたｗ Android は 4.0.3 以上に対応していて 227 円ですってよ奥さん！

Vagrant と VirtualBox と gaspanik/ut64fend で、メインマシンの環境に影響を与えずに、仮想の開発環境をぴゅっと用意してみます。

Create and configure lightweight, reproducible, and portable development environments.

Vagrant

Vagrant をインストール

Installing Vagrant is extremely easy. Head over to the downloads page and get the appropriate installer or package for your platform. Then install it using standard procedures for your operating system.

Installing Vagrant – Vagrant Documentation

vagrant_1.7.2.dmg をダウンロードしてダブルクリック、Vagrant.pkg をダブルクリックしてインストール。

The installer will automatically add vagrant to your system path so that it is available in terminals.

Installing Vagrant – Vagrant Documentation

vagrant があるか見てみる。

The getting started guide will use Vagrant with VirtualBox, since it is free, available on every major platform, and built-in to Vagrant. After reading the guide though, don’t forget that Vagrant can work with many other providers.

Getting Started – Vagrant Documentation

素直に VirtualBox にします。

VirtualBox をインストール

VirtualBox のダウンロードページから OS X 用の VirtualBox-4.3.26-98988-OSX.dmg をダウンロード、VirtualBox.pkg をダブルクリックしてインストール。

gaspanik/ut64fend を使う

protean/UT64-fend is a standard Ubuntu 14.04 box with LAMP(WP-CLI ready), NodeJS, MongoDB, Redis, Ruby(rbenv), Git and some helpful programs for front-end developers.

gaspanik/ut64fend

Ubuntu 14.04 に LAMP（Linux / Apache / MySQL / PHP・Perl・Python + WP-CLI）・NodeJS・MongoDB・Redis・Ruby・Git、その他フロントエンド開発に役立ついろいろがてん「こもり」の箱。

WP-CLI is a set of command-line tools for managing WordPress installations. You can update plugins, set up multisite installs and much more, without using a web browser.

Command line interface for WordPress | WP-CLI

WP-CLI は WordPress をコマンドラインで管理できるツール。

使い方は以下の手順。簡単！

1. Clone this repository
2. Vagrant up
3. Vagrant ssh or Open http://192.168.33.100 (http://localhost:8080)

リポジトリをクローンする

GitHub Help より Cloning a repository – User Documentation で手順を確認。

1. リポジトリのメインページを開く。
2. 右側メニューから clone URL をコピーする。
3. ターミナルを開く。
4. クローンを置くディレクトリを作成して移動、またはその場所に移動。
5. git clone と打ってから、コピーした Clone URL を貼り付け。
6. Enter を押すとクローンが作成される。

やってみる！

今まで git clone とかおそろしくてたまらんかったけど、このコマンドで何が起こってるか考えてみると、ターミナルで今いる場所にダウンロードしてくるだけだー！だから「あ、失敗した。これいらなかったわ」と思ったら、サクッとフォルダごと削除しちゃっていいんですよね！！

Vagrant up する

ダウンロード？構築にしばらく時間がかかるけど、なめことにぼしを取ってる間に終わるくらいです。

使う

Vagrant の中に SSH で接続できます。

http://192.168.33.100 開いたらはろーわーるど！/ut64fend/html/index.html が表示されているようです。phpinfo() もあります。

アップデートを行う

Vagrant の中身を最新版にアップデートします。今インストールしたばかりなのにアップデート！？と思ったけど、インストール時の最新版をダウンロードしているのではなく、GitHub に置いてあるもの 「VagrantCloudというか、AmazonのS3にVagrantのBoxイメージを置いています。」とのこと！がインストールされているのでアップデートが必要だそうです。

まず vagrant ssh をしておきます。

deb

こんなのでてきた！

Modified configuration file

A new version of configuration file /etc/php5/apache2/php.ini is available. but the version installed currently has been locally modified.

What do you want to do about modified configuration file php.ini?

• install the package mantainer’s version
• keep the local version currently installed
• show the differences between the versions
• show a side-by-side difference between the versions
• start a new shell to examine the situation

php.ini が新しくなるけど、どうする？という確認画面だった。keep the local 〜 が選択状態だったし、「現在ローカルにあるバージョンを残しておく」なのでそのまま OK しておいた。

npm

最初に更新あるか調べて更新があったものをアップデートするんだけど、複数のパッケージを半角スペース区切りで入力したらエラー出まくりでした。更新あったよリストの中に npm があったので、sudo npm install -g npm@2.7.4 のみ最初に行い、残りのものをまとめて sudo npm install -g したら更新できました。

gem

composer

sudo つけないとエラー出た。

WP-CLI (via Composer)

• Markdown のリアルタイムプレビューは Omni​Markup​Previewer で。
• コードをかっちょよくするのは Gist 埋め込み。
• jQuery で class 付与するのもなし。
• Gist 埋め込みの見た目は CSS でなんとかする。

としました。

Gist 埋め込み

埋め込みしたい Gist のページを開き、右側メニューの Embed URL のところをコピペすると埋め込めます。埋め込みタグ中の URL は、Gist の URL + 拡張子っぽいです。

Gist 埋め込みの CSS を調整

通常は白背景のこちらの表示ですが、

google-code-prettify の sunburst.css の衝撃が忘れられず、似たような見た目になるようがんばりました。

!important 祭のコードはこちら。

背景色を塗り替えたのと、濃い背景にしたのでテキストのハイライト色をそれぞれ明るめに変更。横スクロールがかっちょいいやつは、サイドバーのアーカイブでも使っている perfect-scrollbar です。

長いログのとき、だーーーっと長く表示されてしまうので、.gist .line-numbers に max-height を設定してスクロールするように変更しました。

ひとつだけ !important がついていない table-layout: auto; は、今使っているテーマの親テーマ Twenty Fourteen の CSS で table-layout: fixed; という記述があったため表示がおかしかった対策です。

まったく脈絡もなく、キーボードショートカット置いときますね。

Alt + F4

Markdown なんてこれくらい覚えとけばいいよ、という話を聞いたので、WordPress の記事作成でも使えるようにしてみました。

最初に思いついたのはプラグイン！だったんだけど、今後何かの理由でプラグインが使えなくなったとき、記事本文が Markdown で書かれていたら表示がひどいことになるんでないべか…とぷるぷるしたので、Sublime Text で下書きしたのをコピペする作戦にしました。

Sublime Text で Markdown をリアルタイムプレビュー

SublimeText3 Plugin+Markmon+PandocでMarkdownをHTMLリアルタイムプレビューする – Qiita という、私がまさに今やりたいことが丁寧にまとめられている記事を見つけたので、まるっと同じ手順でインストールさせていただきましたー！自分のブログと同じ見た目のスタイルシートを用意したら完璧（そのうちやりたい）

• Markmon real-time markdown preview
• Markmon
• Pandoc

ところでこの方の Qiita ってなんでぴんくなの？

google-code-prettify でコードをかっちょよく

WordPress で Markdown ほげほげで調べている途中で google-code-prettify の存在を知りました。

You can load the Prettify script to highlight code in your web pages. It adds styles to code snippets so that token boundaries stand out and your readers can get the gist of your code without having to mentally perform a left-to-right parse.

GettingStarted – google-code-prettify – How to style code in your web-pages – syntax highlighting of code snippets in a web page – Google Project Hosting

コードの見た目をかっちょよくしてくれるのね！ステキ！

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></script>

これをテーマの header.php に追記。スタイルは style gallery より sunburst.css にしました。カスタマイズはこの CSS を見て、自分のテーマの style.css で上書きする。

pre タグに追加したい class は、prettyprint と、行番号をすべて表示するための linenums のふたつ。

Sublime Text で Markdown を HTML 形式で書き出す

書き出し用のパッケージを使おうかと思ったけど、リアルタイムでブラウザプレビューされてるんだからソースの表示で充分ですが、google-code-prettify 用の class を付与するカスタマイズ方法がどうやってもわからなかったので、jQuery でなんとかしてもらうことに。

jQuery('pre.sourceCode').addClass('prettyprint linenums');

これを header.php の google-code-prettify 読み込みコードの下に追加。pre.sourceCode は Markmon real-time markdown preview のブラウザ表示のソースについてた class です。もしこのパッケージを使わなくなったり、うっかり jQuery の記述を消してしまったりしても、通常のスタイルで表示されるだけなので影響が少ないです。（参考：プラグイン無しでwordpressに超カンタンにシンタックスハイライトを導入する | Frog Code Works）

コードやキーボードショートカットのスタイル

こんなかんじで設定しました。

<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>

hogehoge コードだよ！ インラインのコード。

command + shift + 4 → space → option 押しながらウィンドウクリックで、ウィンドウのスクリーンショットが影なしで撮れるよ！

sunburst.css の背景を黒から紫に、余白を少し減らして、角丸を小さくして、すべての行番号を表示するように変更。キーボードの見た目はリアルフォースちゃんと同じにしてみたよ〜。ザ・自己満足。

ブログのコードがとても見やすくなったことだし、私もギットハブーになれるかな？

かけるよ pic.twitter.com/fS5XdrRCGX

— OTOBANK Developers (@otobankdev) 2014, 11月 26