画像生成AI「Stable Diffusion」を使ってみる

「Stable Diffusion」って?

「Stable Diffusion(ステーブルディフュージョン)」とは、ユーザーから入力されたテキストをもとに画像を生成する「訓練済のAIモデル(Diffusion Model)」を搭載した画像生成AIです。ユーザーの生成したい画像イメージを、英単語で区切って入力することで、様々な画像を生成することができます。
(例:「夜の東京タワー」の場合→「Tokyo Tower at night」など)

どうやって利用するの?

Stable Diffusionの利用方法は、

①Webアプリケーション上の環境で生成する
②自身で作成した環境にStable Diffusionをインストール、またはプログラムコードを書き込んで生成

の二通りの方法があります。今回は、手軽に利用できる①の方法でStable Diffusionを利用してみます。

利用までの流れ

まずはStable Diffusionのページ(https://stablediffusionweb.com)にアクセスします。
URLにアクセスすると上記のページが表示されるので、下にスクロールしていくと「Stable Diffusion Playground」と書かれた見出しの下にテキストボックスがあります。そこにAIに画像生成を行ってもらうテキスト(呪文)を入力します。

※以下のようにうまく表示できない場合があるので、その際はページの再表示で解消することがあります。

早速画像を生成してみる

ページにアクセスして準備が整ったら、早速呪文を入力して画像を生成してもらいましょう。
最初は簡単なキーワードで生成してみます。「Tokyo Olympics(東京オリンピック)」と入力後、右の「Generate image」で画像を生成できます。
早ければ8~9秒、遅くても1分程度で画像が生成されるので、押下後、しばらく待ってみます。

生成されたら、4つの画像が表示されるので、生成結果を確認してみましょう。
オリンピックの象徴である五輪の画像をメインに生成したようです。

同じものが表示されないか、もう一度同じ呪文で生成をしてみます。
1回目の生成結果と比較すると、より五輪に近い画像が生成されました。このように、同じ呪文でも何回も生成してもらうことで、より自身のイメージに合った画像を見つけ出すことができます。(このように、呪文の試行錯誤や、画像の選定をする過程を「ガチャを回す」と呼ぶようです)

今度は、日本語で入力した呪文だとどのような生成結果になるかを試してみます。

結果は以下のようになりました。
オリンピック要素がなくなり、街並みのような画像や、地図のような画像が生成されてしまいました。
このように、日本語でも生成自体は可能ですが、英単語での生成に比べると、画像生成の精度は落ちるようです。自分のイメージ通りの画像を生成してもらいたい場合は、なるべく英単語で生成をかけるとよいでしょう。

今度は、有名人の名前を呪文にして生成してみます。
人の画像を生成してもらうので、ついでにその人の挙動も含めて生成してみましょう。
大多数に認知されている方がよいので、「タモリ(森田 一義)さんがスターバックスでコーヒーを飲んで休憩している写真」の画像を生成してもらいます。
(上記をDeepL翻訳ツールで翻訳すると、「Photo of Kazuyoshi Morita taking a coffee break at Starbucks.」となりました。)

生成結果は以下のようになりました。
私達が知るタモリさんとは異なる人物が生成されました。
個人名ではあまりうまく描写できていないようですが、右下画像のコーヒーカップに印刷されているロゴと、画像全体のカフェのような背景から、「スターバックス」そのものがどのようなものであるかは認識しているようです。

もしかすると、海外でも認知度の高い人物であれば、うまく生成してくれるかもしれません。
というわけで、今度はシュワちゃんにコーヒーを飲んでもらいましょう。
「シュワちゃんがスターバックスでコーヒーを飲んで休憩している写真」を翻訳して、「Photo of Schwarzenegger taking a coffee break at Starbucks.」を呪文として入力します。(地味に「シュワちゃん」を「シュワルツェネッガー」として翻訳していますね)

生成した結果は以下の通り。
どの画像もそこそこの精度で生成されています。右上の画像が一番シュワちゃんに近いですね。
この結果から、生成で人物やものを模倣できる範囲の基準としては、「世界的に知名度があるかどうか」が一つのラインとなっていそうです。

どんなときに使う?

3つの単語・シチュエーションで画像を生成してみましたが、AIの画像生成が利用できそうな場面を考えてみました。

1.イメージ通りの画像が見つからないとき
→プレゼンテーションなどで画像を利用したい時、自身の想像する画を自動生成してくれます。
2.普段起こり得ないシチュエーションを見てみたいとき
→有名人Aと有名人Bの共演など、自分の夢見たシチュエーションを生成してくれるかもしれません。

最初のうちは、中々イメージ通りの画像を生成してくれないかもしれませんが、一度コツを掴んでしまえば、いつでも好きなときに、自分が欲する画像を用意してくれる便利ツールになってくれるかもしれません。

イメージ通りの画像を生成してくれる点ではかなり便利なので、是非一度利用してみてください。

今回利用したサイト

「Stable Diffusion」:https://stablediffusionweb.com
「DeepL翻訳ツール」:https://www.deepl.com/translator

【Java】MapとListについて

【MapとListについて】

【Mapにつて】
Mapとは、連想配列のことであり、keyvalueをペアとして保持するクラスです。

valueを追加する時にキーを設定し、keyを使ってvalueを検索・取得が可能になります。

【Listについて】
Javaには、配列という、複数のオブジェクトを管理する仕組みがありますが、事前に要素数を決めなければならず、様々な処理がかかる要素に対しての管理には適してるとはいません。。。
そこでListです。

Listは、格納された要素を順番にインデックスを付けて管理することが特徴です。他にも、重複したデータでも格納できる、既存のインデックスを指定して割り込ませるようなデータ追加が可能です。

【MapとListの違い】

Mapはインデックスとなるkeyとそのデータとなるvalueの両方を定義することができます。keyには整数値のほかにString型などの変数なども指定することができます。keyに指定した変数から、valueを呼び出すことができます。

なお、Mapのキーは重複させることはできません。これに対して、Listは要素を格納した順に自動的に整数値のインデックスが生成され、値と紐づけされます。

Listの要素はインデックス番号を指定して、値を呼び出します。keyと関連付けて値を保持する必要がある場合はMapが適しています。

また、Listは要素の値で並び順を替えるソートができますが、Mapはそのままではできません。

【定義の仕方】
MapもListもインターフェースで、インスタンスを生成することができませんが、オブジェクトは宣言できます。
それぞれのインターフェースを実装したクラスのインスタンスをオブジェクトに格納していおり。
基本的に、MapはHashMapクラスを、ListはArrayListクラスといった、インターフェースを実装したクラスを使用しています。
Map<String, Integer> map = new HashMap<>();
List<String> list = new ArrayList<>();

今回は、MapとListの違いと、実装方法まで書いてみました。
応用としてMapのkeyやvalueをList化させたり、Listの値をMapのkeyやvalueにしたりと、いろいろ関連の深い機能なので、興味があったら是非使ってみて下さい。

巷で話題のChatGPTを使ってみました

chatGPTとは

OpenAIが開発した大規模な自然言語処理モデルの1つ。自然言語での対話や文章生成などのタスクに優れた能力を持っており、様々な用途に利用できると期待されています。

ただし、モデルの性質上、完全に正確な回答を生成できるわけではないため注意が必要だそうです。

早速使ってみた

chatGPTはコードの生成を行ってくれるらしく、早速試してみました。

HTMLでテンプレートとなる最もポピュラーなコードを教えて

image.png

なんとびっくり!コードの生成だけでなく、それぞれのタグの解説まで行ってくれるとは…
これは初心者の勉強ハードルがかなり低くなったのではないでしょうか。

次は少しだけ難しいことを聞いてみます。

HTML、CSSを使って右から左に移動する正方形のコードを教えて

image.png

image.png

image.png

上記のコードがたった数秒で作成されてしまいました。
やばい…!!と思いつつもついつい楽しくなってしまい、AIにできるのか?!というかなり難しい質問をしてみました。

番外編

2泊3日で回れるおすすめ観光スポットを教えて。電車の時間を考慮した移動スケジュール表もよろしく

image.png

image.png

回答が途中で切れてしまいましたね…

でもほとんど大丈夫!

image.png

途中で回答が途切れてしまった場合は「続き」と入力すると続きを送ってくれるそうです。
電車の時間も発→着まで書いてくれるとは…
chatGPT恐るべし!

みなさんも気になったら是非使ってみてください。

フレキシブルボックス(フレックスボックス)ー横幅と間隔ー

フレキシブルボックス(フレックスボックス)を利用すると、ボックスを横並び、横幅、高さをフレキシブルにコントロールすることができ、floatよりも柔軟にレイアウトを組むことができます。

使い方

displayプロパティを「display:flex」と指定して、フレックスコンテナを構成します。

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

レイアウトの調整

次のプロパティを利用してレイアウトを調整していきます。

プロパティ 説明
flex / gap フレックスアイテムの横幅と間隔を指定する
★当記事はこちらをご紹介★
order / flex-direction / flex-wrap フレックスアイテムの並び順・並べる方向を指定する
justify-content / align-items / align-self / align-content / margin フレックスアイテムの位置揃えを指定す

フレックスアイテムー横幅と間隔ー

フレックスアイテムの横幅をflexプロパティで、間隔をgapプロパティで調整します。

プロパティ 説明
flex フレックスアイテムの横幅を指定する
gap フレックスアイテムの間隔を指定する

 

flex

flexプロパティでは、伸長比、縮小比、フレックスコンテナのサイズ指定に応じてフレックスアイテムの横幅を決定します。

flexの伸長比

フレックスアイテムの横幅の合計よりもフレックスコンテナが大きい場合、フリースペースをフレックスアイテムに配分します。
例えば、フレックスコンテナの横幅を900pxに指定した場合、300pxのフリースペースができます、このとき、a~cの伸長比をそれぞれ「1」とした場合、フリースペースが「1:1:1」の比率で分割されます。
その結果、100pxずつ配分され、200px、300px、400pxになります。

(a) 適用後:200px(100px + 100px)
(b) 適用後:300px(200px + 100px)
(c) 適用後:400px(300px + 100px)

コード例

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

 

変化が分かりづらいので、伸長比率を「0」「4」「1」にした場合、フリースペース(300px)を0:4:1の比率で配分されます。

(a) 適用後:100px(100px + 0px)
(b) 適用後:440px(200px + (300px * 4/5))
(c) 適用後:360px(300px + (300px * 1/5))

コード例

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

問題です!伸長比率を「2」「1」「2」にした場合、フリースペースはどのように配分されるのでしょうか?

答え

(a) 適用後:220px(100px + (300px * 2/5))
(b) 適用後:260px(200px + (300px * 1/5))
(c) 適用後:4200px(300px + (300px * 2/5))

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

 

flexの縮小比

フレックスアイテムの横幅の合計よりもフレックスコンテナが小さい場合、フレックスコンテナ横幅サイズ値からフレックスアイテムの横幅の合計を差し引いた値を元に縮小します。

例えば、フレックスコンテナの横幅を480px指定した場合、120pxのフリースペースができます。このとき、a~cの縮小率を「1」とした場合、ベースとなるサイズに縮小率を掛け合わせた100:200:300の比率で分割され、(a)に-20px、(b)に-40px、(c)に-60px配分されます。
その結果、(a)に80px、(b)に160px、(c)に240pxになります。

(a) 適用後:80px(100px-(120px * 1/6))
(b) 適用後:160px(200px-(120px * 2/6))
(c) 適用後:240px(300px-(120px * 3/6))

 

コード例

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

これまた、変化が分かりづらいので、縮小比率を「3」「2」「1」にした場合、フリースペース(120px)をベースとなるサイズに縮小率を掛け合わせた300:400:300の比率で分割されます。

その比率(3 00 :4 00 :3 00)の結果、それぞれの横幅は、(a)に64px、(b)に152px、(c)に264px配分されます。
(a) 適用後:64px(100px-(120px * 3/10))
(b) 適用後:152px(200px-(120px * 4/10))
(c) 適用後:264px(300px-(120px * 3/10))

 

コード例

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

gap

gapプロパティを利用すると、フレックスアイテムの間に余白を挿入して、間隔を調整することができます。
たとえば、gap:30pxと指定すると、30pxの余白が入ります。

コード例

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

おわり

いかがでしょうか。
分かりづらい点があったかと思いますが、訪問頂いた皆さんのお役になっていれば幸いです。

【Laravelの機能についてまとめてみよう】~~~Routing編~~~

laravel

今回は、【Laravelの機能についてまとめてみよう】第一弾です。
第一弾は….. 『Routing』についてです!!

※Laravel バージョンは8をベースにしております。

目次

――――――――――――――――――――――――――――
① Routingとは
② 基礎
③ 発展
④ まとめ
――――――――――――――――――――――――――――

① Routing とは

Routing(ルーティング)は特定のURLにアクセスされたときに「どのような処理をするのか」といったことを定義することです。
例)https://*** といったサイトがあるとします。
https://***/loginにアクセスされた場合にどう処理をするのか指定することができます。
以下のサイトも参考にしてみてください。
↓↓※公式リファレンスを日本語訳しているサイト↓↓
https://readouble.com/laravel/8.x/ja/routing.html

② 基礎

すべてのLaravelルートは、routesディレクトリにあるルートファイルで定義します。これらのファイルはApp\Providers\RouteSerciveProviderに記載されているのもを自動的に読み込んでいます。

デフォルトでは、以下の4つのファイルがあります。それぞれみていきましょう。
project
├─ app
├─ 略(config database public 等)
├─ resoures
├─ routes
│  ├─ api.php
│  ├─ channels.php
│  ├─ console.php
│  └─ web.php

【api.php】
api.phpには、APIとしてステートレスに使いたいルートを定義します。
記載例)

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

※ここで定義したルートはapiミドルグループウェアに割り当てられ、URIに /api というプレフィックスがつきます。

【channels.php】
channels.phpは、ブロードキャストのチャンネルを登録するために使います。
記載例)

Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

※ブロードキャストについての詳細は以下のサイトをご覧ください。
https://readouble.com/laravel/8.x/ja/broadcasting.html

【console.php】
console.phpは、コンソールベースのエントリポイントを定義するために使います。
記載例)

Artisan::command('inspire', function () {
    $this->comment(Inspiring::quote());
})->purpose('Display an inspiring quote');

※Artisanコンソールについての詳細は以下のサイトをご覧ください。
https://readouble.com/laravel/8.x/ja/artisan.html

【web.php】
web.phpには、Webからアクセスしてほしいルートを定義します。
記載例)

Route::get('/', [HomeController::class, 'index'])->name('home');
Route::get('login', [LoginController::class, 'showLoginForm');
Route::post('login', [LoginController::class, 'login');

※ここで定義したルートはwebミドルグループウェアに割り当てられ、セッション状態やCSRF保護などの機能が提供されます。例えばPOSTメソッドで定義したルートはCSRF保護され、正しいCSRFトークンを含まないリクエストは拒否されます。詳細は以下のサイトをご覧ください。
https://readouble.com/laravel/8.x/ja/routing.html

③ 発展

基礎はデフォルトで用意されているRoutingファイルをみていきました。
発展では独自のカスタムRoutingファイルの作成について調べていきましょう!

デフォルトのRouteファイルは4つあるものの、実際に処理を記載するのは、ほぼweb.phpになります。
そこで、web.phpの肥大化を防ぐために新たなRouteファイルを追加して処理を分ける必要があります。その方法をまとめていきたいと思います。
(※今回はwebと同じmiddleware群を使用します。)

[1] Route定義ファイルの追加
project
├─ 略(app config database public resources 等)
├─ routes
│  ├─ api.php
│  ├─ channels.php
│  ├─ console.php
│  ├─ web.php
│  └─ sample.php (追加ファイル)

[2] サービスプロバイダに追加ファイルの登録
Routeを管理している App\Providers\RouteServiceProvider.phpのbootメソッドにある、$this->routes();のコールバックfunctionにsampleのRouteを渡す。
例)

$this->routes(function () {
    Route::middleware('api')
        ->prefix('api')
        ->group(base_path('routes/api.php'));
                         
    Route::middleware('web')
        ->group(base_path('routes/web.php'));
                         
    Route::prefix(sample)
        ->as('sample.')
        ->middleware('web')
        ->group(base_path('routes/sample.php'));
});

※webとは違うmiddleware群を使用したい場合は、App\Http\Kernel.phpの$middlewareGroupsに新しく記載する。
例)webのmiddlewareGroups

'web' => [
    \App\Http\Middleware\EncryptCookies::class,
    \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
    \Illuminate\Session\Middleware\StartSession::class,
    \Illuminate\View\Middleware\ShareErrorsFromSession::class,
    \App\Http\Middleware\VerifyCsrfToken::class,
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

④ まとめ

このようにURLを指定したり、フォームからデータ送信する際に「処理先(ルート)」を決めるのがLaravelのRoutingとなります。

以上、簡単にではありますが大まかなRoutingについてまとめてきました。
Routeを深堀りするとまだまだまとめきれてないことが多いので
次の機会に紹介できればと思います!

PANTONE COLOR OF THE YEAR 2023はViva Magenta(ビバマゼンタ)

PANTONEからカラーオブザイヤー2023が発表されました。
PANTONE COLOR OF THE YEAR 2023

2023年のトレンドカラーは「PANTONE 18-750 Viva Magenta(ビバマゼンタ)」。
青味がかった彩度の低い、自然な赤色ですね。

PANTONEのCOLOR OF THE YEAR、Viva Magenta 18-750 は、鮮やかで活力に満ちています。赤系の自然に根ざし、新たな力強さを表現する色合いです。ビバ マゼンタは勇敢で恐れを知らず、脈動する色であり、その活気が喜びに満ちた楽観的なお祝いを促進し、新しい物語を書きます。
今年のCOLOR OF THE YEARはパワフルで力を与えてくれます。それは、純粋な喜びに満ちた生き生きとした赤であり、抑制のない実験と自己表現を奨励し、刺激的で、際立ったステートメントとして現れる無限の色合いです。PANTONE 18-1750 Viva Magenta は、同じ生命力と反骨精神を持つすべての人を歓迎します。大胆で機知に富み、すべてを包括する色です。

カラーデータ

HEX #BE3455
sRGB 190 52 85
LAB 46.05, 58.95, 17.38

Photoshopのカラーピッカーではこんな感じです。

PANTONE CONNECT

PANTONE CONEECTではAdobe系のカラースウォッチで使えるASEファイルがダウンロードできます。
また、Viva Magentaを元にしたカラーパレットやシェードも用意されています。
PANTONE CONNECT(要会員登録)

Unreal Engineのモデル表示を試してみた

今回は、UnrealEngineで実際のモデルを読み込んで表示するまでを試してみました。
モデルデータに関しては、数年前に美術館風のCGを流用することにします。
UnrealEngineの基本的な使い方に関しては割愛しますが、まずはそのままモデルデータを
読み込んだ状態が以下になります。

上記の状態は、基本的なライトデータとモデルをそのまま表示しているだけになります。
このままでも十分UnrealEngineの凄さを感じられます。
上記の状態から、ライトデータの調整・マテリアルへのテクスチャの設定を行なった結果が以下になります。

次回はUnrealEngineでのプログラミングについても触れていければと思っております。

Log4jの脆弱性について

「Log4j」とは、Javaベースでシステムやアプリを開発する際によく使われる「API」の一つです。

Log4jはJavaアプリケーションの標準的なロギングライブラリであり、処理スピードの速さや、
その多機能性から、多くの人たちから利用されいます。

機能一部
・Java開発では欠かせないデバック情報、エラー情報を出力できる機能。
・出力先が、コンソール、指定したファイル、ログサーバ等、幅広い。

Log4jの脆弱性
といった風にとても便利なLog4jですが、2021年にとある事件が起こりました。
Log4jに発見された脆弱性「Log4Shell」というものであり。
この脆弱性を利用すれば、任意のコードをリモートで実行する、
RCE(Remote Code Execution:リモートコード実行)が可能です。
原因としては、Log4jの「JNDI Lookup」という機能が問題で、攻撃者が送信した文字列を、
Log4jがログとして記録してしまうと、その文字列に記述された通信先やサーバー内部のファイルからjava classファイルを読み込んでしまい、
実行してしまうというものです。
この「Log4jShell」は容易に悪用できる点や。様々なコードをリモートで実行できる点から、
危険度の高い脆弱性といえ、Apacheソフトウェア財団からも、CVSSレートを最高段階の「10」に指定しています。

CVSSはCommon Vulnerability Scoring Systemの略で、共通脆弱性評価システムと訳されています。
脆弱性の深刻度を0から10までの数値でレーティングしています。数値が大きくなるほど深刻度が高くなり、10は深刻な脆弱性であることを示しています。

回避方法
・Log4jのバージョンをApache Log4j 2.15.0よりあとのバージョンにすることで回避可能です。
  色々な事情によりバージョンアップが難しい場合は、JndiLookupクラスをクラスパスから削除をしてください。

まとめ
便利なソフトやシステムを使っていても、バージョンが古かったりすると、
システムのセキュリティは大幅に落ちてしまいます。
こまめなバージョン確認や、使うシステムの脆弱性について調べることが、とても大切だと思います。

CSSグリッドレイアウトについて

前提知識

・ブロックレベル要素
・インライン要素

グリッドレイアウトを理解するためには、上記2つの理解が必須です。

CSSグリッドとは

CSSグリッドについて説明します。
CSSグリッドとは、CSSでレイアウトを組む際によく使用される方法の1つで
縦横の格子状に分割してレイアウトを構成する手法です。


縦(赤線)がcolumn(列)、横(青線)がrow(行)です。
コーディングの際にこの「column」と「row」が出てきます。

今回はグリッドを使用して、2枚目の画像のようにレイアウトを整えていきます。


HTMLのみの状態


CSSでレイアウトを整えた状態
レイアウト調整後

コーディングにあたり、今回はCodePenというサイトを使用します。
グリッドレイアウトの仕組みを理解することが目的なので、環境構築などは行わずブラウザ上で動作させます。

CodePenにてコーディングを行なっていきましょう。
試しに以下ソースをCodePenのHTMLエディタに入力してみてください。
レイアウト調整前の背景色のみが装飾された結果が出力されます。

HTML

<div id="container"> <!-- コンテナ -->
  <div id="boxA">boxA</div> <!-- アイテム -->
  <div id="boxB">boxB</div> <!-- アイテム -->
  <div id="boxC">boxC</div> <!-- アイテム -->
  <div id="boxD">boxD</div> <!-- アイテム -->
</div>

CSS

#boxA {
  background-color: #ff7f7f;
}
#boxB {
  background-color: #7fbfff;
}
#boxC {
  background-color: #7fff7f;
}
#boxD {
  background-color: #ffff7f;
}

恐らくこちらの画像のような表示になったかと思います。

レイアウトを整える

早速今回の本題であるグリッドレイアウトでレイアウトを整えていきます。
CSSを以下ソースに置き換えてください。

#container {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    "boxA boxB boxB"
    "boxA boxC boxC"
    "boxA boxD boxD";
}

#boxA {
  background-color: #ff7f7f;
  grid-area: boxA;
}
#boxB {
  background-color: #7fbfff;
  grid-area: boxB;
}
#boxC {
  background-color: #7fff7f;
  grid-area: boxC;
}
#boxD {
  background-color: #ffff7f;
  grid-area: boxD;
}

以下画像のような表示になりましたか?

では一つずつ説明していきます。
グリッドレイアウトで使用するプロパティは全部で6つ。

親要素(コンテナ)で指定するプロパティ

  • display
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas

子要素(アイテム)で指定するプロパティ

  • grid-area

各プロパティの説明

display

要素の表示形式を指定します。
今回の場合グリッドレイアウトなので「grid」を指定します。

display: grid;

他にもブロックレベル要素と指定する「block」や
フレックスボックスを指定する「flex」が存在します。

grid-template-columns

グリッドレイアウトの横幅を指定します。

grid-template-columns: 400px 1fr;

値400pxはboxAの横幅を指定しています。
値1frは閲覧しているPCの横幅を自動的に算出し指定しています。
今回は先に400pxを指定しているため、画面最大幅-400pxで算出された横幅が指定されます。

grid-template-rows

グリッドレイアウトの縦幅を指定します。
今回は3行あるため値を3つ指定しています。

grid-template-rows: 100px 100px 100px;

100pxを各行の縦幅として指定しています。

grid-template-areas

各アイテムの配置を行うプロパティです。
「”」で囲うことで、画面に表示させたいレイアウトを簡単に可視化できます。
以下で指定している「boxA」や「boxB」は後ほど紹介するgrid-areaを使用して指定します。

“boxA boxB boxB”

例えばこちらのソースを書くと

     grid-template-areas:
    "boxA boxB boxB"
    "boxA boxC boxC"
    "boxA boxD boxD";

1列目は全てboxA
1行目の2列目〜3列目はboxB
2行目の2列目〜3列目はboxC
3行目の2列目〜3列目はboxD
という感じでこちらの結果が表示されます。

同じく、こちらを入力すると

    grid-template-areas:
    "boxA boxB boxB"
    "boxC boxC boxC"
    "boxD boxD boxD";

こちらの結果が表示されます。

このように、列(行)単位で「”」で囲い、その中にgrid-areaで指定した名前を
スペース区切りで入力することで簡単にレイアウトを整えることが可能です。

grid-area

grid-template-areasで指定する際の名前をつけるプロパティです。
このプロパティで指定した名前とgrid-template-areasで指定した名前が一致していれば任意の名前をつけることが可能です。
cssで各要素に対して指定してあげます。

#boxA {
  grid-area: boxA;
}
#boxB {
  grid-area: boxB;
}
#boxC {
  grid-area: boxC;
}
#boxD {
  grid-area: boxD;
}

おわり

CSSグリッドに関する説明は以上です。
floatプロパティを勉強した人はとても簡単に感じませんでしたか?
私がこのグリッドレイアウトの存在を知った時はもう衝撃すぎて体が震えました…(floatは難しすぎる)
ぜひこちらの記事で少しでもCSSレイアウトに対する興味が湧いていただけると嬉しいです!

パクることは決して悪いことではない

新人教育で伝えていること。

「パクることは決して悪いことではない」

TTP(徹底的にパクる)

某企業で受け継がれるTTPという言葉。

  • T
    徹底
  • T
    的に
  • P
    パクる

営業やマーケティングなどビジネス用語として使われる言葉ですが、エンジニア初心者の方に知ってほしいため、この言葉を伝えております。

パクるって良いの?

パクる
決して良い言葉として捉えることができませんが、グーグル検索・先輩からのアドバイス、これ全てパクる(=真似る)と考えます。
もちろん、著作権的な問題はNGですけどね。

分からないことは、

真似る⇒真似ぶ⇒学ぶ

「学ぶ」の語源は「真似ぶ」であるという説があることから、パクることは決して悪いことでないと考えています。

パクるから進化

パクった情報を、InputしてOutputすることで、自身のスキルとなります。
例えば、Outputとして、誰かに教えた際に、相手の理解度が低い際には、自身の理解度が低いのか?もう少し分かりやすい説明は無いのか?と自問自答して解決することで、自身のスキルアップに繋がります。

おわり

分からないことは、決して、恥ずべきことではなく、当たり前のことです。

先ずは真似ることです:v:

真似たら、InputしてOutputしましょう。

私が考えるInputは・・・

  1. パクって良いコードはデバッグして流れを掴む単純に真似ると意味ないです。
  2. パクって良いコードを少し変えてみる。(例えば、条件式を変えてみる)

私が考えるOutputは・・・

  1. 誰かに説明する。(ブログではなく、直接!)

Output少ない^^