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を採用するのが
いいと感じました。
今回はFlutterを使って通知を送る方法をまとめました。通知が送れると、
アプリを開かなくても状態が確認出来るので、スマホアプリ開発の技術
として重宝されています。
今回はシンプルに画面に通知ボタンを配置し、ボタンを押すと通知が来る
アプリを作りました。
表題の通り、FlutterのWebView機能を使ってみようと思います。
まず、FlutterとはDart言語で構成されるアプリケーションのUIキットの
ようなものです。豊富なデザインやアイコンなどがあり、簡単に、かつ
綺麗にアプリ開発をすることが出来ます。
そんなFlutterですが、1からボタンやテキストを作るだけでなく、
Webサイトをアプリ内で表示するWebViewも提供されています。
Flutterはアプリケーションを開発することが出来るので、
Web Viewの登場機会といえば、動画の埋め込みなど、
一部の用途でしか使われません。
しかし、こんな使い方もあります。
モバイルサイトやモバイル版Webアプリをネイティブアプリのように振る舞える。
こちらの使い方です。例えば、すでに運用しているモバイルサイトやモバイル版
Webアプリがあったとします。
しかし、Webアプリではスマホに通知を送ることはできません。
そこでFlutter WebViewの登場です。この機能でモバイルサイトやモバイル版
Webアプリを表示してあげて、通知機能だけ実装することで、わざわざ
ネイティブなアプリに作り替えなくても通知機能を実現することが出来ます。
また、いずれはネイティブアプリにしたいけど、コスト面の問題があり、
一旦最低限の機能を実現するためにFlutter WebViewを使う、という使い方です。
このようにBtoBのビジネスシーンでは、引き合いになりそうな技術のため
今回調査してみました。
自身の参画案件において、PythonでCSVを扱うことがかなり多いので、
操作方法の基礎をまとめて記載します。
今回のフォルダ構成は以下の通りです。
Book1.csvの内容は以下の通りです。
フォルダ「csvファイルをまとめて処理」内
まず、csvライブラリを用いずにCSVファイルを読み込むプログラムを記載します。
(さらに…)業務経験を積んでいくと、レビューを依頼する側(レビュイー)から、依頼される側(レビュアー)になります。レビュアーには、経験則から基づく技術力が必要になりますが、人によって技術力に差がでてしまいます。今回は、技術力の差に関係なく、レビュアーの心構えを学ぶことで、レビューによる品質を高めることに繋げたいと思います。
初めに、レビューとは、”成果物の曖昧な点や問題を洗い出すための討議や評論のことを指し、目的や手段・手法が明確になっていること”と言われています。レビュアーの経験則から、曖昧な所を探すのではなく、正しい手法を知ることが大切になります。また、レビューの誤解としては、”会議のようなもの”と認識してしまい、”曖昧な点や問題点の洗い出し”と逸れ、時間がかかったり、”テストの方が効率的”とレビューよりテストを優先してしまうことがあります。
そして、レビュアーで最重要なのは、敬意と礼儀になります。
レビューを受ける人への敬意を第一に意識できず、攻撃的なコメントでは、技術的な正しさや有用性よりも、人格を傷つけ、品質を低下させ、本来の目的を阻害してしまいます。敬意と礼儀を意識しながら指摘することが、目的を達成するための最短経路です。
GoogleのChromiumプロジェクトのレビュー指針、「尊敬に満ちたコードレビュー」を紹介します。
この指針は、”すべきこと”と”いけないこと”を決めています。
