8月8日のCoderDojo伊予（オンライン）にメンターとして参加しました。
春頃はマイクラを少し試してみたりしていましたが、Scratchはしばらく作っていなくて、Dojo開催のたびによく引っかかる（思うように動かない）クローンを使ったサンプル的なアプリを作った程度でした。
で、今回のDojoで何を作ろうかと考えて、音の使い方が気になって作ったのがこちら。
音源はすべてScratchのライブラリにあるものを使いました。コード名のボタンを押すとメッセージを送るようにして、メッセージを受け取ったら音を鳴らす形で和音になるようにしてみました。ただし、これを作ったときは Music Extension に気がつかず、タイミングを揃えるのにミリ秒単位で微調整するなど、あまりスッキリとはできていません。
…と、ここまで書いたところで続きはCoderDojo伊予のサイトに書きましたのでよろしければこちらをご覧ください。
今年度はメンテナンスされていない jQuery の Vanilla JS への置き換えと、可能なものは成果物をGitHubで公開する取り組みを中心に仕事をしています。
以下、今年8月までの主な実績です。
JSについては、過去のjQuery資産が古いライブラリのまま放置されているケースが多く、携わる部分については Vanilla JS に置き換える取り組みを行なっています。
また、課題管理についてはこれまで Trello を使うことが多かったのですが、並行して GitHub Project の活用を進めています。以前に GItHub Project を試した際はカードを並べて動かす(ToDo -> Doing -> Done)ところまでで、使い方が中途半端だったようで、今回は個々のカードをIssue化することでカード内での細かいやりとりが可能になり、リポジトリとの紐付けも自然にできるようになりました。
やらないことリスト(Not ToDo)については、ひとまず ToDo と同レベルでカードに登録して運用しています。Close で閉じてしまうと目に入らなくなるので、なるべく目に入りやすいところに並べる形にしています。
GitHubへの公開についてはまだ一部ですが、公開に取り組むことによって、例えば非公開にすべき情報は環境変数に置き換えるなど、汎用的かつ見通しをよくすることをより意識するようになりました。また、公開・非公開は別として、複数の案件をリポジトリ管理することで、縦軸・横軸で眺めることができるので、後から追加の要望があった場合など、少ない手間で柔軟に対応できるなど、いろいろとメリットが多いです。
Setup & Deployment -> Heroku – Strapi Docs
上の記事に沿ってローカルに構築してHerokuにデプロイ。
デプロイ先のHerokuはStrapiのproductionになる。
heroku config:set NODE_ENV=productionHerokuの環境を確認する場合は、
heroku configデプロイ先で Content Type の追加ができなくて戸惑ったのですが、それがproductionモードということでした。
Project updates – Strapi Docs
なのでローカルで、
yarn developとしてdevelopモードで立ち上げて Content Type を追加。
適宜、追加した Content Type で記事を追加してみる。
確認ができたら Heroku へ push。
git add .
git commit -m "create post type"
git push heroku HEAD:mainHeroku の Project url を開いてログインし直すと追加した Content Type が確認できました。
普段はシェルから操作することが多いのですが、VS Code の使い方を確認しておこうと思いまして。
VS Code左側のメニューで Source Control を選択して Clone Repository をクリック。
入力ダイアログで Clone From GitHub を選択。アプリの認証が要求されたら適宜認証を進めて完了させる。
リポジトリ名を入力。（GitHub側にリポジトリが作成されている前提）
クローン先（ローカル）の場所を指定(Select Repository Location)。
例えば Local の WordPress環境 で子テーマを作成して GitHub で管理する場合は
.../(sitename)/app/public/wp-content/themesのような場所になります。
クローンできたらOpen。
適宜WorkSpaceを名前をつけて保存するなど。
Ghost に続いて Headless CMS の Strapi を試してみます。
Quick Start Guide – Strapi Developer Documentation
npx create-strapi-starter my-project gatsby-blogこのコマンドを実行するともろもろインストールが進んで installation type が聞かれるので Quickstart を選択。
インストールが完了すると admin panel と Gatsby blog がブラウザに表示されます。
自分自身を writer として追加します。
タイトル、説明、本文を入力します。そしてカテゴリーと作者を適宜選択。
Publish をクリックして公開 … と思ったら公開できず…?
本文の下にある image 項目が必須になっていました。
ということで適当に画像をDrag & Dropで追加。
ちなみにarticleの編集画面から「表示設定」を開くと、
このような画面でレイアウトが編集できます。
とりあえずの記事ができたので Publish。
ここでサイトに反映するには ctrl + c でサーバーを一旦停止して再起動する必要があります。
cd my-project
npm run developカテゴリ:Newsで公開済みのサンプル記事があったので非公開(unpublish)にして、新規作成した記事の表示を確認。
という流れでブログ記事の追加・公開ができました。
Ghost をmacOSにインストール。
| 14.x (Node v14 Fermium LTS) | Recommended |
手元の Node.js が少し古かったようでインストールが進まず。
nodenv install 14.17.1
nodenv rehash
nodenv global 14.17.1
npm install ghost-cli@latest -gghost-cli がインストールできたので作業用の空のフォルダに移動して
ghost install localダッシュボードはこのような感じです。
サーバーのIPアドレス、ポート番号の設定を確認。config.development.json
...
"server": {
"port": 2368,
"host": "127.0.0.1"
},
...ローカルに作成したサイトは
~/.ghost/configこのファイルで管理されている様子。
Twitterのタイムラインで「GoogleCloudスキルバッジ」というキーワードを見かけて、良い機会なのでGCPを勉強してみることにしました。
最初、Qwiklabsがどういうものか分からなくて戸惑ったのですが、学びたい課題を選んでスタートするとセットアップ済みのプロジェクトが用意されたり、生徒用のアカウントが発行されたりするようです。
そして、ブラウザのincognitoウインドウを開いて発行されたアカウントでログインして課題を進めていくと進捗状況が表示されて、所定の課題を完了すると課題に応じてバッジが発行される仕組み。
注意しないといけないのは、例えばVMインスタンスを立ち上げる場合など、所定のリージョンに設定する必要があったり、決められたスペックにしないといけなかったり。リソースの使い方を間違えるとアカウントがロックされることもあり、その場合はサポートに連絡して解除してもらう必要があります。私自身、何度か失敗してお世話になりました。m(..)m
これまでGCPについてはたまに初心者向けのハンズオンで使った程度で詳しくなくていきなりチャレンジラボだと失敗することもあるので、カタログの中から入門や基礎レベルを選んで進めるようにしてみました。
課題を進めていく中で、説明にあるメニュー（項目）がなかなか見つからなかったり、コマンドを実行してもすぐには反映されないことが多かったりして時間制限の中で焦ることもありますが、何本か課題をクリアしていくにつれてコンソールの操作や処理時間など感覚的なものが掴めてきて、指示通りに操作して完了できるようになりました。
上級とかエキスパートの課題は未着手ですが、まだ少し日数があるのでいろいろ学んでみようと思います。
GoogleデータポータルでAnalyticsのデータを接続してキーワード分析を表示すると、大半が(not provided)になってしまいます。
ここで Search Console を活用。
データポータルの「データ」に Search Console を追加します。
サーチコンソールで設定しているサイトを追加。
ひとまずテーブルを Site Impression に
Property Parameter を web にして追加。
データポータルの編集画面でチャートを追加(Add a chart)。
Data source, Dimension, Metric を設定。
(not provided) や (not set) を含まないクエリ分析ができます。
2019年秋頃からCoderDojo伊予のメンターとしてお手伝いをしています。最初のイベントはこちら。↓
第0回 CoderDojo伊予［リハーサル会］子どものためのプログラミング道場：メンター募集
Dojoの運営にあたって情報共有や課題管理を GitHub の Organization で始めてみたのですが今ひとつ馴染まない感じで、今は
のような運用をしています。これで毎月Dojoを開催するとそれなりにやることがあって、特にチャンピオン（Dojoの運営者）の方にあらゆる作業が集中しがちになります。
ということで、少しずつでも何か自動化できればと思ってSlackのbotを作ってみました。目的は次回イベントのメンターの参加確認です。GitHubに公開したGAS(Google Apps Script)はこちら。↓
github.com/kazweda/slackbot-coderdojo-iyo
CoderDojo伊予のconnpassグループ を対象として、当月のイベントのタイトルとURLをconnpassのAPIを使ってSlack(CoderDojo伊予)の #イベント運営 というチャンネルに毎週1回流すように設定してみました。
以前は参加人数が多くて心配なのはWi-Fiや電源の確保ぐらいだったのですが、コロナ禍においては現地での参加人数を抑えて、それに合わせてメンターの現地参加も配慮（調整）するようにしています。
CoderDojoの運営のなかでいろいろと配慮しているうちに手作業が増えてしまって、さらに年末年始の時期と重なったりして連絡を忘れたりすることがあったので、作業のフローを見直しつつ自動化の仕組みについても勉強していければと思います。
