[iOS8] MyShortcutsのランチャーアイコンを軽量かつ簡単に実装する方法

今回は初心者にも相当やさしく、見栄えのいいウィジェットを作る方法解説です。

（※RSSだと途中のコードがちゃんと見えないと思いますので、できればWebサイトで直接お読みください）

いろいろと実験してわかったことがあります。

好きなフォントが使える

AnyFontなどのフォントをインストールできるアプリを使えば、ウィジェットで好きなフォントを使えるんです。

使い方は普通のHTMLとおんなじで、こんな風に直接フォントを指定してやるだけ。
test

これの表示に通信は一切必要ありません。

AnyFontはttf、otf、ttcファイルが読み込めますので、iPhone宛に添付メールするなり、Dropboxを使うなり、GoodReaderやDocumentsなどのファイラーを介するなりしてOpenInすることでインストールできるようになります。
使い方は簡単なので説明することもないでしょう。

これでいくらでも自由なフォントを使ってウィジェットを装飾できる！！

Webフォントが利用できる

フォントが自由に使えるなら次の実験はWebフォントです。

このようなアイコンが数行で、手書きでも簡単に実装できることがわかりました。

しかし、Webフォントはネットからデータを引っ張ってきているだけです。オフラインではどうなるのか。
試してみるとオフライン環境で試してみてもアイコンは表示されたまま、キャッシュに保存されているようです。

オフラインのままiPhoneの日付を進めてみると、ちょうど360日を経過した時点で表示されなくなります。
それだけ長生きなら実用的ですね。

FontAwesomeがお手軽に

上のスクリーンショットに使っているアイコンはFontAwesomeというフリーのアイコンライブラリのものです。

使い方は至って簡単。
MyShortcutsの先頭の方にこのコードを書きます。これはフォントを読み込むためのコードです。

<link href=”http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css” rel=”stylesheet”>

あとは

と書くだけで家のアイコンが表示されます。
fa-2xって部分はサイズを2倍にするって意味で、fa-4xって書けば4倍になってくれます。

これだけでは意味がないので、<a>タグでURLスキームを付けてやります。

<a href=”myshortcuts://?home”></a>

これで完成。
家のアイコンをタップするとホーム画面に戻ることができます。

サンプルです → MyShortcutsにインポート

家以外のアイコンを使いたい場合には↓こちらのサイトを見て、自分の使いたいものを探してください。
http://fortawesome.github.io/Font-Awesome/cheatsheet/
479種類ものアイコンがあり、SNSなどのアイコンもかなり充実していますので困ることはないはずです。

上に書いてあるfa-homeの部分をfa-cameraとかfa-bookに置き換えるのと、<a href=””>に使いたいURLスキームを書くだけ。
あっけないくらい簡単でしょう？

まとめ

MyShortcutsの進化を受けて、スクリプト職人がものすごく便利なものを作り出しておりまして、毎日楽しくて仕方ありません。
私はというと、スクリプトを書く能力に乏しいので地味なところを攻めておりますが、それでもいろんな発見があって楽しいですね。

センスが無くて諦めていた人や、スクリプトやブックマークレットがなんのことやらわからずに挫折したひとでもこのやり方なら大丈夫です。とてもかんたん。

頑張ってくださいねー。

MyShortcuts+Viewer

100円
販売: Takeyoshi Nakayama
評価: 4（74件)
iPhone/iPadに対応

iOS8で化けに化けたランチャーアプリ。みんなストアで評価しようね。

200円
販売: Florian Schimanke
評価: 4（12件)
iPhone/iPadに対応

iOS7以降です。
フォントをインストールしても使えるアプリは限られていて、PagesとかNumbersなどの一部のものでしか使えなかったんですが、MyShortcutsでも使えるとは嬉しい誤算でした。
類似アプリがいくつも出ていますが、OpenInが使えないものもありますので、とりあえず本家のこれを。