MyShortcutsに「Data URI」で画像を埋め込もう!

ページ

 

MyShortcutsに「Data URI」で画像を埋め込もう!

2014年10月12日日曜日
MyShortcutsに「Data URI」で画像を埋め込もう!

「MyShortcuts+Viewer」がiOS8になって、ウィジットに対応してから、なかなか「iOS8の可能性」が増えたと思います。ウィジット内でHTMLを表示できるので、動画を埋め込んだり、リンクを作ったりできます。


そして、iOSといえば「URLスキーム」というものが有り、アプリを起動するアドレスのようなものです。それらをアイコン付きでウィジットに表示しちゃえば、ソレはまるでランチャーのようになります。そんなすばらしいやってみました。

ところが、画像は通知センターを開く度に読み込むので、それなら「Data URIで埋め込んじゃえ」ということで、すべてウィジットに埋め込んだ状態のやり方をご紹介します。

Data URIで埋め込み

Data URIとは?

通常、画像ファイルは「サーバー」に一旦保存して、そこを参照するためにURLが当てはめられます(http://~~~.jpg)。ソレはつまり、インターネットを介さないと参照できません。しかしData URIは、それ自体が「画像を表示する」ことをあらわせるので、要は「画像の埋め込み」をしているわけです。オフラインでも画像が表示できるということです。


「MyShortcuts」では、画像を載せる方法が「URL参照」か「Data URI」を勧められました。毎回ウィジットを開く度に外部サイトの画像を拾ってくる、つまりデータ通信をしちゃうので、ソレはよろしくないなということで「Data URI」にしたわけです。

最も簡単だと思う方法



僕がData URIを作るのに最も簡単だと思う方は、やはり変換ツールを使うことです。下記サイトで、Data URIが作成可能なので「Data URI」自体はとっても簡単に作れます。

■:Data URI Scheme 変換ツール

ちなみに、作られるものは<img ~>の形なのでそのままAタグ(リンクタグ)で挟んじゃえばいいだけなので、手間はそんなにありません。ただ言うことが有るとすれば、めちゃくちゃ長いタグが出力されます。

オススメの画像サイズ

用意する画像ですが、60x60pxをオススメします。記事トップ画像を見てもらうと分かりますが、60x60で作成した画像が丁度良い感じに収まります。ちなみに、素材などを使って全て自作しました。

URLスキームについて

■:iPhone URLスキーム[URL scheme] - The theoryの戯言 -
■:iPhoneアプリ URLスキーム一覧!! スキーマの使えるアプリ まとめ
■:iPhoneアプリのURLスキーム @ ウィキ - ページ一覧

URLスキームについては、すでにたくさんの人がめちゃくちゃまとめてくれちゃってます。アプリの中には、URLスキームが無いものもあります。その時は残念です。

「メモ」に保存するデータ


こちらに、「テキスト」のみで作った例があります。このテキスト部分に、上記で作成したData URIを入れ替えちゃえばいいだけです。

まとめ

ぶっちゃけ、手間は有りますが、その都度データを参照することを考えたらData URIのほうがいいかなーと。MyShortcutsで「テキストじゃ味気ないなー」「アイコン使いたいなー」ってひとは、この方法で登録することをオススメします。


この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで喫茶店の部屋をフォローしよう!

 

▶ 関連する新着記事