vol.7昨年12月から製作中の経理用「仕訳帳アプリ」について進捗状況をお届け。7回目となる今回は、Yellowのマルチデバイス対応について紹介します。整ってきました整ってきました前回のレポートは2月下旬。サーバーセットアップやら、動作検証という地味な作業について書きました。3月入ってからは、実際に使いながら調整し、知人からフィードバックをいただいては調整し、その繰り返しです。はい、相変わらず地味ですね。それと並行してマルチデバイス対応も行いました。今回はその辺りについて。マルチデバイス対応についてそもそも「マルチデバイス対応ってなに?」という感じだと思うので、これがどんな役に立つのか紹介します。「マルチデバイス対応」とは、どんな端末(スマホ、タブレット、パソコン)からアクセスされても便利に利用できる仕組みです。最近はスマホやタブレットが身近になったこともあって、パソコンを持たない人が増えてきました。実際、パソコンがなくても大体のことはスマホで出来ちゃったりするわけで、仕事で必要な場合を除けば、わざわざパソコンのような大画面の端末が不要なケースは多いです。いった時代の流れがあるため、スマホしか使わない人もいれば、タブレットの方が便利って人もいたり、「やっぱキーボードが無いと不便だわ」ということでパソコンがメインな方もいる。人によって用途が様々なので、使う端末(スマホ・タブレット・パソコンなどの総称)もバラバラということです。1人がその時の用途によって、スマホ/タブレット/パソコンを使い分けていることも多いでしょう。このように用途に合った端末を選べる便利な時代になり、使う端末にも多様性があります。同時に画面サイズもバラバラ。そこで、マルチデバイス対応が必要になってきます。今回マルチデバイス対応したYellowでは、大きな画面での表示を想定した「パソコン版」、それよりも少し小さい「タブレット版」、そしてスマホなどの小さい画面の「スマホ版」の3種類があります。これらの違いを1つずつ紹介します。パソコン版こちらはパソコン版の表示例。表示できる幅が広いため、サイドバーも表示しています。今までの開発日記でも、このパソコン版を紹介してきました。この画面をそのままタブレット、スマホで表示して利用することも可能ですが、横幅が広く1画面に収まらないため非常に使いづらい。文字も小さくなり、いちいち拡大/縮小をしながら使わなければなりません。いうことで、この問題を解消するために次の2タイプを用意しました。タブレット版こちらがタブレット版。サイドバーが非表示となり、ページ上部のメニューボタンもスッキリしました。右上のボタンをタッチすると、次のようにメニューが開きます。このような形でメニューが表示されます。(名前が「村上主義者」になっているのは気にしないでください)横幅を一杯に使うことで、表が見やすくなるように設定しています。タブレット版こちらはスマホ版。タブレット版の表示から、さらに横幅が狭くなっています。そのため、文字サイズを大きくしたり、タッチできる場所のサイズを広くするなど、細かい調整をしています。以上3種類の表示タイプを用意することで、使いたい時に、どんなデバイスからアクセスしても不自由なく利用できるようになっています。今後はドキュメント整備Yellowの今後ですが、今は知人に使ってもらっているところから、広く一般的に使えるように展開していきます。そのために必要なのが、玄関となるサイトを用意することと、使い方のページ(取扱説明書みたいなもの)。引き続き、これらのページを用意していきます。今月中には一般公開できるよう進めていきます。vol.8こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND遅いインターネット評論家の宇野常寛の新著。2018年頃から提唱されている「インターネットによって失った未来をインターネットによって取り戻す」をテーマにした本書が、いよいよ2月20日から書店に並びます。宇野さんがずっと温めてきた構想が詰まった1冊なので、個人的に非常に楽しみにしている一冊です。