2024 年 9 月 のアーカイブ

【Laravel】クエリビルダによるSQL実行

2024 年 9 月 30 日 月曜日 by sumitanik

クエリビルダとは

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

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

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

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

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

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

(さらに…)

【JavaScript】Chart.jsを活用してグラフを描画する(応用)

2024 年 9 月 29 日 日曜日 by sumitanik

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

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

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

①optionsにindexAxisを追加します。

options: {
    indexAxis: 'y'
}

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

(さらに…)

【JavaScript】Chart.jsを活用してグラフを描画する(基礎)

2024 年 9 月 29 日 日曜日 by sumitanik

Chart.jsとは

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

以下のような特徴があります。
1. 折れ線グラフ、棒グラフ、円グラフなどの様々なスタイルをサポート。
2. 使いやすいインターフェースで、数行のコードでチャートを作成することが可能。
3. 色やフォント、サイズなどをカスタマイズでき、独自のデザインに合わせることが可能。
4. アニメーション効果を追加したり、ユーザーの操作に応じて動的にデータを表示することが可能。

Chart.jsの基本的な設定方法については、以下の公式サイトを参照してください。
https://www.chartjs.org/docs/latest/

ここでは、Chart.jsの基本要素、構造と簡単な実装例を紹介します。
※今回の実装例は、Chart.jsバージョン4.4.3に基づいています。

(さらに…)

[Flutter]widget管理の答え、見つけました。

2024 年 9 月 24 日 火曜日 by sugakir

はじめに

今回はFlutterのwidget管理において、個人的にこれが答えだ!
と思うものを見つけたので、この技術について学習した内容を、
ハンズオン形式でお伝えします。

WidgetBook

もったいぶってすみません、その技術とは、「Widgetbook」のことです。
Widgetbook → Widgetbook (docs.page)
こちらのWidgetbookを使うことで、アプリ内で使用されているそれぞれの
widgetをカタログ形式で参照することができるライブラリです。

Widgetbookでできること

・実装したwidgetを視覚的に確認できる。
 基本的にコードベースで作成したものは、実行してみるまでその実態を
 確認できません。しかし、Widgetbookは、ツールを立ち上げるだけで
 全てのwidgetを表示することが出来ます。
 このメリットを活かして、お客様にデザインの確認を依頼することが
 出来たり、メンバ間でwidgetの共有が容易になったりします。

widgetを階層化して整理することができる。
 Widgetbookのカタログでは、閲覧するためのメニューがありますが、
 このメニュー内のwidgetをフォルダにまとめたり、整理することが
 出来るので、カラーごとに分けたり、種類ごとに分けたりと、集計や
 管理が容易になります。

・デバイス設定を反映させた見た目を確認できる。
 基本的にはブラウザでそのカタログを開くこととなるWidgetbookで
 あるが、カタログのBuilderでAddonのオプションを設定することで
 簡単にライトモード/ダークモードの見た目を確認できます。

(さらに…)

Flutterを採用するメリットについて

2024 年 9 月 18 日 水曜日 by sugakir

Flutterとは?

通常、モバイルアプリを開発するには、swiftでiOSを、javaやkotlinで
Androidを開発しますが、クロスプラットフォームで開発できるものも
存在します。
その一例がFlutterです。同じコードでiOS,Android,Windows,MacOSなど、
様々なプラットフォームで動かすことができます。
他にもReactNativeなど、クロスプラットフォーム開発が可能な技術も
ありますが、Flutterを触ってみて、採用するメリットをまとめました。

コミュニティについて

Flutterは、ご存知の方もいらっしゃるかもしれませんが、「Flutter大学」
という巨大なコミュニティが存在します。Flutter技術者がLTを実施したり
情報共有をする場として重宝されています。
また、その他でもGit Hubでプルリクエストが活発であったり、
全体的に言語のコミュニティが盛り上がっているので、開発の最中に
参考にできる材料が豊富で、開発しやすいです。
ReactNativeやKMMもクロスプラットフォーム開発の検討にあがりますが、
教育コストの面や、コミュニティの大きさ等で、Flutterを採用するのが
いいと感じました。

(さらに…)

Flutterで任意のタイミングで通知を送る

2024 年 9 月 18 日 水曜日 by sugakir

はじめに

今回はFlutterを使って通知を送る方法をまとめました。通知が送れると、
アプリを開かなくても状態が確認出来るので、スマホアプリ開発の技術
として重宝されています。

導入

今回はシンプルに画面に通知ボタンを配置し、ボタンを押すと通知が来る
アプリを作りました。

(さらに…)

Flutter Web Viewを使ってみる。

2024 年 9 月 11 日 水曜日 by sugakir

はじめに

表題の通り、FlutterのWebView機能を使ってみようと思います。
まず、FlutterとはDart言語で構成されるアプリケーションのUIキットの
ようなものです。豊富なデザインやアイコンなどがあり、簡単に、かつ
綺麗にアプリ開発をすることが出来ます。
そんなFlutterですが、1からボタンやテキストを作るだけでなく、
Webサイトをアプリ内で表示するWebViewも提供されています。

なぜわざわざFlutterでWebViewを使うの?

Flutterはアプリケーションを開発することが出来るので、
Web Viewの登場機会といえば、動画の埋め込みなど、
一部の用途でしか使われません。

しかし、こんな使い方もあります。
モバイルサイトやモバイル版Webアプリをネイティブアプリのように振る舞える。
こちらの使い方です。例えば、すでに運用しているモバイルサイトやモバイル版
Webアプリがあったとします。
しかし、Webアプリではスマホに通知を送ることはできません。
そこでFlutter WebViewの登場です。この機能でモバイルサイトやモバイル版
Webアプリを表示してあげて、通知機能だけ実装することで、わざわざ
ネイティブなアプリに作り替えなくても通知機能を実現することが出来ます。
また、いずれはネイティブアプリにしたいけど、コスト面の問題があり、
一旦最低限の機能を実現するためにFlutter WebViewを使う、という使い方です。
このようにBtoBのビジネスシーンでは、引き合いになりそうな技術のため
今回調査してみました。

(さらに…)