5月
8

パワーアップされたAppHtmlブックマークレットの登録方法(モブログ初心者向け)

AppStore
AppStore Photo by mayo1950

ブックマークレットの「ブ」の字も知らなかったその頃の私には、導入のハードルは高かったです。
それでも、ブログでアプリの紹介には欠かせない@hiro45jpさんの「AppHtml」ブックマークレットを是非とも導入したいと考えていました。

結局のところ分からなくて、作成者のひろさんに親切に教えて頂いたのです。
その事がきっかけになって、ブログを書くことの楽しみが膨らみ、今日まで続けてこれたのかもしれません。
その繋がりから、他の方々にも様々なアドバイスを頂く事があります。

独自ドメインを取って、このWordPressでブログを書き始めて、5月17日でまるまる3年の歳月が経とうとしています。
稚拙な当ブログをご覧頂いているみなさま、本当にありがとうございます!

前置きが長くなりましたが、初心にかえって本題の「AppHtml」の導入方法を、初心者の方にもなるべく分かりやすいようにご紹介できたらいいな〜と。
以前にも書いてはいるんですけどね。

「AppHtml」機能がパワーアップ

「AppHtml」とは、Appストアで販売されている、アプリやミュージックなどのコンテンツをブログで簡単にアフィリエイト付きで紹介できるリンクツールです。

「AppHtml」は、現在connect1ngdotsのメンバー( 普通のサラリーマンのiPhone日記 の@hiro45jpさん、 Happy-Go-Luckyの@toshiya240さん、代助のブログの@hondamarlboroさん、Feelingplaceの@feelingplaceさん)のご好意によって運営・メンテナンスが行われています。

まだ旧AppHtmlをお使いの方は、こちらを導入されることをお勧め致します。
何故ならば、AppleのストアのアフィリエイトはリンクシェアからPHGに移行されていますし、アイコンが表示されていないブログもお見受けします。

AppHtml リリース情報 – 「リンクをコピー」してURLを直接貼り付けても検索できるよう修正しました。 | Feelingplace
入力したキーワードから iTunes ストアを検索し、コンテンツを指定フォーマットに整形して出力するブックマークレット、AppHtml。そのAppHtmlの修正版をリリースしました。内部プログラムの見…

「Github」と聞くと、それだけで初心者の方は「?」なにそれ!と躊躇されるかと思います((((;゚Д゚))))ガクガクブルブル
以前の私なら、もうそこで諦めていたかもしれません(若い方はそうでもないかなw)

はじめは敷居が高い気がしますが、まずは臆せずリンク先をタップしてみてください。

こちらでは、詳細とソースが見れます。

更に、iPhoneではここをタップすると詳細が見れます。
iPhoneから見ている方は、ランドスケープ(横画面)でご覧頂くと端まで見れます。

はじめに
はじめに Photo by mayo1950

こちらをご覧頂き、わかる方はこれ以降は見なくてもいいです(笑)

AppHtmlブックマークレット・メーカー

こちらから、ご自分の環境にあったブックマークレットを作成します。
まずは、リンクをタップしてください。

このような画面が表示されます。

ブックマークレット・メーカー
ブックマークレット・メーカー Photo by mayo1950

AppHtmlの設定

  • 順番に必要な項目を入力していきます。
  • 生成されたブックマークレットを、ブラウザのブックマークに登録します。
  1. 検索対象のここでは仮にiPhoneを選びました。

    検索対象、書式テンプレート
    検索対象、書式テンプレート Photo by mayo1950

  2. 次に書式テンプレートを選びます。
    ここでは、
    アイコン付き(小)を選びました。
  3. 出力先を選びます。
    ポップアップを選ぶと、お使いのエディタにコピペして貼れます。
    予め用意されたエディタから選ぶ事もできます。
    ここでは、できたコードをするぷろエディタに渡すようにしてみました。

    書式テンプレートするぷろ
    書式テンプレートするぷろ Photo by mayo1950

  4. 検索件数を選びます。
    8件にしました。
  5. スクリーンショットの画像を指定できます。
    ここでは、デフォルトのままに次に進みました。
  6. 持っているなら、ご自分のPHGアフィリエイトIDを入力します。
  7. テンプレートを直接カスタマイズできます。と、あります。
    デフォルトでは、価格は表示されません。
    ここで、「予約語」の価格を表す「${price}」を追加してみます。
    カテゴリの次に

    <span class="price">価格: ${price} (記事の掲載時) </span><br>
    

    と挿入しました(スクリーンショットでは一部タグが抜けています)
    他にも追加したい項目がある場合には、先程のページを参考にカスタマイズします。

    アフィリエイト・カスタマイズ
    アフィリエイト・カスタマイズ Photo by mayo1950

  8. Bookmarklet生成ボタンをタップします。
    ブックマークレットができあがりました。お疲れさまです!

    ブックマークレット生成
    ブックマークレット生成 Photo by mayo1950

  9. iPhoneからなので、iOS ブックマークレット登録用の青いリンクをタップします。

ブックマークレットをブラウザのブックマークに登録

あともうちょっとです。頑張りましょう♪

  1. リンクをタップすると、このページが開きます。
    このページでは、ブックマークレットの登録方法が書いてあります。

    ブックマークレット登録
    ブックマークレット登録 Photo by mayo1950

  2. この通りに進めて行きます。
    まず、下のブックマークアイコンをタップして、

    ブックマークする
    ブックマークする Photo by mayo1950

  3. 出てきたページを保存します。
    この時に、ブックマークの名前はバツ印で削除して、分かりやすい名前に変更が可能です。
    「AppHtml(iPhone)するぷろ」としておきました。

    名前変更と編集
    名前変更と編集 Photo by mayo1950

  4. 右上の保存ボタンをタップして、追加します。
  5. 次に、ブックマークを編集します。
  6. 先程の追加したブックマークの名前を探します。
    編集ボタンをタップすると、このような赤いマイナスボタンが表示されます。
    これで、編集ができるようになりました。
  7. 目的のブックマークをタップして、
    名前の次のURLを編集します。

    ブックマークの編集
    ブックマークの編集 Photo by mayo1950

  8. タップするなり、コードの最後が表示されます。
    URLをタップして、指を離さずにそのままの状態で左の方向へ移動させます。

    URL編集
    URL編集 Photo by mayo1950

  9. ここまできたら、今度はjavascriptと「?」間にカーソルを合わせます。
  10. 「?」から左を全て削除します。
    キーボードのバツでいいので。
    これで作業はほぼ完了です。
  11. javascriptが頭に来てるのを確認できたら、完了ボタンをタップします。

    javascript
    javascript Photo by mayo1950

  12. 編集画面のままになっているので、右下の完了ボタンをタップします。
  13. 最後に右上の完了ボタンをタップします。
    これで、AppHtmlが使えるようになりました!

    完了
    完了 Photo by mayo1950

私の使い方は、機会があれば書くかも…w
先程のページを参考にしてください。
ここでご紹介した以外にも、細かい設定や保存ができます。

使い方はこちらのサイトが参考になります。

機能強化されたAppHtmlのキーワード検索はAppStoreからURLをコピーして貼り付けるだけ | 代助のブログ

あとがき

説明不足かもしれませんが、ブックマークレットの登録方法をマスターさえすれば、他のブックマークレットも大体同じ要領です。

今回は、AppHtmlの登録方法をご紹介しましたが、Webのブラウザ上で使えるAppHtmlWebやMac環境でエディタ「MarsEdit」をお使いの方ならAppHtmlMEが便利です。

最後になりましたが、快適なモブログ環境を与えて頂いたconnect1ngdotsのメンバーの皆様のご尽力には、大変感謝いたしております!

このエントリは、次のアプリを使用して、モブログしました♪

このエディタで、いつも下書きします。下書きと言っても大方はここで完成しています。

Textwell
カテゴリ: 仕事効率化, ユーティリティ
価格: ¥300(2014.5.8掲載時)

細かい所まで配慮されたWordPressエディタ

PressSync Pro – WordPress Blogging App
カテゴリ: ソーシャルネットワーキング, ユーティリティ
価格: ¥500(2014.5.8掲載時)

画像に矢印や説明をつけます。

Markee
カテゴリ: 写真/ビデオ, 仕事効率化
価格: 無料(2014.5.8掲載時)

2枚の写真を1枚に

Twin Collage – 2枚の写真を並べて1枚にまとめる簡単コラージュアプリ for Instagram, LINE, Twitter, Facebook
カテゴリ: 写真/ビデオ, ユーティリティ
価格:無料 (記事の掲載時)

画像をFlickrなどにアップロードします

Picport
カテゴリ: ソーシャルネットワーキング, 写真/ビデオ
価格: ¥300(2014.5.8掲載時)

楽しいモグロブライフを!
では、では。。

Posted from PressSync Pro on iPhone.

【こちらの関連記事もご覧ください】


記事をお読み頂き、ありがとうございます!

記事の内容を気に入って頂けましたか?
もし気に入って頂けましたら、
ソーシャルボタンで共有頂ければ、とても嬉しいです♪


follow us in feedly RSS

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This blog is kept spam free by WP-SpamFree.