FreeStyleVision

1.はじめに

Pythonの知識が増えてきましたが、Pythonは画面作成も出来ると聞いて興味を持ちました。

そこで、今回はPythonでの画面作成から、データ処理までの繋がりを理解するために、本記事にまとめていきます。

2.GUIの種類

PythonでGUIを作成する方法は3種類あります。

はじめに

この取り組みは、最近当社でグループウェアの見直しを行なっており、
運用が変わる点もあるため、使いやすいスマホアプリがあればいいな。と
個人的にノウハウを形成していっているところです。
使用技術はFlutterです。
今回は、SSO認証として、MicrosoftのSSO機能(MSAL)を実装したいと思います！
(本記事では、iOSのみご紹介します。)

事前準備(ほぼ本題)

FlutterアプリでMicrosoftのSSOを行うには、Azureにアプリを登録する
必要があります。この後のコーディングはそれほど難しくないですが、
ここがかなり厄介です。

はじめに

この取り組みは、最近当社でグループウェアの見直しを行なっており、
運用が変わる点もあるため、使いやすいスマホアプリがあればいいな。と
個人的にノウハウを形成していっているところです。
そこで今回は、ポータルアプリに欠かせない、スケジュール機能を実装
すべく、学習した内容をご紹介したいと思います。
使用技術はFlutterです。

今回実現する機能の構想

①月選択機能(MonthPicker)
②カレンダーの月/週単位表示機能
③イベント日がある日を分かりやすく見せる機能

はじめに

この取り組みは、最近当社でグループウェアの見直しを行なっており、
運用が変わる点もあるため、使いやすいスマホアプリがあればいいな。と
個人的にノウハウを形成していっているところです。
そこで今回は、FlutterのPDF Viewerを用いて、簡単な電子書籍の
モックを実装しましたので、その過程を共有したいと思います。

需要

ポータルアプリにPDF？と思った方もいらっしゃるかもしれません。
実はよく使う機能なのです。例えば、企業の経営計画書や朝礼で唱和する
ような社訓を表示したり、掲示板機能でPDFをアップロードしたり、
使い方は様々で、それなりに需要があることが分かります。

PDF Viewerの実装

PDFを表示するのは、簡単なようで実は少しコツが要ります。
今回は単純なPDFを表示するプログラムを少しずつ噛み砕いて
ご紹介しようと思います。

はじめに

この取り組みは、最近当社でグループウェアの見直しを行なっており、
運用が変わる点もあるため、使いやすいスマホアプリがあればいいな。と
個人的にノウハウを形成していっているところです。
いくつかの記事に分けて、その技術や考え方のようなものを公開したいと思います。

スマホアプリ(ポータルアプリ)のデザインパターン

その１　ミスタップを防ぐべし

スマホアプリと一言で言っても、様々な端末があります。画面の大小を考慮して
デザインするのはとても難しいことです。
いくつか例をご紹介します。

シナリオ

ユーザーからの注文情報を取得すること想定

構成

SQLはMySQL使用しています。

テーブルは、usersテーブル、ordersテーブルの二つです。
テーブルの構成は以下です。

はじめに

Grid Layout（グリッドレイアウト）とは、html/cssで二次元レイアウトを可能にする機能です。
flexboxは直線的にしかレイアウトを配置できないので、 Grid Layout を使うことでレイアウトの幅が広がります。

Grid Layout でレイアウト

Grid Layout は以下のようなマス目に区切り、区切った要素の好きなところに要素を配置していきます。

上の図を参考にしながら以下のようなレイアウトを作ってみます。

クエリビルダとは

クエリビルダは、データベースからレコードを取得する際にSQL文を組み立て、簡単に問い合わせを行うことができる機能です。

内部結合や外部結合などを含む基本的なSELECT文は、以下のサイトを参照してください。

https://readouble.com/laravel/8.x/ja/queries.html

ここでは、以下のSELECT文を取得する方法について紹介します。
1. IN句に予め取得したCollectionを設定する方法
2. FROM句にSELECT文を設定する方法

IN句に予め取得したCollectionを設定する

SQLのIN句では、特定の列が指定した複数の値のいずれかと一致するかどうかを確認するために使用します。
以下にSQLの例文を示します。

前回の記事では、Chart.jsの基本的な部分（基本要素、構造、実装例）を紹介しました。
ここでは、前回実装したグラフをカスタマイズして、さらに細かな設定を行う方法について紹介します。
※以下の実装例では、変更点のみを記載しています。

棒グラフの縦軸と横軸を入れ替える

軸を入れ替えるためには、以下の2つの処理を行います。

①optionsにindexAxisを追加します。

options: {
    indexAxis: 'y'
}

②scalesのxとy内の設定を全て入れ替えます。

Chart.jsとは

Chart.js とは、データを視覚化するためのオープンソースのJavaScriptライブラリです。