モバイルファーストの時代が始まり、PC用webも変化を迫られています。スマホに慣れたユーザーにとって、ページを読み込むたびにハイパーリンクでリフレッシュされるこれまでのwebページは、やはり物足りなさを感じさせます。もっとスマートな表示が望まれています。
シングルパッカーのHTML5アプリは、全ページのテキストデータやプログラムを一度に読み込み、全ページがスラスラめくれます。 アプリ内にはハイパーリンクが無く、PC用のwebページに今までにないユーザビリティを実現します。 また、PCでもスマホでも使えるよう、レスポンシブデザインが採用されています。
シングルパッカーのHTML5アプリを部分的に利用するだけでも効果的です。ライブラリやカタログ、用語集など、更新が多いコンテンツなどで大きな力を発揮します。
全ページ読み込みの利用イメージはこちらをご覧ください。
シングルパッカーのHTML5アプリは、PC用アプリとしてそのまま利用できる他、既存のPC用Webページに組み込むことができます。
組み込みにはいくつかのバリエーションがあります。既存ページのエリアを指定して組み込めるほか、ポップオーバーと、別ウィンドウで開くポップアップが選べます。
本サイトの「できること一覧」「シングルパッカー制作ガイド」「HELP」「用語ガイド」「エレメント・チャンクガイド」等々はシングルパッカーで作られたアプリです。「HELP」は同じアプリが、組み込み用とポップアップの両方で使われています。
PC用ページへのアプリの組み込みは、ホームページ以外でも可能です。ブログ等への組み込みも一部(*)ですが可能です。
またブログ閲覧者は、組み込まれたアプリのURLを自分のスマホに送ることができる他、アプリが「組込コード公開」になっていると、アプリの操作パネルから、閲覧者は組み込むコードを取得できます。
これにより、作成したアプリを自分のブログ→閲覧者のブログ→別の人のブログ、という具合に、様々なサイトに拡散させてゆくことができます。
HTMLのiflameタグが使用できるブログでは、組み込みが可能です。組み込み可能なことを確認したブログやサイトは、現在のところ以下のとおりです。 FC2ブログ、livedoor Blog、Blogger、忍者ブログ、Seesaaブログ、ココログ、wordpress
シングルパッカーのHTML5アプリをPCで表示する場合、ページ内の表示要素を追加することができます。
ボディーの上部にヘッドエクストラ、右にライトエクストラ、左にレフトエクストラの3つのフレームを加える事が可能です。これらのエクストラによって、通常のPCページに近いレイアウトを実現することができます。
エクストラは、ブラウザの表示横幅を大きくすると表示されます。小さくするとエクストラは消えてスマホ用レイアウトになります。
シングルパッカーはPCやタブレット、スマートフォンの各デバイスに応じて最適なレイアウトになるレスポンシブデザインになっています。
編集については制作ガイド「PC設定」をご覧ください。
前述のように、シングルパッカーはPC表示とスマホ表示で、レイアウト等をダイナミックに変更するレスポンシブデザインを採用していますが、複数の表示要素で、ユーザーがPC用、スマホ用の設定ができるようになっています。
例えばカバーでは、画像のサイズをPC用、スマホ用で個別に設定できます。画像、動画でも、個別のサイズ指定が可能です。
編集については制作ガイド「カバー」をご覧ください。
アプリ例: スマホ用レスポンシブデザイン
シングルパッカーで作成した各種のアプリを統合したポータルサイトを、PCでも作ることが可能です。
スマホと同様、ポータルにするアプリからリンクした、同じアカウント内の他のアプリには、ポータルヘッダが表示され、ポータルに戻るボタンが表示されます。これにより、複数のアプリを、まるで一つのアプリのように閲覧者に見せることが可能になります。