HOME   »   ブログ運営  »  AppHtmlをAppStoreHelperと同じようなスタイルにしてみた
RSSフィード
アプリの紹介には今までMac上からAppStoreHelperを利用して紹介していました。

最近はiPhoneでもブログの下書きをするようになってきたので、iPhoneからもMacと同じような形式でアプリを紹介したいと思いました。

しかし、AppHtmlはデフォルトの形式だとAppStoreHelperで作成しているスタイルと異なっていした。

そこでAppHtmlメーカーでリンクを作成する際に、AppStoreHelperのスタイルを参考にしてみました。大体同じようなスタイルに出来たので紹介したいと思います。

スポンサーリンク

リンクの作成にはAppHtmlメーカーを利用

今回の作成にあたり、AppHtmlメーカーを利用させていただきました。

AppStoreHelperで作成すると以下のようなスタイルでした。
するぷろ for iPhone(ブログエディタ) App
カテゴリ:ソーシャルネットワーキング
価格:¥350(記事掲載時点)
バージョン: 1.530
リリース日:2011/05/18


今回AppHtmlで以下のようなリンクを作成する事が出来ました。

するぷろ for iPhone(ブログエディタ)
カテゴリ:ソーシャルネットワーキング, 仕事効率化
価格:¥350
(記事掲載時点)
バージョン: 1.530
リリース日:2011/05/18
AppStoreで詳細をみる


AppStoreHelperとAppHtmlの違い

上のアイコンをみていただくと分かると思いますが、AppStoreHelperではあった「App Store」アイコンを消去して、AppHtmlでは、「AppStoreで詳細をみる」と直接リンクを置いてみました。あとは出来るだけAppStoreHelperのスタイルに似せてみました。

tableタグをいじって編集

AppStoreHelperのデフォルトスタイルは、tableタグで書かれている事はわかりました。なので、AppHtmlでもtableタグで作成してみようと思い、ちょっとずつ変更しながら何度も試行錯誤して、ようやく似たようなスタイルを完成する事が出来ました。

作成したブックマークレットはMyShortcut2アプリを利用して通知センターに置きました。これはMyShortcuts+Viewerでも同じように登録が可能です。
MS2 App
カテゴリ:ユーティリティ
価格:¥85(記事掲載時点)
バージョン: 1.4
リリース日:2012/12/20
MyShortcuts+Viewer App
カテゴリ:ユーティリティ
価格:¥85(記事掲載時点)
バージョン: 1.4
リリース日:2012/06/16


▼AppHtmlで登録した書式テンプレートは以下です。tableタグにおいて、セルを結合するという技を「AppStoreで詳細をみる」部分で用いました。勉強になりました!11pxなどのごちゃごちゃした部分は、AppStoreHelperからそのままコピーしました。
<table border="0" style="line-height: 1.2em;"><tr><td rowspan="9" width="75px" style="padding: 0; vertical-align: top; border:0px;"><a href="${linkshareurl}" target="_blank" rel="nofollow"><img width="75" class="alignleft" align="left" src="${icon75url}" style="border-radius: 11px 11px 11px 11px;-moz-border-radius: 11px 11px 11px 11px;-webkit-border-radius: 11px 11px 11px 11px;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: -5px 15px 1px 5px;"></a></td><td colspan="2"><a href="${linkshareurl}" target="_blank" rel="nofollow"><strong> ${appname}</strong></a></td></tr><tr><td width="95px">カテゴリ:</td><td>${category}</td></tr><tr><td width="95px">価格:</td><td>${price}<br>(記事掲載時点)</td></tr><tr><td width="95px">バージョン:</td><td> ${version}</td></tr><tr><td width="95px">リリース日:</td><td>${pubdate}</td></tr><tr><td colspan="2"><a href="{linkshareurl}">AppStoreで詳細をみる</a></td></tr></table>


▼これで生成されたブックマークレットを登録するのですが、直接MS2に登録すると反応しませんでした。一度Safariに登録してから「ブックマークを編集」からブックマークレットをコピーしてMS2に登録すると上手くいきました。
Ms2 1301092239

通知センターからAppHtmlを利用出来るようになった!

▼通知センターは以下のようになりました。これでiPhoneからもアプリを紹介するリンクを思い通りのスタイルで張る事が出来るようになりました。
Slpro 1301092251

ブックマークレットの挙動を動画で紹介

▼今回生成したブックマークレットがどんな挙動を示すか、動画に撮ってみました。内容としては、通知センターから作成したブックマークレット(AppHtml)を起動→アプリ名を入力→該当アプリ名の時にキャンセル→するぷろへタグが貼付けられる、というものです。


まとめ

自分で書式テンプレートを編集出来るので、アプリの紹介にひと味つけてみてはいかがでしょうか。今回載せたテンプレートを利用していただいて構いません。

関連記事

iPhoneのSafariで見ているページタイトルとURLをTweetbotでつぶやくブックマークレットを作ってみた

現時点で通知センターから起動出来る最強アプリはMyShortcuts+ Viewerだった

通知センターに追加でアプリを登録するのにMS2を使ってみた!

ShareHtmlで指定した画像をサムネイルにする方法

記事紹介のリンクをサムネイル付きで表示出来るShareHtml

スポンサーリンク

過去記事セレクション

当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました



▼このカテゴリの最新記事
Relate Entry
Entry TAG
AppHtml   AppStoreHelper   通知センター   ブックマークレット  
Comment
Trackback
Comment form
スポンサードリンク
楽天
2014年7月現在使用しているブログ用iPhoneアプリ16個
iPhoneホーム画面
人気エントリー
先月の人気記事
第1位(→0)
iPhoneにある写真(画像)をセブンイレブンで現像する方法

第2位(→4)
総計290個以上掲載!iPhoneアプリのURLスキーム一覧

第3位(↗︎2)
【iPhone】秘密の質問を忘れたのでAppleのサポートに電話してリセットしてもらった

第4位(↘︎2)
理系大学生なら絶対覚えておくべきWordの数式のショートカット

第5位(↘︎1)
iPhoneのパスコードを10回間違えると再入力までに60分必要

第6位(↘︎1)
SoftbankのiPhone4s→iPhone5sへ機種変更した時の料金試算

第7位(↗︎3)
iPhoneの画面を録画できるMac・Windowsアプリ「Reflector」のインストール方法・使い方

第8位(↘︎4)
iPhone/iPadのパスコードロックを10回間違えた時のデータ消去機能を実行してみた

第9位(↗︎4)
xRecというiPhone画面を録画できるアプリが再び登場!

第10位(↘︎2)
【iPhone】秘密の質問を忘れて間違えすぎるとApple IDが8時間ロックされる

第11位(→0)
iPhoneの写真を1枚5円で現像出来るネットプリントジャパン!

第12位(→0)
パラメータ有りiPhoneアプリのURLスキーム一覧

第13位(↗︎30)
青春18切符で東京から大阪へ~東海道線を突っ走る旅(1日目)

第14位(↗︎55)
青春18切符を利用した旅行時に活躍したiPhoneアプリのまとめ

第15位(↗︎16)
セリアでiPhoneの防水ケースを購入!風呂場で使うときに便利!

全記事表示リンク
サイト内検索
プロフィール

nasimeya

Author:nasimeya
Twitterアカウント→@nasimeya
iPhone5S/iPad3/iPad mini/MacBookAir13inch/Nexus5を現在所持しており、アプリとか紹介を主にしています。LAMYなど文房具もちょくちょく。ブログは楽しく書くことを心掛けております。

日にの観察ブログの更新は停止しています。

新しいブログはこちら⇒なしめやブログ(http://nasimeyablog.com

2013年5月現在利用している主力iPhoneアプリ26個
iPhoneホーム画面
2013年5月現在利用しているブログ用iPhoneアプリ13個
iPhoneホーム画面
iPad mini用おすすめアプリ8選

PAGE TOP