ブラウザ表示のHTML5アプリが、最短10分

本のようにめくれるアプリを作る

Single Packer

PC用Webページに、アプリが組み込める

スマホアプリを組み込んだ、ページを作る

{ "url": "//singlepacker.com/p/i3m4/help/plg2/main_id7701174774.html?!rowid=main_id7701174774?embed=1&unvisible=header1,cover,header2,extra", "w": "630px", "h": "590px", "name": "frame1", "contents_id": "133852283914673436", "title": "スマホアプリを組み込んだ、ページを作る", "controller": "0" }
既存サイトにアプリを表示しよう

既存のWebページやブログの一部分にアプリを表示したり、ポップアップさせてみませんか?
本サイトにもHELP等、多数のアプリが組み込まれています。
組み込み方法はとっても簡単。出力されたコードをコピーして、HTMLファイルやブログの表示したい位置にペーストするだけです。組み込み方法にはいくつかのバリエーションがあります。

エンベット

Webページの一部分にアプリが表示され、ユーザーはその部分だけをスライドのようにめくっていくことができるようになります。

3種の別ウィンドウ表示

ボタン等のリンクをクリックして、別ウインドでアプリを表示する組み込み方法は3種類あります。
右のボタンを押して違いを確認してみてください。
「詳細はこちら」などと示せば、補足説明に最適です。

ポップオーバー
ポップアップ
プレゼン

PCサイズでは、3つのフレームを追加表示

{ "url": "//singlepacker.com/p/i3m4/help/plg2/main_id3448730727.html?!rowid=main_id3448730727?embed=1&unvisible=header1,cover,header2,extra", "w": "630px", "h": "590px", "name": "frame1", "contents_id": "133852283914673436", "title": "PCサイズでは、3つのフレームを追加表示", "controller": "0" }
フレームを選ぶ

PCのような幅の広いブラウザで閲覧したとき、ボディーの上部にヘッドエクストラ、右にライトエクストラ、左にレフトエクストラの3つのフレームを加える事が可能です。エクストラの表示によって、通常のPCページに近いレイアウトを実現することができます。

表示コンテンツを選ぶ

左右両サイドのエクストラに表示するコンテンツは、階層ごとに異なる内容を指定することができます。関連情報はもちろん、公式Tweetを読み込ませたり、SNSへのFollowを呼びかけるなど、使用方法はアイデア次第です。

PC用の表示設定ができる

カバーサイズを変える

シングルパッカーはレスポンシブデザインで利用できますが、、縦に長い画面が特徴のスマートフォンに合わせた画像を、PCなどの横に広いブラウザで閲覧すると、大きく表示されすぎてしまいます。幅が広いPCブラウザで閲覧された時の画像比率を設定できるようになっています。

めくり表示や文字サイズを変える

ページめくりの表示方法をスマートフォンでの閲覧時と同一にするか、ページの上下に表示させるかを選択できます。
文字サイズも異なるサイズに調整することができます。

画像サイズを変える

カバー画像同様、コンテンツ内で表示する画像についても、デバイスに応じたサイズの設定を指定できます。
適切なサイズで表示されるように、細かい設定が可能です。