MarsEditでiPhoneアプリのリンクを画像付きで挿入する方法


app store アイコン
iPhoneアプリを紹介したい時にリンクを作成するのが意外に面倒です。Appleが提供しているリンク作成サービスだとアプリの画像がなく、WEB上でサムネイル画像付きのリンクを作成するサービスは、そのサイトへのリンクが張ってあるので使いにくかったりします。WordPressで簡単に挿入できるプラグインもありますが、記事を書くのにMarsEditを使っているのでWordPress上で挿入しなければならないプラグインは二度手間です。

そこで、MarsEditでiPhoneアプリのリンクを画像付きで挿入する方法を紹介します。

スポンサーリンク

AppHtmlIMEをインストール

AppHtmlIMEをインストールするにあたって、MarsEditは一旦終了させる。
Happy-Go-Lucky: [AppHtmlME] Mavericks 対応と予約語追加 の「ダウンロードはこちらより。」からダウンロード。(Happy-Go-Lucky: AppHtmlME 3.0 PHG 対応その他 に使い方が説明され、ダウンロードリンクもあるのですが、古いバージョンがダウンロードされるので注意。)
apphtmlimeダウンロード

ダウンロードされた「AppHtmlME-3.1.zip」を解凍。
apphtmlime中身

「AppHtmlME.workflow」を右クリックしてコンテキストメニューの「開く」を使い開く。
apphtmlime開き方

開発元は未確認です。とでるので「開く」をクリック。
開発元は未確認

インストールしますかと尋ねられるので、「インストール」をクリック。
apphtmlimeをインストールしますか

インストール完了の表示が出たら「完了」をクリック。
apphtmlインストール完了

以上でインストールは完了です。

自分のPHGアカウントの設定方法

Finderを開きメニューバーの「移動」をクリック。「option(alt)」キーを押すと「ライブラリ」が表示されるので、クリックして開く。

移動、ライブラリの表示

ライブラリの中身が表示されるので、「Services」フォルダの中にある「AppHtmlME.workflow」を右クリックし、「パッケージの内容を表示」をクリック。
パッケージの内容を表示

「Scripts apphtml_settings.py」をテキストエディタなどで開く。
apphtml_settingsを開く

24行目付近の「phg」にPHGのIDを入力し保存して閉じる。
PHG IDの入力

AppHtmlMEの使い方

MarsEditを起動し、記事の編集画面を出す。
メニューバーの「MarsEdit」→「Services」→「AppHtmlME」をクリック。
AppHtmlIMEの起動

挿入したいリンクの製品をクリックして「OK」をクリック。今回は「iPhone App」を選択。
iPhoneAppを選択

検索画面が出るので、紹介したいアプリを入力して検索。
AppHtmlIME検索

複数結果が出て来たら、紹介したいアプリを選択して「OK」をクリック。
検索結果を選択。

書式テンプレートを選択して「OK」をクリック。これで編集中の画面にリンクが挿入されます。
書式テンプレートの選択

どのような表示か各種サンプルで紹介します。
1)小さいボタン

2)大きいボタン

3)テキストのみ

Chrome – Google, Inc.

4)アイコン付き(小)


Chrome
カテゴリ: ユーティリティ

5)アイコン付き(大)


Chrome
カテゴリ: ユーティリティ

以上のような表示になります。サイトのCSSにも左右されますので注意してください。この表示はあくまで目安なので見た目が多少違う場合があります。

コードを更に理解する

WordPressをより自由に、思い通りに使用するにはPHPの知識が必要です。

PHPを学ぶには、Web上での情報や知識には限界があるので、人に教えてもらうのが一番の近道です。

そこでオススメなのが「CodeCamp」です。

マンツーマン指導なので、わからないことはすぐ聞けて、無料体験レッスンもあるのでどんな感じか試せます。


ITエンジニア専門スクールもオススメです。

スポンサーリンク

おわりに

MarsEditで使えて操作も簡単なAppHtmlME。デフォルトの表示パターンでも十分ですが、更にこだわりたい人には自分でテンプレートも作れます。その紹介はまた今度に。


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク