はてなブログでiPhoneアプリ紹介をカスタマイズ
以前からiPhoneアプリ紹介時のアプリカード(でいいのかな?)のデザインが簡素というか枠すらなくて不満でした。それをどうこうするうちにやったことをつらつら書きます。
できたこと
当初やりたかったこと
Workflow: Powerful Automation Made Simple
カテゴリ: 仕事効率化, ユーティリティ
これを
↓
こうしたかった
※ここでHTMLソースを見て気づいたのですが、元々使ってい方でもCSS設定すれば枠はできますね。そもそも今回行ったこと諸々があまり必要なかったかも…
まぁ気を取り直して、できたことをそれぞれどんな手法でやったのか記録しておきます。
できたことの解説
1. アプリカードのデザイン変更
今までは、hiro45jp様のAppHtmlをCSSカスタマイズせずに使っていました。
AppHtml正式版をリニューアルしました♪ | 普通のサラリーマンのiPhone日記
アプリカードのデザインを変えようということで、いろいろ探して見つけたのが
↓大谷様のサイトで紹介していたデザイン。
個人的に気に入ったので拝借。単純にサイト内のコードブロックにあるHTMLソースとCSS記述をいただきました。
2. アプリカード生成Workflowの作成
しかし、ブックマークレットを作るにはPC上の作業が必要なようですし、今回はHTMLソースをどのようにするのかすでに決まっています。
また、
- AppHtmlのサイト提供が終わったら使えなくなる
- ほかのHTMLソース生成系はWorkflowで行っているので統一したい
というわけで、先人が既にやっていないか探してみると、…ありました。
sorashima様が公開されているものをまたまた拝借(汗)
今回は若干の修正を加えました。
- AppStoreの検索結果から呼び出す方式から手入力で検索する方式に変更(※)
- アプリの価格データを参照するように変更
※ オリジナルではアプリによっては検出できないものがあったので
修正後のWorkflowの中身はこちら
↓テキストブロックの中身
<div class="PHG-app-frame"> <div class="PHG-app-link"> <div class="PHG-app-img"> <a href="url" target="itunes_store"> <img src="icon" width="80" height="80" class="appIconImg" style="border-radius: 22px 22px 22px 22px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25); margin: -5px 75px 1px 5px;" alt="name"> </a> </div> <div class="PHG-app-title"> <div class="PHG-app-name"> <a href="url" target="itunes_store">name</a> </div> <div class="PHG-app-price">原稿執筆時の価格: ¥price</div> <div class="PHG-app-cat">カテゴリ: category</div> </div> </div> <div class="PHG-app-dl-button"> <a href="url" target="itunes_store">アプリの詳細を見る <span class="PHG-app-click">>>click</span> </a> </div> </div>
※Workflow内ではバリアントの変数なものが、ここに貼り付ける際にテキストになっているので注意
3. はてなブログのデザイン変更
さて、あとはブログにCSSを反映させれば準備完了。
ここでどうせなのだからと、はてなブログの全体デザインを変更しました。
↓シンプルデザインかつ、今後のカスタマイズもしやすいとのことでシロマティ様の「Brooklyn」を利用。
手順
しかし、スマホ用サイトに反映されないと思っていたのですが、レスポンシブデザインに対応させないといけないそうです。
✕ : クリックなどするとレスポンスが得られるデザイン
○ : デバイスに合わせて見た目や操作方法が最適化されるデザイン
恥ずかしながら✕の方だと勝手に思っていました……
↓ここにチェックを入れる
そんなこんなで、できあがりは今ご覧頂いている通りです。
4. モブログ環境でのプレビュー方法発見
さて、これでアプリカードのデザイン変更はできたのですが、ひとつ問題がでてきました。
ブログ記事作成中にCSSを反映させたプレビューができないのです。毎回投稿してから確認というわけにはいかないので、
- 記事作成は以前から利用している1Writer
- プレビューはCSSをカスタマイズできるエディタ
という体制にしました。
今回採用したのは「Notebooks」
CSS記述に関しては、残念ながらはてなのテーマをすべては反映できず。(やり方の問題かも)
アプリカードの形は実際の記事同様になるので、ひとまずそれで良しとしました。
まとめ
少しデザイン変えたかっただけなのに割と手間がかかったような…
まぁWorkflowからアプリカードを作れるようになったのが一番の収穫かなと。
それではまた。