CSS Grid Layoutを触ってみる!
2024 年 11 月 18 日 by marukorはじめに
Grid Layout(グリッドレイアウト)とは、html/cssで二次元レイアウトを可能にする機能です。
flexboxは直線的にしかレイアウトを配置できないので、 Grid Layout を使うことでレイアウトの幅が広がります。
Grid Layout でレイアウト
Grid Layout は以下のようなマス目に区切り、区切った要素の好きなところに要素を配置していきます。
上の図を参考にしながら以下のようなレイアウトを作ってみます。
(さらに…)【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 sumitanikChart.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 sugakirFlutterとは?
通常、モバイルアプリを開発するには、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のビジネスシーンでは、引き合いになりそうな技術のため
今回調査してみました。
【Python】PythonでのCSV操作
2024 年 8 月 30 日 by yamamotorはじめに
自身の参画案件において、PythonでCSVを扱うことがかなり多いので、
操作方法の基礎をまとめて記載します。
内容
今回のフォルダ構成は以下の通りです。
Book1.csvの内容は以下の通りです。
フォルダ「csvファイルをまとめて処理」内
CSVの読み込み
まず、csvライブラリを用いずにCSVファイルを読み込むプログラムを記載します。
(さらに…)