とりあえず

とりあえず

インフラエンジニアのおっさんが趣味で調べたことをまとめたり適当に。

はてなブログでiPhoneアプリ紹介をカスタマイズ

アイキャッチ 以前からiPhoneアプリ紹介時のアプリカード(でいいのかな?)のデザインが簡素というか枠すらなくて不満でした。それをどうこうするうちにやったことをつらつら書きます。


できたこと

  1. アプリカードのデザイン変更
  2. アプリカード生成Workflowの作成
  3. はてなブログのデザイン変更
  4. モブログ環境でのプレビュー方法発見


当初やりたかったこと

Workflow: Powerful Automation Made Simple
カテゴリ: 仕事効率化, ユーティリティ

これを

こうしたかった

※ここでHTMLソースを見て気づいたのですが、元々使ってい方でもCSS設定すれば枠はできますね。そもそも今回行ったこと諸々があまり必要なかったかも…

まぁ気を取り直して、できたことをそれぞれどんな手法でやったのか記録しておきます。


できたことの解説

1. アプリカードのデザイン変更

今までは、hiro45jp様のAppHtmlをCSSカスタマイズせずに使っていました。

AppHtml正式版をリニューアルしました♪ | 普通のサラリーマンのiPhone日記

アプリカードのデザインを変えようということで、いろいろ探して見つけたのが

↓大谷様のサイトで紹介していたデザイン。

個人的に気に入ったので拝借。単純にサイト内のコードブロックにあるHTMLソースとCSS記述をいただきました。

2. アプリカード生成Workflowの作成

しかし、ブックマークレットを作るにはPC上の作業が必要なようですし、今回はHTMLソースをどのようにするのかすでに決まっています。

また、

  • AppHtmlのサイト提供が終わったら使えなくなる
  • ほかのHTMLソース生成系はWorkflowで行っているので統一したい

というわけで、先人が既にやっていないか探してみると、…ありました。



sorashima様が公開されているものをまたまた拝借(汗)  今回は若干の修正を加えました。

  1. AppStoreの検索結果から呼び出す方式から手入力で検索する方式に変更(※)
  2. アプリの価格データを参照するように変更

※ オリジナルではアプリによっては検出できないものがあったので

修正後の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」を利用。

そのうえでCSSにアプリカード用の記述を追記します。

手順

  1. MacやPCではてなブログのPCサイトにアクセス
  2. デザイン設定画面
  3. 「カスタマイズ」タブ
  4. 「デザインCSS
  5. 表示されるコード欄にCSSを貼り付け
    • CSS貼り付け
  6. 「変更を保存する」ボタンをクリック

しかし、スマホ用サイトに反映されないと思っていたのですが、レスポンシブデザインに対応させないといけないそうです。

✕ : クリックなどするとレスポンスが得られるデザイン
○ : デバイスに合わせて見た目や操作方法が最適化されるデザイン

恥ずかしながら✕の方だと勝手に思っていました……

↓ここにチェックを入れる

レスポンシブデザイン

そんなこんなで、できあがりは今ご覧頂いている通りです。


4. モブログ環境でのプレビュー方法発見

さて、これでアプリカードのデザイン変更はできたのですが、ひとつ問題がでてきました。

ブログ記事作成中にCSSを反映させたプレビューができないのです。毎回投稿してから確認というわけにはいかないので、

  • 記事作成は以前から利用している1Writer
  • プレビューはCSSをカスタマイズできるエディタ

という体制にしました。

今回採用したのは「Notebooks」

  • CSS記述可能
  • Dropbox同期に対応
  • 同期フォルダを指定可能
  • たまたま持っていた

CSS記述に関しては、残念ながらはてなのテーマをすべては反映できず。(やり方の問題かも)
アプリカードの形は実際の記事同様になるので、ひとまずそれで良しとしました。

まとめ

少しデザイン変えたかっただけなのに割と手間がかかったような…

まぁWorkflowからアプリカードを作れるようになったのが一番の収穫かなと。

それではまた。