この取り組みは、最近当社でグループウェアの見直しを行なっており、
運用が変わる点もあるため、使いやすいスマホアプリがあればいいな。と
個人的にノウハウを形成していっているところです。
そこで今回は、ポータルアプリに欠かせない、スケジュール機能を実装
すべく、学習した内容をご紹介したいと思います。
使用技術はFlutterです。
①月選択機能(MonthPicker)
②カレンダーの月/週単位表示機能
③イベント日がある日を分かりやすく見せる機能
この取り組みは、最近当社でグループウェアの見直しを行なっており、
運用が変わる点もあるため、使いやすいスマホアプリがあればいいな。と
個人的にノウハウを形成していっているところです。
そこで今回は、FlutterのPDF Viewerを用いて、簡単な電子書籍の
モックを実装しましたので、その過程を共有したいと思います。
ポータルアプリにPDF？と思った方もいらっしゃるかもしれません。
実はよく使う機能なのです。例えば、企業の経営計画書や朝礼で唱和する
ような社訓を表示したり、掲示板機能でPDFをアップロードしたり、
使い方は様々で、それなりに需要があることが分かります。
PDFを表示するのは、簡単なようで実は少しコツが要ります。
今回は単純なPDFを表示するプログラムを少しずつ噛み砕いて
ご紹介しようと思います。
この取り組みは、最近当社でグループウェアの見直しを行なっており、
運用が変わる点もあるため、使いやすいスマホアプリがあればいいな。と
個人的にノウハウを形成していっているところです。
いくつかの記事に分けて、その技術や考え方のようなものを公開したいと思います。
その１ ミスタップを防ぐべし
スマホアプリと一言で言っても、様々な端末があります。画面の大小を考慮して
デザインするのはとても難しいことです。
いくつか例をご紹介します。
Grid Layout（グリッドレイアウト）とは、html/cssで二次元レイアウトを可能にする機能です。
flexboxは直線的にしかレイアウトを配置できないので、 Grid Layout を使うことでレイアウトの幅が広がります。
Grid Layout は以下のようなマス目に区切り、区切った要素の好きなところに要素を配置していきます。
上の図を参考にしながら以下のようなレイアウトを作ってみます。
クエリビルダは、データベースからレコードを取得する際にSQL文を組み立て、簡単に問い合わせを行うことができる機能です。
内部結合や外部結合などを含む基本的なSELECT文は、以下のサイトを参照してください。
https://readouble.com/laravel/8.x/ja/queries.html
ここでは、以下のSELECT文を取得する方法について紹介します。
1. IN句に予め取得したCollectionを設定する方法
2. FROM句にSELECT文を設定する方法
SQLのIN句では、特定の列が指定した複数の値のいずれかと一致するかどうかを確認するために使用します。
以下にSQLの例文を示します。
前回の記事では、Chart.jsの基本的な部分（基本要素、構造、実装例）を紹介しました。
ここでは、前回実装したグラフをカスタマイズして、さらに細かな設定を行う方法について紹介します。
※以下の実装例では、変更点のみを記載しています。
軸を入れ替えるためには、以下の2つの処理を行います。
①optionsにindexAxisを追加します。
options: {
indexAxis: 'y'
}
②scalesのxとy内の設定を全て入れ替えます。
Chart.js とは、データを視覚化するためのオープンソースのJavaScriptライブラリです。
以下のような特徴があります。
1. 折れ線グラフ、棒グラフ、円グラフなどの様々なスタイルをサポート。
2. 使いやすいインターフェースで、数行のコードでチャートを作成することが可能。
3. 色やフォント、サイズなどをカスタマイズでき、独自のデザインに合わせることが可能。
4. アニメーション効果を追加したり、ユーザーの操作に応じて動的にデータを表示することが可能。
Chart.jsの基本的な設定方法については、以下の公式サイトを参照してください。
https://www.chartjs.org/docs/latest/
ここでは、Chart.jsの基本要素、構造と簡単な実装例を紹介します。
※今回の実装例は、Chart.jsバージョン4.4.3に基づいています。
今回はFlutterのwidget管理において、個人的にこれが答えだ！
と思うものを見つけたので、この技術について学習した内容を、
ハンズオン形式でお伝えします。
もったいぶってすみません、その技術とは、「Widgetbook」のことです。
Widgetbook → Widgetbook (docs.page)
こちらのWidgetbookを使うことで、アプリ内で使用されているそれぞれの
widgetをカタログ形式で参照することができるライブラリです。
・実装したwidgetを視覚的に確認できる。
基本的にコードベースで作成したものは、実行してみるまでその実態を
確認できません。しかし、Widgetbookは、ツールを立ち上げるだけで
全てのwidgetを表示することが出来ます。
このメリットを活かして、お客様にデザインの確認を依頼することが
出来たり、メンバ間でwidgetの共有が容易になったりします。
・widgetを階層化して整理することができる。
Widgetbookのカタログでは、閲覧するためのメニューがありますが、
このメニュー内のwidgetをフォルダにまとめたり、整理することが
出来るので、カラーごとに分けたり、種類ごとに分けたりと、集計や
管理が容易になります。
・デバイス設定を反映させた見た目を確認できる。
基本的にはブラウザでそのカタログを開くこととなるWidgetbookで
あるが、カタログのBuilderでAddonのオプションを設定することで
簡単にライトモード/ダークモードの見た目を確認できます。
通常、モバイルアプリを開発するには、swiftでiOSを、javaやkotlinで
Androidを開発しますが、クロスプラットフォームで開発できるものも
存在します。
その一例がFlutterです。同じコードでiOS,Android,Windows,MacOSなど、
様々なプラットフォームで動かすことができます。
他にもReactNativeなど、クロスプラットフォーム開発が可能な技術も
ありますが、Flutterを触ってみて、採用するメリットをまとめました。
Flutterは、ご存知の方もいらっしゃるかもしれませんが、「Flutter大学」
という巨大なコミュニティが存在します。Flutter技術者がLTを実施したり
情報共有をする場として重宝されています。
また、その他でもGit Hubでプルリクエストが活発であったり、
全体的に言語のコミュニティが盛り上がっているので、開発の最中に
参考にできる材料が豊富で、開発しやすいです。
ReactNativeやKMMもクロスプラットフォーム開発の検討にあがりますが、
教育コストの面や、コミュニティの大きさ等で、Flutterを採用するのが
いいと感じました。
