アプリのコンテンツを充実させる
「MobileClipでアプリを作成する」ではMobileClipにおけるアプリ作成の方法を一通り確認しました。
ここでは、そこで理解した内容を踏まえ、記事内に様々なリンクを設定する方法や、各種レイアウトをカスタマイズする方法をみていきます。
アプリ内のリンクを設定する
MobileClipの記事本文編集画面ではHTMLタグを使用することができますので、aタグを用いて「<a href="http://www.mobileclip.jp/">MobileClip</a>」のようにWebページへのリンクを設定することができます（ただし、target属性は使用できません）。
MobileClipではこのようなWebページへのリンクのほかに、ブック内記事や目次へのリンク、電話をかけるリンク、地図アプリへのリンクなども設定することができます。
他の記事へのリンクを設定する
ブック内の記事へリンクを設定する場合、リンク先となる記事を指定するための「book_id（ブックID）」と「page_id（ページID）」を確認する必要があります。
ブックIDとページIDの確認方法
- 管理画面「ホーム」にて、リンク先として設定したい記事のブックを表示します。
- Webブラウザのアドレスバーにて、URL末尾の数字を確認します。
この数字部分が「ブックID」です。
http://www.mobileclip.jp/edit/book/1234567
上記場合、URL末尾の「1234567」がブックIDです。
- リンク先として設定したい記事の編集画面を表示します。
- Webブラウザのアドレスバーにて、URL末尾の数字を確認します。
この数字部分が「ページID」です。
http://www.mobileclip.jp/edit/entry/8901234
上記場合、URL末尾の「8901234」がページIDです。
ブックIDとページIDを確認したら、これをもとにリンクを設定します。
同じブック内にある記事へリンクを設定する方法
- リンクの設定元となる記事を開きます。
- 本文欄に以下の書式でリンクを作成します。
「<a href="/view/entry/page_id.html">～</a>」
例）ページIDが「8901234」の場合、以下になります。
「<a href="/view/entry/8901234.html">同じブック内記事へのリンク</a>」
複数のブックで構成されているアプリで、別のブック内にある記事へリンクを貼りたい場合には、以下のようにリンクを設定します。
ほかのブック内にある記事へリンクを設定する方法
- リンクの設定元となる記事を開きます。
- 本文欄に以下の書式でリンクを作成します。
「<a href="mobileclip:book/book_id/pages/page_id">～</a>」
例）ブックIDが「1234567」、ページIDが「8901234」の場合、以下になります。
「<a href="mobileclip:book/1234567/pages/8901234">ほかのブック内記事へのリンク</a>」
ブックの目次に対するリンクを設定する場合には以下の方法で設定します。
目次へのリンクを設定する方法
- リンクの設定元となる記事を開きます。
- 本文欄に以下の書式でリンクを作成します。
「<a href="mobileclip:article/index">目次へのリンク</a>」
タブへのリンクを設定する
記事からタブへのリンクを設定する場合には、以下の方法でおこないます。
各種タブへのリンクを設定する方法
- リンクの設定元となる記事を開きます。
- 本文欄に以下のリンク記法をもとにリンクを作成します。
例）写真タブへのリンクを作成する場合、以下になります。
「<a href="mobileclip:module/photo">写真タブへのリンク</a>」
タブ別のリンク記法
| タブ名 | リンク記入方法 |
|---|---|
| 写真 | <a href="mobileclip:module/photo"> </a> |
| 動画 | <a href="mobileclip:module/video"> </a> |
| バックナンバー | <a href="mobileclip:module/back_number"> </a> |
| 最新号 | <a href="mobileclip:module/article"> </a> |
| 定期購読 | <a href="mobileclip:module/premium"> </a> |
| カテゴリ | <a href="mobileclip:module/category"> </a> |
| <a href="mobileclip:module/facebook"> </a> | |
| ブック | <a href="mobileclip:module/book"> </a> |
| クリッピング | <a href="mobileclip:module/clipping"> </a> |
チャンネル選択画面(複数メディア)の場合
チャンネル選択画面のHTMLでリンクを指定する場合は、上記の記事、タブのリンクの書式にメディアを指定する channel/media_name を挿入する必要があります。
「<a href="mobileclip:channel/mike/book/1234567/pages/8901234">特定メディアのブック内記事へのリンク</a>」
タブへのリンクも同様です。
メールを送るリンクを作成する
新規メールを作成するためのリンクを作成するには以下のように記載します。
指定のアドレスへメールを送るリンクの作成方法
- リンクの設定元となる記事を開きます。
- 本文欄に以下のように記載します。
例）「mail@example.com」へのメール作成リンクを作る場合、以下になります。
「<a href="mailto:mail@example.com">メールを送る</a>」
電話をかけるリンクを作成する
記事内の電話番号をタップした際にその番号へ電話をかけるリンクを作成するには以下のように記載します。
電話をかけるリンクの作成方法
- リンクの設定元となる記事を開きます。
- 本文欄に以下のように記載します。
例）「0123456789」へのメール作成リンクを作る場合、以下になります。
「<a href="tel:0123456789">電話をかける</a>」
地図アプリへのリンクを作成する
記事内の住所や地名をタップした際に地図アプリで開くリンクを作成するには以下のように記載します。
地図アプリを起動するリンクの作成方法
- リンクの設定元となる記事を開きます。
- 本文欄に以下のように記載します。
「<a href="maps:">地図アプリを表示する</a>」
レイアウトをカスタマイズする
レイアウトの選択・並び順の指定
記事の並び順を変更する
目次における記事の並び順を指定することができます。 記事の並び順指定は、各記事編集画面の「目次表示」欄にて指定します。
目次での記事の並び順指定方法
- 管理画面「ホーム」にて記事の編集画面を開きます。
- 「目次表示」欄のプルダウンメニューで「大特集」「中特集」「オート」のいずれかを指定します。
- 「記事を保存する」ボタンをクリックします。
ブックの目次では、「大特集」に指定された記事が最優先に表示され、「中特集」に指定された記事がその次に、「オート」は中特集の次に順次表示されます。
例えば、記事一覧画面にて以下のように「大特集」「中特集」「オート」の記事が存在する場合、「大特集」の記事が上から順番に最優先で表示され、その次に「中特集」の記事が同じように上から順番に表示、最後に「オート」の記事が上から順番に表示されます。
記事を非表示にする
作成した記事をMobileClipには残したまま、アプリ内に表示させないようにしたいというケースもあります。 そのような場合には、記事のステータスを「下書き」に設定します。
記事を非表示にする方法
- 管理画面「ホーム」にて記事の編集画面を開きます。
- 「編集ステータス」欄で「下書き」を選択し、「記事を保存する」ボタンをクリックします。
再び表示される場合には、「編集ステータス」欄で「完成」を選択します。
目次のデザインを編集する
ブックの目次（インデックス）画面のデザインをスタイルシート（CSS）によって変更することができます。
CSSによる目次デザインの変更方法
- 管理画面「ホーム」にて目次のデザインを変更したいブックを開きます。
- 「スタイル・スクリプトを編集」リンクをクリックします。
- 「目次スタイルシート」タブをクリックし、CSSを入力します。
- 「保存する」ボタンをクリックします。
目次への表示／非表示を設定する
目次やストリームに特定の記事のタイトルを表示させないように設定することもできます。
例えば、1ページの文章が長くなったので複数の記事に分割するような場合、全ての記事を目次に表示するのではなく、目次には最初の記事のみを表示し、2ページ目以降の記事は表示しないようにするといった利用が可能です。
目次に記事タイトルを表示しないようにする方法
- 管理画面「ホーム」にて記事の編集画面を開きます。
- 「目次に表示」項目をオフに設定し、「記事を保存する」ボタンをクリックします。
ストリームに記事タイトルを表示しないようにする方法
- 管理画面「ホーム」にて記事の編集画面を開きます。
- 「ストリームに表示」項目をオフに設定し、「記事を保存する」ボタンをクリックします。
目次に表示する画像を指定する
目次に記事のタイトルではなく画像を表示させることができます。
目次に画像を表示させる方法
- 管理画面「ホーム」にて記事の編集画面を開きます。
- 「目次画像URL」欄に表示したい画像のURLを入力します。
なお、「目次画像URL」欄が未設定の場合、記事本文に画像がある場合には、その本文の画像が目次にサムネイル表示されます。
目次にタブへのリンクを指定する
目次に「バックナンバー」や「動画」などのタブ（モジュール）へのリンクを作成することができます。
目次にタブへのリンクを作成する方法
- 管理画面「ホーム」にて記事の編集画面を開きます。
- 「目次リンク先URL」欄に各種タブへのリンクを入力します。
「目次リンク先URL」が指定された記事を目次画面でタップした場合には、たとえその記事の「本文」に文章が入力してあっても、「目次リンク先URL」で指定されたタブの表示が優先され、本文の内容は表示されません。