株式会社イロコト株式会社イロコト

Blogイロコトのブログ

  1. Home
  2. Blog
  3. Project:;COLD case.633での複雑なコンテンツ表示をJSON対応したらメリットが多かった件

Project:;COLD case.633での複雑なコンテンツ表示をJSON対応したらメリットが多かった件

2022.07.26
  • コーディング

こんにちは、Webデザイナーのミナツキです。

 

今回はコンテンツの情報をJSONファイルから取得・表示させることで感じたメリットを紹介したいと思います。

 

JSONとは?

JSONとは「JavaScript Object Notation」の略でファイル拡張子は「.json」です。

 

テキスト形式で編集でき、記法もシンプルで下記のように「キー」と「値」の1セットが基本型となります。
※いくつか記法ルールはありますが長くなってしまうので割愛します。

{
  "キー": "値",
  "キー": "値",
  "キー": "値"
}

JSONファイルの利用シーンについて

弊社でサイト制作などを担当させていただいたProject:;COLD の「case.633」という架空の事件の中で登場する「SP HACKING」というコンテンツ内でJSONファイルを使用しました。

 

Project:;COLD case.633についてはこちら

 

JSONファイルを使用するメリットの前に、まずは「SP HACKING」について簡単に紹介したいと思います。

 

SP HACKINGの紹介

SP HACKINGトップページ

 

SP HACKINGとは

Project:;COLD case.633の登場人物のスマホを覗き見る(ハッキングする)ことができる架空の未来の技術で、このSP HACKINGを利用して最終的に事件を解決へ導いていくというものでした。

 

上記リンクのページから各登場人物の入力フォームへをパスワードを入力すると、それぞれのスマホ画面にアクセスできます。

 

この後の内容にも関わってきますので、一度SP HACKINGを体験してみてください。

 

各登場人物のパスワード

  • YUURI SAKAGUCHI(坂口悠里)
    prime24foods
  • KOUTA MIZUSAWA(水沢康太)
    caincomplex
  • MAO NISHIMINE(西峰真央)
    snowwhite
  • TSUBASA TOYOHASHI(豊橋翼)
    MatinAvenir
  • MARIE SUGAWARA(菅原麻理恵)
    TheLastLeaf

 

SP HACKINGについて紹介したところで、続いてJSON対応によって得られたメリットを紹介していきたいと思います。

 

JSON対応によって得られたメリット

SP HACKINGで各登場人物のスマホ画面を実際に触ってみると気づくかと思いますが、起動できるアプリは下記に限られており、それ以外のアプリを起動しようとした場合には不思議な力で弾かれるという演出となっています。

 

  • ギャラリー風アプリ
  • カレンダー風アプリ
  • 日記風アプリ
  • メッセージ風アプリ

 

JSONファイルの使用箇所ですが、日記風アプリであれば日記一覧・詳細、メッセージ風アプリであればフレンドリストやフレンドとのメッセージやり取りなど、各アプリ内コンテンツの情報をJSONファイルから取得して表示させています。

 

そして、アプリ内コンテンツをJSON対応することで感じたメリットは主に以下の3つでした。

 

  • HTMLの記述がシンプルに
  • HTMLの編集が不要に
  • お客様でも更新が行える

 

HTMLの記述がシンプルに

各アプリ内コンテンツはアプリ起動時にJSで動的に追加を行なっているので、アプリ表示のベースとなる部分はシンプルな記述となっています。

 

アプリを何も起動していない時

<div id="app-wrapper">
</div>


何らかのアプリ起動後

<div id="app-wrapper">
  <!-- ↓↓↓ この部分は動的に追加されていく ↓↓↓ -->
  <div class="app-container" id="app-diary">
    <!-- アプリ内コンテンツ -->
  </div>
  <div class="app-container" id="app-message">
    <!-- アプリ内コンテンツ -->
  </div>
  <!-- ↑↑↑ この部分は動的に追加されていく ↑↑↑ -->
</div>

アプリ起動時に該当アプリのJSONファイルを読み込んで情報を取得し、ループ処理によって内容を表示させています。

 

共通して大体こんな感じです

$.getJSON(jsonUrl)
  .done(function(data) {
    // 一覧を一旦リセット
    $('#app-diary .app-home .diary-list ul').remove();

    // 一覧作成
    let html = '';
    html = '<ul>';
    for( let i = 0; i < data.length; i++ ) {
      html += '<li>';
      html += '<a href="#" data-post-id="' + data[i].postId + '">';

      ...

      html += '</a>';
      html += '</li>';
    }
    html += '</ul>';

    // 動的に作成したHTMLを出力
    $('#app-diary .app-home .diary-list').append(html);
  })
  .fail(function() {
    // Do something ...
  })
  .always(function() {
    // アプリ表示
    $('.app-container#app-dialy').addClass('active');
  });

特にメッセージ風アプリは情報量が多かったので、すべてをHTMLで記述していたら時間がいくらあっても足りなかったことでしょう。

 

HTMLの編集が不要に

弊社の過去のブログ「イロコトのWebサイト制作コーディング環境について(Pug・Sass・Gulp・Git)」で紹介していますが、コーディングの際にはPug&Sassを使用しているのでコンパイルが必要となってきます。

 

アプリ内コンテンツに追加・修正が発生する度にPug編集→HTMLへのコンパイルを行っていたら非効率ですが、JSON対応にしたことで内容の追加・修正が発生してもJSONファイルを編集するだけとなります。

 

お客様でも更新が行える

テキスト形式で編集できるのでPC環境に依存することもほぼ無く、お客様側での編集も可能となります。

 

記法のレクチャーやお客様用検証環境の用意などの事前準備を行なっておく必要がありますが、例えば土日や深夜早朝などに突発的な修正が発生した場合でも、お客様側で即座に対応いただけます。

 

加えてHTMLの編集が不要ということもあり、表示崩れなどのリスク回避にもなります。

 

まとめ

以上、SP HACKINGの紹介も交えてJSON対応でのメリットを3つ上げました。

 

アプリ起動時の挙動やアプリ表示のベースとなる部分は十分に練ってからの実装が必要だったのでそこは唯一大変な点でしたが、今回の対応を行なったことでかなりの工数削減ができたかと思います。

 

また、アプリ起動時のアニメーション、アプリ内コンテンツでのページ切り替えや表示のスピード感など細かく調整を行い、実際のスマホの操作感に近いものをめざしました。

 

メッセージ風アプリについては、擬似的にメッセージを送信できるという遊び要素も入っています。(通信などは行なっていないので、ページ再読み込みを行うと消えます)

 

あとがき

Webサイトでスマホ画面を表示させる(しかも操作できる)ということは初めてだったので、普段のサイト制作では得られない経験となりました。

 

スマホ実機でSP HACKINGにアクセスした際には、スマホ画面の中にスマホ画面という不思議な感覚を味わえるかと思います。

 

長くなりましたが、ここまでお読みいただきありがとうございました。

Contact

案件のご相談や、弊社についてのご質問など、
お気軽にご連絡くださいませ。

お問い合わせ