今回の案件の概要

ページ構成

基本的に、HTML、CSSコーディングでデザインを再現して、WordPress化までを担当。プラグインを使用しての会員システム構築は先輩フリーランスが担当してくれました。そして、コーディング、構築ともに、先輩フリーランスが間でチェックをしてくれる感じです。

• TOPページ
• カスタム投稿３種類、それぞれにアーカイブ、詳細テンプレート
• お問い合わせページ
• アバウトページ
• 利用規約ページ

機能

２つのカスタム投稿では、カスタムフィールド使用。１つはブログ風の投稿でオリジナルデザイン＋カスタムブロックでめあてのデザインを再現できるようにしました。CSS部分は基本的に私が担当したので、会員システムによって付随する会員ページと非会員ページの出し分けなどもありました。会員用コンテンツの上にオーバーレイ＋誘導のナビゲーションつけるという感じです。

「やるぞ」と決断するまで

コミュニティ内でにゆさんから提案があって、ちょうど案件をやってみたいと思っていた私は手を上げました。それまで、WordPressはテーマでの構築しかやっていなかったので、本を見たり、ネットの記事を調べたりして、「できそう」と確認をしました。
これまで、GatsbyJSにHTMLのテンプレートを入れて、構築するというのをやっていたので、基本的にはこれと同じ感じだったのが、決断の決め手でした。JavaScriptとPHP（WPテンプレートタグ）のちがいだったので、ググりつつ、そして何より先輩フリーランスのサポートを受けながらできるので、踏み出すことができました。

やってみると、いろいろなところで、先輩フリーランスにご迷惑をおかけいたしました。自分で「迷惑をかけるだろうな」と思っていた以上にです。しかし、踏み出した以上は、自分の恥がどうとかではなく、やりきるしかないと思い定めて突き進んでなんとか今があるという感じです。

仕事の基本的な流れ

プロダクトを誰かに提供するという仕事をしたことがない？と思っています。最初の方の仕事の仕上がりはかなりずさんだったと思います。（今もぜんぜんかも😅）

コーディング → デベロッパーツールでの各デバイス幅での表示確認 → 間の幅での表示確認 → 実機での表示確認 → 本番（今回はにゆさんに見てもらう）サーバーへのアップロードして表示確認。

最低限のフローとしてこんな感じでやっているということを知りました。

何をするにも、いろいろとっちらかってしまう私にとっては、段取りを組んで、それを忠実に守りつつ（もちろん臨機応変も必要）、やっていくのはかなり骨が折れました。今でも、そんなにきちんとできていませんし、「明日までに」ってなったりすると、雑に、いつの間にか工程飛ばしていたりもします。

そもそも、コーディング自体の進め方も、結構ぐちゃぐちゃなので、ここも意識したいです。Gitは使っていたものの、コミットの粒度とか、ブランチ切るルールとかとてもぐちゃぐちゃです。個人で練習したり、趣味でやる分にはいいのだろうけど、このあたりもいい感じでできるようになりたいな。

案件やるごとに、少しずつ積み上げて、自分にしみこませないといけないなと思います。次の案件では、もう少しいい感じで、１人だけど、チームでやっているようなつもりでやろうと思います。

オリジナルデザインでのWordPress

それまで、テーマを使ってこのブログを書いたりはしていたものの、フルスクラッチで構築するのは初めてでした。

「やります」と決めてからデザインの到着まで時間があったので、その間に、クライアントさんの別サイトを参考に、ローカルにサンプルサイトを作って、使いそうな機能をいろいろ実装して見ました。ネットの情報だけでは、やはり不安だったので、書籍を購入しました。

これはあとからかなり役に立ちました。ここで組んだコードをそのまま使うことも多かったです。その際には、先輩フリーランスが「次はこれやってみて」など、必要な機能をいろいろ教えてくれたことも大きかったです。

今は、あるところで教えてもらったプラグイン「Paste」にWordPress関連のフォルダを作成し、ループのコードやヘッダー・フッターの呼び出しのコードを保存しています。WordPressやっていくなら、こういうパターンを理解して、どれだけサクッと呼び出せる環境をつくっておくかで、仕事の質とスピードが変わってきそうです。

デザインを忠実に再現することとよしなにすること

「よしなに」ってこんなに難しいんだ！というのが、実感です。デザインには１２８０px幅と３７５px幅のがあって、間のデザインはよしなにってしようとするのですが、ここにも本当にいろいろな知見がつまっていると感じました。

こういうことって、学習段階ではややこしいので省かれているのだろうか。学習できるようなリソースもあるんだろうなとおもいますが、やはり、案件＝プレッシャーの中でやることで大きく成長できる感じがしました。

あとはデザインで余白の規則性がないところや並びがちょっとずれているところなどもあったりします。これは意図的なのか、それとも、作業の過程でちょっとずれてしまったのか、判断がつかないことがあります。こういうときは、きちんとデザイナーさんとコミュニケーションをとることが大事なのだということを学びました。今回は、間に先輩フリーランスが入ってくれていたので、「それはミスでしょう」とか「それは意図的」など先輩の経験でわかること＝業界では当たり前なことはそこでストップしてくれたのもありがたいことでした。

WordPress案件ではマニュアル作成も

私自身、初めてWordPressに触れたときは、けっこう複雑だなあと思っていました。それまでもライブドアとかFC2とかブログサービスは使ったことがあったのですが、それに比べるとできることが格段に多くて、操作も複雑でした。特にカスタムフィールドを実装すると、実装者にしかわかりにくいところがでてきます。

管理画面での編集と出来上がりのイメージを対比して、作業しやすいよう、また、全体的の中でのどういう作業かを確認できるように、意識して作成しました。

とても丁寧につくっているとほめていただきました！自己評価としては雑なところもあったのですが、素直に喜ぼうと思います。２０年くらい前、子ども用にパワーポイントで社会のスライドを作るマニュアルを作ったことがあったので、そういうことが活きているのかなと思いました。

IE対応

すでに多くのところで必要はないし、これからどんどん必要なくなるかもしれませんが、今回の案件では対応することになったそうです。ここでも、ネットの知見がとても役立ちました。例えば、

height:autolにはみmin-width:1px;をセットにしないと、autoが発動しない。

とか。はじめに、発見した人は、IEがCSSをどう解析しているのかを調べて、その上で、この対応を見つけているのだろうなと想像しました。それとも、IEの公式からでているのだろうか？いずれにしても、ググればわかるという環境はほんとにありがたいです。

まとめ

表示については、先輩フリーランスの指摘、ディレクターさんの指摘のおかげで、なんとかできているという感じです。自分ひとりで品質を保つというところまでは正直まだまだです。また、ぼくの提供できる品質ももっともっとレベルを上げていかないといかんなと思っています。

今はまだ副業ですが、いずれ本業にします。それまでにしっかりとレベルを上げていきます。とても楽しみです。

https://www3.nhk.or.jp/news/html/20211122/k10013357701000.html

www3.nhk.or.jp

日本の公立学校の体育教育のあり方について、いろいろ考えました。ぼくは小学校ですが、今まで体育でやっていたことが、少しつながるのではないかと思って、記事を書こうと思います。雑感的なものなので、なにか根拠がはっきりとしているわけではありません。

記事を読んで「つながる」って思ったこと、そして、けっこう実践されているだろうこと。

デッキブラシを越えてプールに飛び込むよう指示し

https://www3.nhk.or.jp/news/html/20211122/k10013357701000.html

ここがポイントです。きちんとは調べていないのですが、想像するに、飛び込みの姿勢や入水の角度を指導するにあたって、目安となるものを使って「こうすれば、自然と正しい飛び込みになる」ということをしたかったのではないかと思うのです。小学校でもこんな感じの指導法はけっこうあって、うまくいけば、課題をクリアできたりして、子どもにも達成感があるわけです。もちろん、その方法の安全性が問われているわけで、そこに教員は専門性を持ってのぞまないといけないのはそうなのですが。

小学校では、よく、とびばこの前の方３分の１あたりにガムテープなどを貼って、「これより前に手をつく」ように指導したりします。こうすることで、自然と体が前傾姿勢になって、とびばこをとびこえられたりするのです。子どもも「やったあ！」となったりします。

でも、結局は、怖いからそれができなくて、無理にやろうとすると、からだが縮んでしまう。先生との信頼関係があればあるほど、信じ切って思い切りやってしまう。でも、体の機能や神経系の発達や、もろもろ追いついていなくて、マットに顔からとびこんでしまうみたいなことが起きてしまわないだろうか。最近の子どもはこけたときに、とっさに手をだせないみたいな話も聞いたことがあります。

なぜこんなことが起きたのか。

「飛び込みできること」が評価の基準にあって、それをすることは疑いのないことだという状況。生徒にとってもそれが良いことなんだと考えているかはおいといて、きょういんの仕事はそれをできるようにすること。そんなマインドがあります。

あまり考えずに、まず「どうすればできるようになるか」を考えてしまう。これが１つ目の原因。

なら、専門性をしっかり学んで安全なやり方ですることも仕事でしょとなります。全くそのとおり。でも、それができなかったのはなぜか。それをできる環境がないのです。
小学校で言えば、さきほどのテープをはる方法は、その意味や気をつけることより先に、その方法だけがどんどんと広まるわけです。なぜかって？全員がその専門性について学んでいられないからです。

図工・体育・国語・家庭科・・・。最近専科進んでいるとはいえ、まだまだです。家庭科は担任というところも多いですし、専科の先生も２０時間／週の非常勤の先生だったりもします。専科になれば、そこから「専門性」を深めることができますが、担任をしている間は、どれだけの専門性を深めないといかんのか？？？という状況です。

もちろん、安全性は必ず担保しなければならないというのが前提にはありますし、そういうことをいつも考えています。でも、今回の例でもそうですが、「これいいよ！」という方法は、得てして、そのあたり抜きにどんどんひろまってしまうことも多いです。

もう一つは、体育に「競技」性が求められすぎているところです。高校野球なんかもそうですが、日本の学校では体育において研究されがちなのが、その技術をどうたかめるかっていうところです。だから、デッキブラシを超えて飛び込みの練習するし、跳び箱にガムテープはるわけです。そもそも、それをできるようになることがそんなに大事か？って話です。

専門家招聘して、専門的に指導してくれるあ、あるいは、各教科全く専科にして、それぞれの専門療育を深める時間を保証するかそれくらいするのなら、今やっているようなこともできるかもしれませんが。ただ、そもそも、指導要領では「生涯スポーツを楽しむ」という観点が最も重要視されているはずなのですが、現場がそうはなっていないというのも、改善の余地ありです。

学校での体育では何をめざすのか

そもそも、跳び箱飛べたら？飛び込みできたらどうなの？って考えるマインドがないから「これいいよ！」っていうものに飛びついてしまいます。自分で１つひとつ研究する時間なんて与えられていませんから。朝勤務時間前から子どもがやってきて、１５：３０ごろまで授業をして、その後、１６：３０くらいまで、課題をクリアできていない子ども残して、その後はもろもろ事務仕事をして・・・。教材研究の時間なんてほんのわずかです。

こんなシステムの中で、一つひとつの専門性なんて言われても・・・という状況なわけです。これは間違いなくシステムの問題です。でも、最終的には、教員個人に責任はかかってくる。

じゃあ、なんでこういう飛び込みとかとびばことかが残っているの？そこには日本の学校教育の中にあるなにかがあるわけです。「がんばって何かを成し遂げること」を「成し遂げさせる」みたいなところです。何かを成し遂げるのは本人であって、「成し遂げさせる」ことは大切なのか？もちろん、それをきっかけにステップアップする子どももいますが。

でも、学校でいろいろな子どもが一緒にやる体育では、体を動かすことを楽しむ」これ一点にしぼって、１人でどう楽しむか、みんなでどう楽しむか、みたいなところを追求するのがいいのではないかなと思うわけです。そんな中で、なんかちょっと体動くようになったぜっていうところ、これが一番大事で、「させられる」を最大限、取り除きたいなというところです。

最後まで読んでいただいてありがとうございました！
ちょっとさくっと書きなぐっただけの記事です。自分の記録としての意味が大きいので、読みにくかったと思います。
発信の軸がまだぶれぶれなので、末永くお付き合いください。

とっちらかっていろいろ学習していて、 現在は、WordPressのオリジナルテーマ開発をしているので そのあたりで連絡頂いたということでした。

正直なところ、解決できる自信はありませんでしたが、 エラー解決は嫌いではないのでzoomでコードを見せてもらいつつ対応。

コメントの日付表示の後ろに、このエラーメッセージが出てきていました。 nullの変数に配列型でアクセスしているよ！ということはわかりました。 ぐぐると、すぐにいろいろ記事が出てきました。 このエラーメッセージがレンダリングされているってのも気になったのですが、 とりあえず、この変数にアクセスする前に、 それがnullでなくて、値がセットされているかどうかを判定する isset()で解決できそうでした。

市販の有料テーマのコードだったので、 とても複雑だったのですが、エラー時の表示や吐き出されたHTMLを見たりして、 「ここか！」というところを発見したので、 そこに isset()をかませるととりあえずエラー表示が消えました！

エラーが解決できるとやはり嬉しいです。

参考： PHPドキュメント OFFICE OBATA様

その１回目のデザイン案をいただきました。そのときに、トップページにアニメーション指定があったので、あらかじめ、実装してみたので、CSSアニメーションについてまとめます。

基本：@keyframesでアニメーションの流れを、animationプロパティで動き方を指定する方法

@keyframes

まずは、アニメーションの動きの設定。要素の状態を記述していきます。たとえば、文字サイズをだんだん大きくするものであれば、font-sizeプロパティの値を変化させます。

下の例では、h1要素に対してアニメーションを指定しています。

See the Pen by Son Hiroki Hong-su (@sonho463) on CodePen.

@keyframesでは
・アニメーションの名前を設定
・0%から１００％の間でプロパティの値変化を記述
フォントサイズ36px　→　最後に64pxを指定しました。
0%のときの値は省略できます。

ここにいろいろまとめて記述もできます。
例えば、ここで、opacityなども合わせて記述すると、文字が大きくなりながら、透明度も変化させるといったことがかんたんにできます。

animationプロパティ

次に、アニメーションを付与する要素に、animationプロパティを追加していきます。

h1{
animation-name: bigger;
animetion-duration: 3s;
animation-fill-mode: forwards
}

animation関連のプロパティは全部で８個ありました。

animation-name / animation-duration / animation-timing-function / animation-delay / animation-iteration-count / animation-direction / animation-fill-mode / animation-play-state

今回はそのうち３つを指定しています。

animation-name

@keyframesで設定した名前。どのアニメーションを付与するか。これだけでは、まだ動きません。

animation-duration

アニメーションの経過時間を設定。sまたはmsで指定します。

animation-fill-mode

アニメーションが終わったときの挙動を設定します。
none（デフォルト） アニメーションが終わったら最初の状態　
forwards アニメーションの最後の状態を保持
backwards　アニメーションの最初の状態にもどる
both　両方・やってみるとforwardsと同じ挙動でした。

アニメーションが終わって最初の状態か、最後の状態かというところしか必要ないようにしか思えていません。だけど、これからいろいろ複雑なアニメーションになってくると、４つの値を使い分けないと行けないときがくるのだろうと思っています。

やってみて

１．対応していないプロパティ

例えば今回はbackground-clip:text;が当てられた要素にアニメーションを付与して、アニメーションが終わったら、background-clip: unset;にしようとしたかったので、１００％のところにunsetを設定しました。すると、unsetが先に実行されてしまいました。

いろいろ考えて、最終的には、animationではなく、JavaScriptとtransitionを組み合わせて、そこに、さらに、setTimeoutを使ってゴリゴリに思い通りの挙動に持っていきました。

なにかもっとスマートな方法がありそうな気がしています。ご指摘ください。

２．複数のアニメーションのタイミング

複数のアニメーションを同時に付与できるのですが、このタイミングの制御がとてもむずかしいです。animation-delayプロパティを使って、タイミング制御しようとしたのですが、あまりうまく行きませんでした。今後の研究課題です。

まとめ

もっともっと、animationをたくさん使っていきたいなと思います。

アニメーションのもりすぎは良くないですが、自分の事業用サイトなど作るときには、１つのアピールになると思うので、いろいろかっこいいアニメーションを眺めて、自分で再現するなど、今後は練習を重ねていきたいと思います。

参考URL

MDN – animation
【CSS3】@keyframes と animation 関連のまとめ

４回目の勉強会を終えました。
今回のテーマは次です。

ヘッドレスCMSで爆速ブログ構築

今回は、microCMSというヘッドレスCMSをデータベースにして、Gatsbyでブログサイトを構築しました。勉強会では、あらかじめ、そんが作成したサイトをGatsbyのスターターにして、ブログサイトを構築する様子を見てもらいました。

スターターはこちら　＞＞＞

しかし、今回、最後GitHubへのプッシュのときにトラブルが発生し、結局、そこを解決できずデプロイまでのようすを見てもらうことができませんでした😣

振り返りも兼ねて、このブログで上記ブログサイトを作る過程を記事にしていこうと思います。

まずは、今回の勉強会でぼくが学んだことについてここに記しておこうと思います。

何かを世に出すということの大変さ

今回は作成したブログサイトをGatsyのスターターとしてお知らせするというつもりだったので、細かいところまでしっかり作り込まないといかん！と思っていました。
そう思うと、今まで自分がプログラミングしたり、サイト構築するときに、いかにアバウトな感じでやっていたのかを思い知らされました。

• 見やすいコードの書き方
• コメントをどう入れるか
• READMEファイルに各説明

サイトの機能面でも、作り込めば作り込むほど、もうちょっとこうしたほうがいいかも、とか思って、次々と改善点が見えてきました。どこかで、切らないとおわらない感じ。ちゃんとだれが使うのかをイメージして、取捨選択が必要になるのかなと思いました。
今後も少しずつ改善していきたいです。

Gatsbyのサイト構築について前よりも深く理解

GatsbyはReactベースのフレームワークですので、実は、個々でやっていることのウラで、React、JavaScriptがいろいろとよしなにやってくれているのですが、それでも、難しくて、なんでこうすればこうなるのかということが理解できないことも多かったです。
しかし、今回、一からブログサイトを調べながら作ってみて、いろいろなことを理解できました。

• Gatsbyが各記事ページを生成するCreatePageというAPIのこと
• GraphQLからデータをとるときに、Nullだといろいろ大変で、その対応の仕方

などなど。
このあたりはこれから、切り分けつつ記事にアウトプットしていこうと思います。と、同時に、ベースになってるReactやJavaScriptについてももっと勉強したいなあと思いました。

microCMSでは、gatsby-plugin-imageに対応していないため
graphqlで画像データが渡ってこず、URLだけ渡ってくる仕様。
どうやって画像の最適化をしようかな

microCMS運営さんにチャットで問い合わせ

チャットで問い合わせをしました。

いつもお世話になります。 GatsbyとmicroCMSでブログを作ろうとしています。 gatsby-plugin-imageで>microCMSの画像を扱いたいのですが、graphqlのデータを見ると、urlとwidthとheightしかわたってきてい>ないので、扱うことができません。 なにかやり方があるかご教示お願いしたいです

ご丁寧に対応いただき、次のことがわかりました。
・ImgixというCDNを通して、APIを利用するとよい

あとから考えれば、ドキュメントなどをしっかり読めばわかりそうなことでした😅

Imgixを使って画像を最適化

Imgixとは

公式サイトより

Powerful image processing, simple API
imgix transforms, optimizes, and intelligently caches your entire image library for fast websites and apps using simple and robust URL parameters.

強力な画像処理、シンプルなAPI
imgixは、シンプルで堅牢なURLパラメーターを使用して、高速なWebサイトやアプリ用に画像ライブラリ全体を変換、最適化、およびインテリジェントにキャッシュします。

microCMSの画像タイプのコンテンツは基本的にこのCDNを通ってくるということなので
ここのAPIでできることが基本的にできるということです。

やりたいこと

1. レンダリングのときに、画像のサイズ、容量を節約
2. サイズの調整やトリミング

Imgixでは

Rendering APIを使うとできそう。

画像URLの最後に?をつけて、その後にいろいろなパラメータを付けることで、画像に対していろいろな処理ができます。
例えば

https://<graphqlで渡ってきた画像のurl>?w=200

とすると、画像の幅を２００（ｐｘ？）に設定できます。
その後ろに&でつなげれば、複数のパラメータを付けることができます。

いろいろオートの設定もありました。
例えば
1. 画像の圧縮　auto=compress
基本的には７５％。q=で圧縮率を指定することもできます。
2. フォーマット選択　auto=format
対応しているブラウザなら、自動でwebp形式に変換してくれる。
3. 画像のトリミング　ar=2:1&fit=crop&fp-y=0.5"
アスペクト比と中心を決めてトリミングできます。切り抜いた部分以外はデータとしても削除。（残す設定もできる）

とりあえず、今回のプロジェクトでは、
この３つを設定することにしました。

ブログの記事ごとのアイキャッチ画像に対して
これらの加工をして、
各記事ページタイトルのバックにおくことにしました。

実装したコード

• 各記事のテンプレートファイル post-template.js

<MicroCmsImage                                   
  url={data.microcmsPosts.eye_catch.url}                                     
  compress="auto=compress"                                   
  format="auto=format"                                   
  ar="ar=2:1&fit=crop&fp-y=0.5"
/>                              />

• 画像をレンダリングするコンポーネント　microcmsimage.js

import React from "react"
import styled from "styled-components"

export default function MicroCmsImg(props) {
  // imgタグを親要素に対して幅いっぱいに表示する
  const ImgWrapper = styled.img`
    width: 100%;
  `
  const { url } = props // 画像のURL
  // url以外のパラメータを１つの文字列型変数にセット
  let array = Object.values(props)
  let param = ""
  array.map(function (elem) {
  // propsの最初はurlなのでそれは入れない
    if (array.indexOf(elem) !== 0) {
      //最初の要素は?をつける
      if (array.indexOf(elem) == 1) {
        param = `?${elem}`
      } else {
        param = `${param}&${a}`
      }
    }
  })

  return (
    <>
　　　// imgのsrcにurlとparamをつなげたものをセット
     <ImgWrapper src={url + param} alt="" />
    </>
  )
}

Imgixではもっといろいろできます。

例えば、画像にフィルターをかけることもできます。
モザイク加工したり、blur効果つけたり。
顔認識でそこにクローズアップとか。
文字入れたり、ノイズリダクションに回転。

gatsbyプロジェクトでは、
対応していればgatsby-plugin-imageが使えますが、
そうでないプロジェクトなら、
これを使うのもいいかもしれません。

２回めを終えたときの感想もまとめました。

勉強会ドリブン学習法

今回の勉強会では

わたしがずっと学習しているGatsbyでヘッドレスCMSを使ったブログを作ります。
ヘッドレスCMSの中でも、唯一（なのかな？）の日本製、microCMSを使うことにしました。

ヘッドレスCMSサービスはいろいろあるんですが、英語が多くて・・・という人もいるのではないでしょうか。
もちろん、勉強会でやった「ヘッドレスWordPress」も１つの選択肢なのですが、せっかくなら、勉強がてらつくってみようと思いたちました。

勉強会では私がつくったブログをスターターにして、サクッとブログを構築します。
その後、Gatsbyでブログ記事が自動的にできていく仕組みやちょっとカスタマイズする方法などを
解説していこうと思っています。

今回の勉強会はこちら

なぜ、StartBootstrap?

使うテンプレートはStartbootstrapで配布されているClean Blogというテンプレートです。

これでピンと来た人がいるかも知れませんが、UdemyのWordPress開発講座（たにぐちまことさん）で使用されているテンプレートなのです。

私自身が、その講座をやっていて、そのときに、
なるほど、こうやってHTMLサイトをWordPressに変身させられるのか・・・！！
と気づいて、これをGatsbyでやってみたい！と思ったのです。

この講座で学んだことがとてもやくだっていますし、
でも、PHPとJavaScriptはちがうなあと思いながらコードを組んでいくのが
今、とても楽しいのです。

たくさんのご参加おねがいいたします

今、ウェブ制作学習中でも、ブログ構築まではサクッとできるようになると思います！

デプロイまで無料でできます！

まずは、練習で体験に来てみてください！

ヘッドレスCMSで爆速ブログ構築~Gatsby-StartBootstrap-microCMS

ここで紹介するCanvaを使えばそんな悩みとはおさらばです。

この記事ではサクッとおしゃれなチラシを作成できる方法を紹介します。

デザイン作成ツール Canva Pro

あらゆるものをデザイン。Canvaのコンセプトです。その名の通り、チラシだけでなく、YouTubeサムネイル、インスタの投稿などのSNSに必要なもの、プレゼンスライド、ロゴマークなどいろいろなものをデザインできます。

豊富なテンプレート

特徴の一つが、とってもたくさんあるテンプレート。これがあるおかげで、素敵なデザインのものをサクッとつくることができます。

英語のものがほとんどですが、ご安心ください。編集し始めると、日本語フォントも豊富に揃っていますので、イメージに合わせて使用できます。

たくさんあるテンプレートはいろいろな方法で検索ができます。

カテゴリの検索

まず、作りたいものの種類を選択して編集画面にくると、左側に検索できるところがあります。開くとすでにいろいろなカテゴリに分けてテンプレートが並んでいます。

最近使用した項目、あなたへのおすすめ、新型コロナウイルス、この後は迷子犬のチラシ、ビジネス用チラシ、イベントのチラシ・・・といった具合に続きます。それぞれのカテゴリの「すべて表示」を押すと、そのカテゴリのテンプレートがズラっと出てきます。

色による検索

キーワードによる検索

セミナー、飲食店、かわいい・・・などいろいろなキーワードで検索もできます。

例えば、ぼくなら「学校」とキーワード入力するとサジェストもでてきます。出てきたテンプレートの…マークをクリックすると、いろいろなキーワードも出てくるので参考にできます。

いよいよ制作

テンプレートを決めたら、いよいよチラシ制作にとりかかりましょう。今回はこのテンプレート。とてもシンプルですが、タイトルとテキストのジャンプ率なんかもいい感じで設定されているので、あとは、テキストを入力していくだけです！

とりあえず、タイトルとその上のところ。

canvaをさわっていてさいしょにとまどったのが、

大文字しか打てない問題でした。

フォント設定などの並びにある…をクリックすると

こんなのがでてくるので、左から２番めの aAというのをクリックすると小文字も出てくるようになるので、お好みで設定してください。

で、あとのところもテキストを編集すれば、表面完成！

テンプレートを選んでから10分とかかりませんので、ぜひ一度お試しください！

Canvaサイトへはこちらから！

おそらく正確にはXcodeのコマンドラインツールを使用する時ということと思っています（まちがいならご指摘お願いします）

そして、これが起きるのはMacOSをアップデートしxた後です。エラーメッセージをみると、「パスが見つからない」ということのようです。

以下の対応で解決します。

起きる現象

% git --version

->
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

対応

% xcode-select --install

ダイアログにしたがってインストールします。

疑問

MacでGitをインストールするのにいくつか方法があります。

1. Xcodeコマンドライツールを使う
2. 公式からダウンロードしてインストール
3. Homebrewでインストール

Homebrew使うパターンやインストーラーでのインストールだとアップデートのときに、いちいちこの減少は起きないのだろうか？

参考にした記事

バージョン管理システム入門　Git のインストール 〜Git をMacにインストールしよう〜

macOSアップデート後の『xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools)…』の対処法

Gatsby v3 Incremental Builds in OSS, new Gatsby Image, and more | Gatsby

We are excited to announce Gatsby v3.0! This new version of Gatsby’s core framework introduces massive improvement to the developer and user experience.

www.gatsbyjs.com

意外とサクッとできました。この機会に、gatsbyブログをもう少しいい感じにカスタマイズしていきたいと思います。どんなふうにしたかをメモにして残します。

何はともあれ新しいgatsbyにアップデート

% npm install gatsby@latest

@latest 最新バージョンを指定しているのです。

依存関係の更新が必要なものをチェック

% npm outdated

~/environment/bochibochi-blog npm outdated +[main]
Package Current Wanted Latest Location
@wordpress/block-library 2.28.2 2.29.1 2.29.1 gatsby-starter-wordpress-blog
gatsby-image 2.11.0 2.11.0 3.2.0 gatsby-starter-wordpress-blog
gatsby-plugin-manifest 2.12.0 2.12.1 3.2.0 gatsby-starter-wordpress-blog
gatsby-plugin-offline 3.10.0 3.10.2 4.2.0 gatsby-starter-wordpress-blog
gatsby-plugin-react-helmet 3.10.0 3.10.0 4.2.0 gatsby-starter-wordpress-blog
gatsby-plugin-sharp 2.14.1 2.14.3 3.2.1 gatsby-starter-wordpress-blog
gatsby-source-filesystem 2.11.0 2.11.1 3.2.0 gatsby-starter-wordpress-blog
gatsby-source-wordpress 4.0.0 4.0.6 5.2.3 gatsby-starter-wordpress-blog
gatsby-transformer-sharp 2.12.0 2.12.1 3.2.0 gatsby-starter-wordpress-blog
lodash 4.17.20 4.17.21 4.17.21 gatsby-starter-wordpress-blog
react 17.0.1 17.0.2 17.0.2 gatsby-starter-wordpress-blog
react-dom 17.0.1 17.0.2 17.0.2 gatsby-starter-wordpress-blog
react-helmet 5.2.1 5.2.1 6.1.0 gatsby-starter-wordpress-blog

まとめて更新

updateをチェックしてまとめてアップデートしてくれる’npm-check-updates’というツールを使います。そのツールをインストールします。

% npm install -g npm-check-updates

これで、ncuコマンドを使えるようになりました。

% ncu -u

ちょっと乱暴ですが、まとめてアップデートのコマンド。これで、package.jsonの中身が最新版になります。

% npm install

で、パッケージを最新版にインストールしなおします。

% npm outdated

で確認すると、何も出てこなかったので、続けて

% gatsby develop

すると無事サーバーが起動して、ブログが表示できました。