- 投稿日：2021-10-13T16:47:19+09:00
phpフレームワークLaravelって何？環境構築の前にちょっと待った！使用用途を徹底解説！！
絶対に読んで欲しい導入 HTML,PHPを学び、これからLaravelを使おうと思ったそこのエンジニアの皆さん、とりあえず環境構築してコードをググったらある程度使えるようになるだろうと思ってますよね。 確かにその通りです。 しかし実際に使用する前に便利な機能を把握し、Laravelではこんなことができるのかと知っておくことで格段に開発効率が上がります。 座学はエンジニアの皆さんにとってはそんなに面白いものではないかもしれませんが、こんな機能があるならこういうアプリが作れそうだ！などと言った想像を膨らませながら、楽しみながら読んでみてください!! そもそもLaravelって何？ Laravelとは、PHPのフレームワークの1つです。 ※ PHPとは、Webページを動的に生成できるサーバーサイドのスクリプト言語です。 ※ フレームワークとは、アプリケーションを開発するとき、その土台として機能させるソフトウェアのこと。「アプリケーションフレームワーク」とも呼ばれる。「枠組み」「骨組み」「構造」などといった意味があり、土台となるフレームワークに必要な機能を追加し、アプリケーションの開発を進めていくのが一般的です。 使用用途や特徴 MVCモデルで製作を簡単に進めよう！ 多機能なMVCフレームワークModel(データ処理)、View(画面表示)、Controller(全体の制御)でフロントエンドからバックエンドまで全てをこれ1つで網羅でき、デフォルトでサーバーサイドに必要なファイルが入っているから面倒な構築を省いて、webアプリをすぐに作成することができる！ View LaravelではBlade(拡張子：.blade.php)というHTML形式のテンプレートエンジンを使ってUIを作成します。 1.共通レイアウトを作成する 各ページで同じUIを使用する場合に他ファイルで呼びだして使用する共通パーツを作成します。 ページごとに変更したい部分には@yield('content')と書く。 resources/views/master.blade.php <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Site Title</title> </head> <body> @yield('content') </body> </html> 2.共通レイアウトを利用してビュー画面を作成 @extend('共通レイアウトのファイル名')で共通レイアウトを読み込みます。 ここでは@extends('master')です。 共通レイアウトで@yieldした部分にページ別のコンテンツを流し込みます。 @section('content')と@endsectionの間にHTMLを記述します。 resources/views/pages(任意フォルダ名)/sample.blade.php(任意名) @extends('master') @section('content') <h1>sampleページ</h1> <p>これは共通レイアウトをつかったsampleページです。</p> @endsection Model Modelでは各種webアプリで使うデータベース（以下DBという）の構造を簡単に作成したり、作成したDBを操作、アクセスして利用するためのものです。 ※今回は実用的な、コマンドを使ったモデルの作成からテーブルに値を入れるまでを解説します。専門用語の説明は下記に記載してますので、先にそちらを見て頂いてもOKです。 1.artisan（アルティザン）コマンドでモデルを作成 Laravelのフォルダ直下に移動してコマンドラインで下記コマンドを打ちます。 php artisan make:model Product 上記コマンドを実行すると下記のProductというモデルがAppフォルダに作成されます。 app/Product.php namespace App; use Illuminate\Database\Eloquent\Model; class Product extends Model { // } Productモデルが操作できるテーブル名はproductsと自動的に決められます。 モデル名が小文字複数形になったものがテーブル名として使用される形です。 2.テーブルの作成 Laravelではマイグレーション機能を使うことでテーブルの作成を行います。 2_1.マイグレーションファイルの作成 artisanコマンドでテーブル名を指定し、マイグレーションファイルを作成します。 php artisan make:migration create_product_table --create=products 2_2.マイグレーションファイルの編集 2_1で作成されたマイグレーションファイルのup()関数の部分に追加したいカラムを記述します。 database/migrations/20xx_xx_xx_xxxxx(日付が自動的に入る)_create_products_table.php public function up() { Schema::create('products', function(Blueprint $table) { $table->increments('id');//自動でidが付与される $table->string('product_name'); // 追加 $table->int('price'); // 追加 $table->timestamps();//作成した時間が入る }); } 2_3.マイグレーションファイルの実行 コマンドプロンプトにArtisanコマンドを打ってマイグレーションファイルの実行をします。 php artisan migrate これでproductsテーブルが作成されます。 3.デフォルトレコードをDBに入れ込むためのシードを作成 3_1.コマンドでシーダーファイルを作成 php artisan make:seeder productTableSeeder 3_2.シーダーファイルの編集 試しに3つのデフォルトレコードを入れ込んでみましょう database/seeds/productTableSeeder.php <?php use Illuminate\Database\Seeder; class productTableSeeder extends Seeder { public function run() { $param = [ 'product_name' => 'MacbookPro', 'price' => 300000, ]; DB::table('products')->insert($param); $param = [ 'product_name' => 'Applewatch', 'price' => 60000, ]; DB::table('products')->insert($param); $param = [ 'product_name' => 'Airpods', 'price' => 20000, ]; DB::table('products')->insert($param); } } 3_3.シードの実行 php artisan db::seed これでseederファイルのrun()が実行され、productsテーブルにデフォルトレコードが追加されます。 Controller ControllerはModelとViewをつなげる役割を果たします。 具体例を挙げるなら、modelからDBにアクセスし、取得したデータを加工してviewに渡したり、逆にviewから受け取ったデータをmodelに渡して、DBに保存します。 ※今回はViewのファイルをコントローラーで呼び出してルート情報をつけるsampleを作成します。 1.Controllerファイルを作成 artisanコマンドでControllerファイルを作成します。 php artisan make:controller SampleController 2.メソッドを追加する メソッドを作成して、Viewファイルを呼び出します。 app\Http\Controllers\SampleController.php class SampleController extends controller { public function getIndex() { return view('sample');//Viewのbladeファイルを呼び出す。 } } これで、Viewファイルの呼び出しが完了しましたが、まだ必要な作業があります。 3.web.phpにルート情報を記述する ページを表示させるためにルート情報(URLになるもの)をweb.phpに記載します。 routes\web.php Route::get('/sample','SampleController@getIndex'); これで、localhost:8080でLaravelを起動した場合、localhost:8080/sampleで指定したviewファイルが表示されることになります。 MVCモデルはこのようにModel,View,Controllerを軸に作成していきます。 パッケージツール composerでライブラリを便利に管理！ composerとは、PHPのライブラリ管理ツールです。 ライブラリというのは、ライブラリ1を使いたい！！と思うとそれを使うためには、ライブラリ2.3の2つのライブラリもダウンロードしないといけないなどという依存関係が存在します。 そんな依存関係を管理してくれているので、composer require 1と打つだけでライブラリ1に必要な別ライブラリも全てダウンロードしてくれるというまるでライブラリの作曲家のような仕事をしてくれるのです。 Eloquent ORMとMigrationでwebアプリに必須なDBを管理! LaravelではDB上のデータ操作を簡単に行うためのEloquent ORMという仕組みが備わっています。 Eloquent ORMはデータベースとモデルに関係性(リレーション)を持たせて、データを柔軟に扱えるようにしたものです。データベースの操作のためのSQLをかなり書きやすくした記述法です。 例えば、SQLではselect * from user where id = 1;という記述方法ですが、 Laravelでは,$data = User::where('id',1)->get();という書き方になります。 SQLのような長ったらしい文章が短くなり、一致した条件の先頭の値だけを取得することや副問合せなどもわかりやすく書くことができる優れものなのです。 また、migrationというテーブル定義の仕組みがあり、DBの改変記録を保持しており、SQLを書かなくても、laravel上でテーブルのカラム名や値を作成することができます。共同開発の場合などでも同じテーブルをデフォルトで入れ込むことができる点もメリットです。 最後に Laravelは今や世界でもかなりの人気を誇るフレームワークとなっているので独学にも、これから企業に導入しよう！と思っている方はすごくいい判断だと思います。 環境構築をやって、いますぐアプリを作りたくなったことでしょう。これからも良きLaravelライフを！！
- 投稿日：2021-10-13T13:47:53+09:00
構造化データについてもっと詳しくなりたいんじゃ
聞いたことあるけど、案件でガッツリ対応したことはない「構造化データ」。 今回はいい機会と捉え、少しでも理解を深めるために（サッと撫でる程度ですが）まとめたいと思います。 構造化データってなんですの 構造化データを提供してもらうと、Google はそのページをより正確に理解できるようになります。 構造化データとは、ページに関する情報を提供し、そのコンテンツ（たとえば、レシピページの場合は材料、加熱時間と加熱温度、カロリーなど）を分類するために標準化されたデータ形式です。 とのことで、要は検索エンジンがそのページを理解しやすいように、 ページ情報を構造化したデータのことですね。 構造化すると何か良いことあるの 検索結果でリッチスニペットが表示できる！ 構造化する最大の目的ではないでしょうか。 リッチスニペットとはこういう検索結果表示のことです↓ よく見かけると思います。 ちなみにこちらは「渋谷 ランチ」で検索したときに表示されたものです。 他にもページタイトル名の上に階層が表示されていたりするのも見かけるのではないでしょうか。 なぜこれらがメリットになるのかというと、 検索時に目を引くので競合他サイトよりクリック（アクセス）率アップが期待できるからです。 逆にデメリットってあるの 特に無し！工数かかるくらい？ 構造化データをまとめること自体にデメリットは、おそらく無いはずです。 ただし、構造化データを設定しても必ずリッチスニペット表示されるわけでは無いようなので、 工数をかけて対応するかを検討する必要があります。 表示される条件みたいなものも、ザッと探しましたが見つかりませんでした。。 構造化データの設定方法 Schema.orgにある「ボキャブラリ」と呼ばれる構造化データ用のタグを利用して設定します。 Schema.orgは、インターネット、Webページ、電子メールメッセージなどで構造化データのスキーマを作成、維持、および促進することを使命とする共同のコミュニティ活動です。 https://schema.org/ 構造化データの形式 まず形式ですが、下記の3つがあります。 特別な仕様がなければ使うのは推奨されているJSON-LDになるかと思います。 - JSON-LD（推奨） - microdata - RDFa 書き方サンプル 下記はJSON-LD形式で構造化したデータのスニペットです。 レシピページにて、レシピのタイトルやレシピの作成者などの詳細情報を記述できます。 （引用：構造化データの仕組みについて | Google 検索セントラル） <head> <title>Apple Pie by Grandma</title> <script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Recipe", "name": "Apple Pie by Grandma", "author": "Elaine Smith", "image": "http://images.edge-generalmills.com/56459281-6fe6-4d9d-984f-385c9488d824.jpg", "description": "A classic apple pie.", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.8", "reviewCount": "7462", "bestRating": "5", "worstRating": "1" }, "prepTime": "PT30M", "totalTime": "PT1H30M", "recipeYield": "8", "nutrition": { "@type": "NutritionInformation", "calories": "512 calories" }, "recipeIngredient": [ "1 box refrigerated pie crusts, softened as directed on box", "6 cups thinly sliced, peeled apples (6 medium)" ] } </script> </head> <body> </body> </html> 表示結果↓ このように、構造化タグを使用して情報をまとめて設定することで、 検索エンジンがページの内容を詳しく理解し、リッチスニペットとして結果ページに表示してくれます。 構造化データの検証方法 こちらを使って正しく記述できているかを確認できます。 構造化データ記載したページURLか、記述自体をコピペして検証可能…！ https://validator.schema.org/ 構造化データ マークアップ支援ツールもあるよ これを使って設問に答えていくだけでタグを生成できます。 あくまで支援ツールなので、細かいカスタマイズには対応していませんが、 簡易的な対応でよければこれで十分かと思います。 https://www.google.com/webmasters/markup-helper/u/0/ 他にもデータハイライターなるものもあるよ こちらも支援ツールで、手軽に構造化データを設定できます。 データ ハイライターはウェブマスター ツールの 1 つで、ウェブサイトの構造化データのパターンを Google に伝えるものです。 結び とまあ、ほんとに表面を軽くなでただけですが、 こういう設定もあるんだな〜と心の引き出しにしまっておきたいですね。 案件でもたまにガイドラインに構造化データの設定が含まれていたりしますので、 検証ページ用意して、色々触って慣れておいたほうが良いのでは…！？ 以上です〜
- 投稿日：2021-10-13T10:54:18+09:00
MathJaxを動的に処理した
初めに どうも、最近 Ruby on Rails 初めた人です。（記事と全く関係ない） 今回の記事は。 MathJaxというライブラリを使って数学のwebアプリを作っていたとき、動的に処理できなくて困ったので記事にまとめます。 MathJaxってなに？ MathJax はMathML、LaTeX、ASCIIMathMLで記述された数式をウェブブラウザ上で表示するクロスブラウザのJavaScriptライブラリである。MathJaxはApache Licenseのもとでオープンソースソフトウェアとしてリリースされている。 MathJax - Wikipedia まぁ、要するに「カッコいい数式を表示できる機能」ってこと 例 二次方程式 [x=ax^2+bx+c] の解は \\ x = {-b \pm \sqrt{b^2-4ac} \over 2a} こんなかんじ どうやって使うの？ <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script> ↑こいつを <head> タグの中に入れるだけ！ あとは、 <body> タグの中に数式を放り投げるだけ。 数式は、ぐぐったら出てくるから、自分で調べて。 自分がしたかったこと ボタンを押して数式を表示する 「スタートボタンを押して、事前に用意してあった数式を表示して、回答する」 という簡単な計算アプリを作っていた。 数式を表示するだけならすぐに実行できたが、.innerHTML もしくは .html を書き換えると、うまく行かなくなった。 結論 // head <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.0.4/math.min.js"></script> <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="script.js" charset="utf-8"></script> // body <div id="math">\\begin\{align\}半径 = \\frac{直径}{2}\\end\{align\}</div> <button onClick="changeMath()"></button> // script.js function changeMath() { $("#math").html("\\begin\{align\}"); $("#math").append("y=\\sin(\\theta+\\frac{\\pi}{2})+1"); $("#math").append("\\end\{align\}"); MathJax.Hub.Queue(["Typeset",MathJax.Hub,"quMain"]); } 解説 表示されたボタンを押すと changeMath() が発火する。 そうすると、表示されていた数式が上の数式から下の数式に置き換わる。 半径 = { 直径 \over 2 } y=\sin(\theta+\frac{\pi}{2})+1 以上
- 投稿日：2021-10-13T03:42:44+09:00
CSSのプロパテーと値
CSSのプロパティーについて プロパティーの種類は様々なものがありあます。 文字の色、背景色、背景画像、フォントの種類、フォントの大きさなどがあります。 ではここで実際に使ってみしょう。 まずはhtml内にPタグを指定し文字の色を変えてみよう。 index.html <p>テスト</p> style.css @charset "utf-8" p { /*処理を書く*/ color:#f0000; } 上の様に文字が赤くなっていれば成功です！ 日本で訳すとすべてのPタグに対して文字の色を赤くしてねという命令になります。 Pタグの{}内の処理はcolorで文字色を変えてほしいということになり、何色に変えるのかという 命令を：の後に書いています。 文字の大きさを変える場合はfont-size:〇〇px; 背景色はbackground-color、背景画像はbackground-imag：url();です。 例題として、html内でPタグを指定しテキスト内容はHallo. cssでpタグに対して文字の大きさを20ピクセル 文字色は白 背景色を青にしてください。 すると以下の結果になります。 コードの回答はこちら index.html <p>Hallow</p> style.css @charset "utf-8" p { color:#ffffff; background-color:#0000ff; font-size:20px; } 次は四角箱を３つほど作ってみましょう まず横幅を４０ピクセル、縦幅を３０ピクセルにします。 そしたら箱の空間を１０ピクセルほどにしていきます。 index.html <div class="box"></div> <div class="box2"></div> <div class="box3"></div> style.css @charset "utf-8" p { /*処理を書く*/ .box { width: 40px; height: 30px; background-color: blue; } .box2 { width: 40px; height: 30px; margin-top: 10px; background-color: blue; } .box3 { width: 40px; height: 30px; margin-top: 10px; background-color: blue; } 処理を見ていきましょう widthは横幅、heightは縦の長さを表しています。 margin-topは上の余白部分を表しています、余白についてはまた後日書いていきます。 background-colorで背景色の指定をしています。これらの結果は以下の様になっていますか？ 縦に並んでいれば正解です。 HTMLの処理を基本的には上から下に流れ左側に反映されていきます。 問題です、青い箱を好きな色に変えてください(青以外の色、３つの箱の色をバラバラで）大きさは横と縦を同じ１００ピクセルに指定。余白はそのままで平気です。 こんな感じになりましたか？なっていれば正解です。答えは次回に載せます。
- 投稿日：2021-10-13T02:20:23+09:00
microCMSのコンテンツをmarkdownファイルで取得する方法
microCMSのAPIでコンテンツを取得して、それぞれエンドポイントごとに個別のファイルを作成する必要ことがあった。取得したファイルを編集するため、HTMLではなく、markdownファイルで取得する必要があった。その時の記録を残しておく。 なお、npmは使わず、CDNのみを利用するため、Nodeやwebpackがわからない人もこの方法で取得できる。 microCMS まずは、microCMSのAPI取得である。公式ドキュメントにもあるように、serviceDomain と apiKey を利用して取得できる。このapiKeyには2種類でもある。X-API-KEYとX-GLOBAL-DRAFT-KEYである。 GETによる取得は前者のX-API-KEYを利用し、下書きコンテンツも含めて取得する場合はX-GLOBAL-DRAFT-KEYを利用する。 今回はX-API-KEYを利用する。 まずは、htmlのCDNでmicroCMSを読み込み、jsファイルにimportする。jsファイルではclientでドメインとAPIキーと共に初期化する。 index.html <script src="https://unpkg.com/microcms-js-sdk@latest/dist/umd/microcms-js-sdk.js"></script> main.js const { createClient } = microcms; const client = createClient({ serviceDomain: "ドメイン", apiKey: "ご自身のX-API-KEY" }); 次に、GET /api/v1/{endpoint} の形式で取得する。client.getではendpointに配列からそれぞれの値を取得する。取得したオブジェクトは定数materialContentsに保存する。awaitで記述するのはこの関数を次に、関数でasyncを定義しているからだ。 main.js const endpointArray = ['category1','category2','category3']; const category = endpointArray[1]; const data = await client.get({ endpoint: category, queries: { offset, limit } }) const materialContents = data.contents; materialContents に保存するオブジェクト内に必要なデータはタイトル、記述したコンテンツブロックである。以下のようにオブジェクトは取得できる。 turndownService 取得したHTMLをmarkdown化するのが Turndown というモジュールである。 これもCDNで利用できる。下にあるCDNはこのTurndownのプラグインでこれがあることでテーブルタグもhtmlからmarkdowｎ表記に変更できる index.html <script src="https://unpkg.com/turndown/dist/turndown.js"></script> <script src="https://unpkg.com/turndown-plugin-gfm/dist/turndown-plugin-gfm.js"></script> このturndownを利用して、以下のようなソースコードで取得して、その内容をマークダウン化した。 取得したオブジェクトからタイトルを取得して変数に代入する。その後、contentの配列は三項演算子でrichEditorかhtmlかで取得する内容を変更している。それらをDOMでタイトルはpタグにコンテンツブロックの内容は一つの記事ごとにまとめてdivタグに代入している。そして、タイトルに合わせた記事内容が表記されるようにappendChildでそれぞれの内容の結合を行った後、それをturndownでmarkdownにしている。 const { createClient } = microcms; const gfm = turndownPluginGfm.gfm; let turndownService = new TurndownService({ headingStyle: 'atx' , codeBlockStyle: 'fenced', preformattedCode: 'true'}); turndownService.use(gfm); // いくつかのoptionがある。headingStyle: 'atx'h2が##で表示される const client = createClient({ serviceDomain: env.Domain, apiKey: env.apiKey }); const endpointArray = ['category1','category2','category3','category4','category5']; const getAllContents = async (limit=100, offset=0) => { const category = endpointArray[0];//好きなendpointのカテゴリを指定する const data = await client.get({ endpoint: category, queries: { offset, limit } }) const materialContents = data.contents; const mainContent = document.getElementById("mainContent"); materialContents.forEach(element => { const p = document.createElement("p"); const div = document.createElement("div"); let title = `# ${element.title}`; let chapterContets = ""; for (let i = 0; i < element.content.length ; i++) { if(element.content[i]) { let codeBlock = (element.content[i].richEditor) ? element.content[i].richEditor : element.content[i].html; chapterContets += codeBlock; //各コンテンツごとに変数に格納。reduceで書いたもよかった気がする。 } div.innerHTML = chapterContets; } p.innerHTML = title; p.appendChild(div); mainContent.appendChild(p); //mainContentに取得したデータが全て格納されている。 }); let mainMd = turndownService.turndown(mainContent); blob 最後に、blobを用いて、htmlからmarkdown化させたmicroCMSの内容をファイルとしてダウンロードする。blobはインスタンス化する際に第1引数に変換する対象、第2引数にその形式を当てはめる。 本来はmd拡張子にしたかったが、確認できなかったため、txt取得する。もちろんファイルの中身はhtmlをそのままmarkdown化させているので大きな問題はない。 また、目的としてファイルダウンロードができれば、問題ないのでブラウザでhtmlを開いたら、目的のエンドポイントごとにmarkdown化されたファイルを取得できるようにした。 それを踏まえたのが下記のようなコードである。microCMSから取得したデータが格納されたpタグを生成した mainContent をまず、marakdown化して、その内容をblobで変換している。 main.js const { createClient } = microcms; const gfm = turndownPluginGfm.gfm; let turndownService = new TurndownService({ headingStyle: 'atx' , codeBlockStyle: 'fenced', preformattedCode: 'true'}); turndownService.use(gfm); // headingStyle: 'atx'h2が##で表示される const client = createClient({ serviceDomain: env.Domain, apiKey: env.apiKey }); const endpointArray = ['category1','category2','category3','category4','category5']; const getAllContents = async (limit=100, offset=0) => { const category = endpointArray[0]; const data = await client.get({ endpoint: category, queries: { offset, limit } }) const materialContents = data.contents; const mainContent = document.getElementById("mainContent"); materialContents.forEach(element => { const p = document.createElement("p"); const div = document.createElement("div"); let title = `# ${element.title}`; let chapterContets = ""; for (let i = 0; i < element.content.length ; i++) { if(element.content[i]) { let codeBlock = (element.content[i].richEditor) ? element.content[i].richEditor : element.content[i].html; chapterContets += codeBlock; } div.innerHTML = chapterContets; } p.innerHTML = title; p.appendChild(div); mainContent.appendChild(p); //mainContentに取得したデータが全て格納されている。 }); let mainMd = turndownService.turndown(mainContent); const blob = new Blob([mainMd],{type: 'text/plain' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `${category}.txt`; link.click(); if (data.offset + data.limit < data.totalCount) { const contents = await getAllContents(data.limit, data.offset + data.limit) return [ ...data.contents, ...contents ] } return data.contents } getAllContents(); まとめ このように、microCMSのAPIを元になかなか行わないであろうHTMlからmarkdownファイルへの変換を行うことができた。また、CDNなのでnpmでNode環境を利用しないことも簡潔で良いだろう。ただ、ネストを深めれば、カテゴリ用の配列から手動で行わずにファイルを取得する方法もあったり、無駄に冗長になった処理もあるのでコードのシェイプアップする必要はある。 こちらがgithubのソースコードである。