普通のサラリーマンのiPhone日記 Rotating Header Image

iOS/Macアプリ紹介のAppHtmlが大幅リニューアル♬

毎度のお久しぶりです。
うーむ、この言葉….定番になりそうなんで嫌…orz
夏風邪を引いて昨日まで寝こんでおりましたが何とか回復してきました。

先日お伝えした各種サービスが使えなくなるって話。

BookmarkletとRSSフィード – 告知とお伺い

たくさんの反響がありました。そして多くの希望をお聞きすることができました。
この場を借りてお礼を申し上げます。

この記事を書いた後「Pipesをv2対応するか!」と思いましてPipesを触ってたんです。
そしたら痛恨のミス。AppHtmlが、v2になっちゃいました。がーん、がーんです。
ということで8月を待たずに、AppHtmlはご臨終です。・゚・(ノД`)・゚・。

そこで優先順位マックスでAppHtmlの新作を作りました。「転んでもただでは起きない。逆にバネにしちゃる!」ということで超進化版になりました。

AppHtmlの進化っぷり

今回、Yahoo!Pipesとはおさらばしました。文字化けがひどいのとPipeの階層化に制限があることが最大の理由。今回は、Javascriptだけで仕上げました。出来栄えは前作を超えると自負しています。何が凄くなったかを列挙してみます。

  • Bookmarkletメーカーによって初期設定を大幅に簡略化した
  • AppHtmlとMacHtmlを統合した(iPadアプリもあえて分けました)
  • アイコンを角丸シャドーにしてかっこ良くした
  • カテゴリの全てを表示するようにした
  • 評価のスター表示とコメント件数が入れられるようになった
  • リリースノートや説明を改行付きでバッチリ取ってこれるようになった
  • GameCenter対応やUniversal対応の表示を追加した
  • 前作と比較すると信じられないくらい爆速になった
  • 本体をDropboxに置くことでメンテナンスを容易にした

あげればキリがないのですけど、欠点は検索がiTunes Search APIだけになった点。GoogleやYahoo!の検索じゃないと引っかからないアプリはヒットしなくなりました。

今回の制作のモチベーションは…。すばり。

@RyoAnnaに使わせること…。

今回、これ以上の簡単さは無いだろうってくらい簡単にしました。どや!
それからiPhoneやiPadやMac。どの環境でも同じ使い勝手を追求するならば、そこはやっぱり特定アプリじゃなくWebサービス。この路線は崩さすにいきたいなと思います。

特定アプリの進化がWebサービスを進化させる。逆もまたしかり。

今回もAppStoreHelperの@hitoriblogさん、DraftPadのuenoさんのアプリ群に圧倒的な破壊力があったからこそ、BookmarkletとしてのAppHtmlの進化に繋がってます。
まさに螺旋式に階段を上がっていく感じです。

Bookmarkletメーカーとは何ぞ?

「Bookmarkletって難しい呪文でしょ?」と自分でも感じるので、面倒な設定を簡略化してくれるサイトをDropbox上に作りました。これを使えば好みのBookmarkletが一瞬で作れます。作った後はブラウザのお気に入りにしちゃえば次回以降は設定すら不要です。

AppHtmlメーカー(Bookmarkletメーカー)

AppHtml30E130FC30AB30FC

順に設定していけばOK。書式テンプレートも6個ほど準備しました。「書式って実際にどんな風に見えるの?」というせっかちな方。すぐに確認できますのでお待ちを。ヘビーな利用者の方は、この画面でテンプレートの書式を自ら変更することもできます。

尚、書式テンプレート「予約語一覧」にするとテンプレート内で使える予約語がサンプルと共に一覧表示されます。このアイデアはDraftPad仕込み。感謝でございます。

もろもろ設定したら「Bookmarkletを生成する」を押す。

すると自分用のBookmarkletが作られます。リンクをお気に入りへ登録する前にデモのBookmarkletを触ってみると良いです。わざとデモする為に「プレビュー表示」を選んでおくと良いです。確認してOKならお気に入りへ。

共通の動きについて

起動すると検索キーワードを聞いてきます。できるだけアプリの正式名に近い言葉を入れて下さい。ダメならば別キーワード。開発元でも引っかかります。ちなみにブラウザ上でキーワードを選択した状態でBookmarkletを起動すると選択文字で検索します。

例えば、iTunes Webを見てるならアプリ名を選んで起動すれば簡単です。

検索は複数件ヒットするとポップアップが次々と表示されます。この時のOKとキャンセルの動きをどうするかは、実は非常に悩みました…。

  • ポップアップのデフォルトキーはOK(エンターキーを押すとOKとみなされる)
  • キャンセルを押すと次の候補がでる前に終わる

という制約があるからです。これを逆手に取り、以下のような仕様にしました。

  • キャンセルした内容をヒットしたアプリとしてみなす

エンターキーを「ぽんぽん」押しながらヒットしたらキャンセル(ESCキー)で終わり。
キャンセルされたアプリのHTMLを生成して結果を返します。
慣れれば分かりやすい仕様だと思うのです。ご了承をm(_ _)m

吐き出された結果は?

ここから先は吐き出されるHTMLをそのこだわりと共に解説していきます。ちなみに以下のスクショはプレビュー表示の時の画面です。プレビュー表示を消すボタンとか、HTMLを選択するボタンとか、そういった点も前作よりも進化させました。

Bookmarklet30E130FC30AB30FC-3

前作では対応機種とか、言語とか表示してましたけど、それってポチる上ではそれほど重要では無いよなぁ…と感じていたんです。ですので、今回はポチるか判断する為の厳選された情報のみを書式テンプレートとして表現してみました。

ゲームとかはスクショでダマされないように「販売元」で選ぶ。これ定説になりつつありますけど、「販売元」が別のアプリを出しているならば、どんなアプリがあるの?って知りたいよなーと思いまして、販売元のiTunesリンクを載せてます。

ちなみに販売元iTunesリンクは、リンクシェアのアフィリエイト付きです。

他にも色々な書式があります。実際に試してお好みをお使い下さい。
また今回の書式はCSSがかなり複雑に埋め込まれているので、環境によってはうまく表示されないってことがあるかも知れません。その場合には教えて頂けると助かります。

今後のリニューアル予定

今回、私の大失敗でAppHtmlが使えなくなってしまったことから最優先でAppHtmlのリニューアルに取り組みました。今後の予定ですが、今回のやり方を踏まえ、もうPipesとはおさらばしようと思います。順次作っていきますのでお楽しみに。

  • FocusHtml(まとめ記事が少なくなると私が痛いので…)
  • ShareHtml(FocusHtmlとエンジンが一緒の為)
  • PhotoHtml(Set対応などもしちゃおうかなと)
  • FavHtml(結果的にこの優先度…)
  • AppStore新着チェック(作れそうな技術的な見通しがないっす)
  • AppStore値下げチェック(作れそうな技術的な見通しがないっす)
  • MacAppStore値下げチェック(作れそうな技術的な見通しがないっす)

一応着手の順番は上記のように考えてます。
使う方々の影響度、見る方々の影響度により決めてます。
他にも色々と作ってきたものがありますが、上記が片付いてから追々考えたいなと。

今後の為にも、AppHtmlの新作の感想など良かったら聞かせて下さい!

AppHtmlギャラリー

実際にAppHtmlで吐き出したものをギャラリーとして最後に並べてみます。

(注意)アイコン角丸ですがRSSでは単なる四角になります。あしからず。


フル表示(SSフル+説明付)

ポケットべガス v4.44(無料)

カテゴリ: ゲーム, カード, カジノ, エンターテインメント
現在の価格: 無料(サイズ: 20.1 MB)
販売元: AppBank – GT-Agency
リリース日: 2010/02/25

App GameCenter対応 + iPhone/iPadの両方に対応

現在のバージョンの評価: (283件の評価)
全てのバージョンの評価: (8,024件の評価)

What’s New
アプリのサイズを調整

ss1 ss2 ss3 ss4 ss5

ss1 ss2 ss3 ss4 ss5

Description
定番ゲーム集の決定版!ユーザーから1億回も遊ばれたポーカー・ブラックジャック・大富豪・麻雀・ソリティア・リバーシが1アプリに集約。
対戦を選択するだけで瞬時に対戦相手が目の前に現れる衝撃は必見!

スクリーンショットも是非ご覧ください♪

——
ポケベガ収益からの義援金提供のお知らせ

この度の東北関東大震災において被害にあわれた方々、そのご家族や親族の方々に心からお見舞い申し上げます。
復興の支援に義援金30万円とポケベガのコイン売上、3月分の収益を全額を送らせていただく予定で、改めて後日、成果をお知らせできればと思います。

ポケットベガスはコインの販売収益で運営しておりますが、引き続きの支援を検討し、収益から1%を送らせていただきます。

一日も早い復興を心より、祈念いたしております。

(…長いんで省略…)


フル表示(SS2枚)

ポケットべガス v4.44(無料)

カテゴリ: ゲーム, カード, カジノ, エンターテインメント
現在の価格: 無料(サイズ: 20.1 MB)
販売元: AppBank – GT-Agency
リリース日: 2010/02/25

App GameCenter対応 + iPhone/iPadの両方に対応

現在のバージョンの評価: (283件の評価)
全てのバージョンの評価: (8,024件の評価)

ss1 ss2


大アイコン表示

ポケットべガス v4.44(無料)

カテゴリ: ゲーム, カード, カジノ, エンターテインメント
現在の価格: 無料(サイズ: 20.1 MB)
販売元: AppBank – GT-Agency
リリース日: 2010/02/25
現在のバージョンの評価: (282件の評価)
全てのバージョンの評価: (8,023件の評価)
App + iPhone/iPadの両方に対応
GameCenter対応


中アイコン表示

ポケットべガス v4.44(無料)App
カテゴリ: ゲーム, カード, カジノ, エンターテインメント
販売元: AppBank – GT-Agency(サイズ: 20.1 MB)
全てのバージョンの評価: (8,023件の評価)
GameCenter対応 + iPhone/iPadの両方に対応


小アイコン表示

ポケットべガス v4.44(無料)App
カテゴリ: ゲーム, カード, カジノ, エンターテインメント
販売元: AppBank – GT-Agency(サイズ: 20.1 MB)


リンクのみ

ポケットべガス v4.44(無料)

CSS大臣のおかげで、アイコン角丸がうまくいきましたヽ(´ー`)ノ

@hiro45jp謹製Bookmarkletをちょっちカスタマイズ | stryhの日記 ~stryh/changelog

@saita_ryouheiさん、ありがとう、ありがとう、ありがとう。

-

タグ: AppStore, App紹介, Blog, Bookmarklet, hiroスタイル, HTML, Linkshare, MacAppStore, Twitter, WordPress, Yahoo!Pipes

Similar Posts:

4 Comments

  1. RyoAnna より:

    @RyoAnnaに使わせること…。

    赤いし(笑)
    角丸アイコンはやはり問題があるみたいですね。でも、前の文字と記号だけの時よりぐっと使いやすくなりました。ありがとうございます。

  2. saita_ryouhei より:

    RSSの角丸だけが課題です…orz

  3. saita_ryouhei より:

    角丸アイコン実現出来よかったです (^_^)
    いい勉強になりました。

    また何かあれば助太刀いたしまっする(´∀`)

    大臣よりw

  4. ken より:

    改行は使えない?
    カスタマイズに改行入れたテンプレートは使えませんか?

コメントをどうぞ

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>