MobileClipでアプリを作成する

MobileClip管理画面を使ってコンテンツを入力し、基本的なアプリを作成するまでの手順を説明します。

MobileClipにログインする

MobileClipにてアプリを作成するには、MobileClipへログインする必要があります。

MobileClipへのログイン方法

  1. Webブラウザにて「http://www.mobileclip.jp/」を表示します。
  2. 画面右上の「ログイン」ボタンをクリックします。
  3. 「メディアID」と「パスワード」を入力して「ログイン」ボタンをクリックします。
パスワードを忘れた場合には:
MobileClipのログインパスワードを忘れた場合には、MobileClip管理画面下部の「お問合せ」より、メールでご連絡ください。再発行したパスワードは、ご登録いただいたメールアドレスにお送り致します。

コンテンツを入力する

ブックを作成する

アプリ作成の第一段階として、まずはじめに「ブック」を作成します。

新しいブックの作成方法
  1. 管理画面「ホーム」の「新しくブックを追加する」ボタンをクリックします。
  2. 「新しくブックを追加」画面にて「ブックタイトル」「カバーデート」、その他の項目を入力します。
  3. 「保存する」ボタンをクリックします。
●「新しくブックを追加」画面解説
ブックタイトル
雑誌のタイトルを入力します。
(この項目は必ず入力する必要があります)
カバーデート
カバーデートを入力します。
出版社
出版社を入力します。
ISBN/ISSN
アプリ公開するメディアが書籍の場合は、ISBN/ISSNを入力します。その他の場合は入力する必要はありません。
出版年月日
作成年月日または、書籍の出版年月日を入力します。
表紙画像URL
ブックの表紙になる画像のURLを入力します。
RSS URL
WordPressやブログをお持ちで、MobileClipと記事を連動させる場合、RSS URLを入力してください。
紹介文
ブックの紹介文を入力します。

新しいブックを作成すると、管理画面の「ホーム」内に新規に追加したブックの情報が表示されます。このブック一覧画面にて、ブックの公開/非公開、並び替えや削除など、ブックの管理をおこないます。

なお、新しいブックの追加は「RSSを変換して新しくブックを追加する」ボタンからもおこなうことができます。 こちらは既存のブログ記事をまとめて取り込むためのものであり、これまで運用してきたブログの内容をアプリとしてリリースしたいときに便利です(詳しくは「RSS配信から記事を作成する」にて解説します)。

ブックのレイアウトを選択する

新しいブックを作成したら、次はブックのレイアウトを選択します。

ブックの目次(インデックス)レイアウトを選択方法
  1. 管理画面「ホーム」にてレイアウトを選択するブックのタイトルをクリックします。
  2. 「レイアウト設定」リンクをクリックします。
  3. 「スマートフォン」「タブレット」それぞれのタブにおいて任意のレイアウトを選択します。
  4. 「変更を保存」ボタンをクリックします。

「レイアウト設定」にて選択したレイアウトは、アプリの目次(インデックス)でブック内の各記事をどのようなレイアウトで配置するかを選択するものです。 アプリのナビゲーションバー色や記事の本文スタイルなどを設定したい場合には、各ブックの「書誌・カラー設定」「スタイル・スクリプトを編集」より設定をおこないます(詳しくは「レイアウトをカスタマイズする」にて解説します)。

ブックの色をカスタマイズする

ナビゲーションバーや目次の色などに好きな色を設定することができます。
ナビゲーションバーなどの色指定は、各ブックの「書誌・カラー設定」からおこないます。

ナビゲーションバーや目次などの色を変更する方法
  1. 管理画面「ホーム」にてナビゲーションバー色などを変更したいブックのタイトルをクリックします。
  2. 「書誌・カラー設定」をクリックします。
  3. 「拡張テーマカラー」欄の「ナビゲーションバー色」で任意の色をそれぞれ指定します
    (色見本表示部分をクリックすると色指定画面が表示されますので、そこから好きな色をクリックしてください)。
  4. 「保存する」ボタンをクリックします。
「拡張テーマカラー」欄解説
ナビゲーションバー色
ナビゲーションバーの背景色を指定します。iPhone用とiPad用をそれぞれ指定可能です。
ナビゲーションバー文字色
ナビゲーションバーの文字色を指定します。iPad用にのみ指定が可能です。
ナビゲーションバーボタン
ナビゲーションバーのボタン色を指定します。iPad用にのみ指定が可能です。
目次背景色
目次の背景色を指定します。iPhone用とiPad用をそれぞれ指定可能です。
目次文字色
目次の文字色を指定します。iPhone用とiPad用をそれぞれ指定可能です。
目次境界線
目次の境界線色を指定します。iPhone用とiPad用をそれぞれ指定可能です。
見出し文字色
見出しの文字色を指定します。
リンク文字色
リンクの文字色を指定します。

記事を作成する

ブックの中に記事(アーティクル)を追加していきます。

記事の追加方法
  1. 管理画面「ホーム」にて新しい記事を追加するブックのタイトルをクリックします。
  2. 「新しい記事を追加」ボタンをクリックします。
  3. 「記事タイトル」や「目次」欄をそれぞれ設定し、「本文」欄に記事の内容を入力します。
  4. 「編集ステータス」欄を選択後、「記事を保存する」ボタンをクリックします。
●「新しい記事を追加」画面解説
記事タイトル:
記事の見出しを入力します。
この項目は必ず入力する必要があります。
目次表示
目次のレベルを設定します。
「大特集」「中特集」「オート」の順番に目次で表示されます。
  • 大特集:最優先で目次に表示されます。
  • 中特集:大特集の次に表示されます。
  • オート:システムが自動的に判定します。
目次に表示:
記事を目次に表示するか設定します。
ストリームに表示:
記事をタブレット端末のストリームに表示するかを設定します。
目次タイトル:
目次に「見出し」とは別のタイトルを表示する場合にはこの欄にて設定します。
記事を目次に表示しない場合は設定不要です。
目次画像URL:
目次に記事の見出しやタイトルではなくサムネイル画像を表示したい場合には、この欄にて画像のURLを指定します。
目次リンク先URL:
目次でこの記事部分をクリックした際に任意のWebページやタブを開くようにしたい(つまり、タブなどへのリンクとして使用したい)場合、リンク先のURLを指定します。
本文:
記事の本文を入力します。
通常のテキストのほかに、HTMLタグが使用できます(HTML5に対応しています)。
編集ステータス:
「記事を保存する」ボタンをクリックした際に、「下書き」として保存するか、「完成」として保存するかを選択します。
「完成」として保存された記事のみが公開され、「下書き」の記事は非公開になります。

画像を記事に挿入する

記事の本文に画像を挿入したい場合には、「本文」欄にHTMLのimgタグを用いて次のように指定します。

画像を記事に挿入する方法
  1. 記事編集画面を表示します。
  2. 「本文」欄にて、挿入したい画像のURLをimgタグを用いて次のように指定します。
    挿入したい画像が「http://example.com/img/filename.jpg」にある場合:
    <img src="http://example.com/img/filename.jpg">

なお、現時点ではWeb上にある画像の挿入にのみ対応しています。PC内にある画像をMobileClipへアップロードし、本文へ挿入する機能の提供は6月中を予定しています。

動画を記事に挿入する

MobileClipの記事本文へ外部動画サイトの動画を挿入することができます。 動画を埋め込むためには、動画サイトの埋め込みコードを記事本文へ入力します(埋め込みコードの確認方法は各動画サイトにより異なります。動画ページ内の「共有」メニューなどをご確認ください。)。

動画を記事に挿入する方法
  1. 記事へ埋め込みたい動画の提供元サイトにて、動画の埋め込みコードを確認・クリップボードへコピーします。
  2. MobileClipにて動画を挿入したい記事の編集画面を表示します。
  3. 「本文」欄へクリップボードの動画埋め込みコードを貼り付けます。

動画を挿入する際には、スマートフォンやモバイル端末の画面に収まるよう、埋め込みコード内の縦横サイズ指定に留意してください。 アプリにおけるコンテンツ部分の横幅は、スマートフォンでは290px、タブレット端末では800pxとなっていますので、このサイズ内に収まるように指定することをお勧めします。

●動作確認済みの動画サイト
  • YouTube
  • Vimeo
  • Brightcove

なお、アプリ内の埋め込み動画には、動画サイト側の仕様も関係し、以下の制限があります。

  • AndroidでFlashを利用したプレイヤーでは、全画面モードを使うことができません。
  • YouTubeのobjectタグを利用した場合を除き、iOSでは横向きでの再生はできません。
  • AndroidではVimeo動画の全画面表示ボタンを消すことができません。
  • BrightcoveではiOSで動作が不安定なプレイヤーがあります。

コンテンツを確認する

ブックと記事をプレビューで確認する

記事を作成したら意図した通りに表示されるか、プレビュー機能で確認してみましょう。

ブックと記事をプレビュー表示する方法
  1. 管理画面「ホーム」にてプレビュー確認したいブックのタイトルをクリックします。
  2. 「インデックスページのプレビュー」をクリックします。

「インデックスページのプレビュー」をクリックした場合にはiPhoneでのプレビュー結果が表示されますが、「インデックスページのプレビュー」右側のドロップダウンメニューから「iPhone」「iPad」でのプレビューを確認することもできます。

記事のプレビューを表示する方法
  1. 管理画面「ホーム」にてプレビュー確認したい記事のブックを開きます。
  2. 該当する記事の「プレビュー」欄で「iPhone」もしくは「iPad」をクリックします。

ブックをプレビューした場合には、ブック内の全ての記事をWebブラウザで確認することができます。

ブック・記事のプレビューは、ブックの詳細画面および記事編集画面からも可能です。

Webブラウザからのプレビュー機能は簡易プレビューになりますので、以下の制約があります。

  • タブが表示されません。
  • ナビゲーションバーに設定したロゴ画像が反映されません。
  • ナビゲーションバーに設定した色設定が反映されません。

MobileClip Viewerを使って実機で確認する

MobileClip Viewerのインストール方法(下記のストアアイコンをクリックしてください。)

設定した内容すべてのプレビューを確認したい場合は、「MobileClip Viewer」をダウンロードしてください。

  • iOS版MobileClipViewer
  • Android版MobileClipViewer

アプリの設定をおこなう

アプリの設定は管理画面の「アプリ作成」タブからおこないます。
「アプリ作成」タブは「基本情報」「アプリビルド」などで構成されており、アプリの名前やアイコンなどの基本情報の設定から、iTunes Connect申請用ファイルの設定といった詳細な設定まで、この「アプリ作成」タブにておこないます。

アプリのアイコンなどを設定する

アプリアイコンやアプリ起動時に表示する画像などの設定は「アプリ作成」内の「アイコン等」からおこないます。

アプリアイコンを設定する方法
  1. 管理画面「アプリ作成」の「アイコン等」を表示します。
  2. 「アプリアイコン」の「ファイルを選択」ボタンからアイコンとして使用したい画像ファイルを指定します(ファイルサイズはPNG画像で512 x 512px)。
  3. 「アップロード」ボタンをクリックし、画像が表示されることを確認します。

縦横512pxより大きな画像を指定した場合には自動的に縮小されます。
また、角丸処理は自動的におこなわれますので、アップロードする画像での処理は不要です。

ナビゲーションバー上のロゴを指定する方法
  1. 「ナビゲーションバー上のロゴ」にて「ファイル選択」ボタンからロゴとして使用したい画像ファイルを指定します(ファイルサイズはPNG画像で440 x 88px)。
  2. 「アップロード」ボタンをクリックし、画像が表示されることを確認します。
  3. ナビゲーションバーに登録したロゴをiPad用にも設定する場合は、「iPad用のロゴ」で「iPhoneと同じものを使用」にチェックを入れて「変更」ボタンをクリックします。

余白をとり見栄え良く表示するために、画像の高さは50px付近にすることを推奨します。

アプリの起動画面を設定する方法
  1. 「起動画面 iPhone縦」「起動画面 iPad横」にて、「ファイル選択」ボタンからiPhone用・iPad用の起動画面として使用したい画像ファイルを指定します。
  2. 「アップロード」ボタンをクリックし、画像が表示されることを確認します。

起動画面として使用したい画像は、PNG画像でiPhone用には640 x 960pxのものを、iPad用には 2048 x 1536pxのものを指定してください。

アプリの設定をおこなうためには「App ID」などを事前にiOS Developerサイトにて確認しておく必要があります。

アプリ公開に必ず必要な情報

  • App ID(iOS Provisioning Portalにて確認してください)。
  • 配布用プロビジョニングプロファイル(iOS Provisioning Portalにて確認してください)。
  • 配布用証明書ファイル(MobileClipのアプリ作成者がアプリ管理者の場合はキーチェーンアクセスから、配布用証明書ファイルを作成して下さい。それ以外の方はアプリ管理者から配布用証明書ファイルを取得して下さい)。

利用する機能によって必要な情報

  • Facebook App ID(Share機能を使用する場合に必要です)。
  • Push通知用証明ファイル(Push通知機能・アプリのNewsstand対応機能を使用する場合に必要です)。

アプリ作成に必要となる情報を用意したら、以下の方法にてアプリの設定をおこないます。

アプリの設定方法(iPhone/iPad向け)

  1. 管理画面「アプリ作成」の「基本情報」にて担当者名・連絡先メールアドレスなどを入力します。
  2. 「アイコン等」にてiPhone/iPad用アプリのアイコン・起動画面を指定します。
  3. 「アプリビルド」にてアプリの名前や「App ID」、「Newsstand」への対応、iTunes Connect申請用ファイル、iTunes Connectアプリ登録用情報の設定などをおこないます。
    Android向けアプリを作成する場合には「アプリ作成」タブの「Android」よりkeystoreなどの設定をおこないます。
  4. 「保存」ボタンをクリックします。

アプリの設定方法(Android向け)

  1. 管理画面「アプリ作成」の「Android」を表示します。
  2. 「対象デバイス」「Keystore」などを以下の通り設定します。
    • 対象デバイス:スマートフォン・タブレットへの対応を指定します。
    • keystore:事務局に「Androidアプリ用のkeystore」という用件で連絡してください。
    • Alias:「mobileclip.keystore」と入力します。
    • パスワード:入力不要です。
    • アプリアイコン:PNG形式の512×512pxの画像を指定します。
  3. 「保存」ボタンをクリックします。

アプリビルド画面解説

アプリビルド
アプリ名:
アプリの名称を指定します。
Bundle Identifier(App ID):
App IDを指定します。
対象デバイス:
アプリの対象デバイスを指定します。
iPhone, iPadいずれか一方のみを対象にする場合は、希望するデバイスのみを有効に設定してください。
アイコンのつや:
アプリのアイコンにつや効果を有効にするか指定します。
Newsstand対応:
Newsstand対応をおこなうか、おこなう場合には、その種類(新聞・雑誌)、綴じ方向(左綴じ・右綴じ・下)、表紙画像を指定します。
なお、Newsstand対応をおこなう場合には、「Push通知用証明書ファイル」が必要となります。
Share機能:
ソーシャルメディアとの連携機能を有効にするか指定します。
詳細は「ソーシャルメディアと連携する」にて解説します。
広告バナー機能:
広告バナー機能を設定します。
Push通知機能:
Push通知機能を有効にするか指定します。
詳細は「PUSH通知を行う」にて解説します。
iTunes Connect 申請用アプリビルド情報
プロビジョニングプロファイル:
プロビジョニングプロファイルを指定します。
証明書ファイル:
証明書ファイルを指定します(必要な場合には解凍パスワードも入力します)。
Push通知用証明書ファイル:
Push通知用証明書ファイルを指定します。
Push通知機能・Newsstand対応機能を利用するためには必ず指定する必要があります。
iTunes Connect アプリ登録用情報
ストア用アプリ名:
プロビジョニングプロファイルを入力します。
アプリ説明文
ストア上でのアプリ説明文を入力します。
SKU
SKUはiTunes Conenectで設定したものを入力してください。
iTunes Connectアカウント:
iTunes Connectアカウントを入力します。
iTunes Connectパスワード:
iTunes Connectパスワードを入力します(アプリのアップロードも自動でおこなう場合にのみ入力してください)。

アプリのビルドは事務局で行なっていますので、アプリビルドを行う場合は、事務局にご連絡ください。
注意)アプリビルドには数日かかる場合もあります。あらかじめ余裕を持ってご連絡ください。


アプリを公開する

管理画面「アプリ作成」におけるアプリの各種設定が終わったら、以降のアプリ公開手続きはiTunes Connectでおこないます。
iTunes Connectでのアプリ公開手続きについては、iTunes Connectのマニュアルを参照してください。