どもども！最近は一人暮らしの野菜不足を気にして、1gあたり1円のブロッコリーを250g食べる生活をしている龍ちゃんです。ブロッコリーランチボックスを作っているのですが、電子レンジが大活躍です。ランチボックスを作っておくことで、ふとした瞬間に食べることができるので最高です。白米があると白米を食べるのがネックです。福岡で育ったのですが、福岡の「どっから」の明太子を手に入れました。これを食べると最高に白米が進みます。さて、日記はこの辺にして本題に入っていきましょう。

今回は、「Tailwidで作ってみたシリーズ」・「自主開発アイテムシリーズ」・「Google Apps Scriptシリーズ」の合作になります。当ブログではAPIを作るためのお話を長らくやってきました。前回は「API仕様書を書くために」といったテーマで記事を投稿しましたね。本来はエクセルなどを使って作成するのですが、今回は趣向を凝らしてサイトにまとめてみました。

それではスタート！

あ！今回の成果物はこちらです。

事前知識【背景】

今回の仕様書で想定している技術は「Google Apps Script（通称：GAS）」です。GASに関しては、テックブログの方でも書いているのですが、Googleのサービスとの親和性が高く、メールを出したりGoogle Driveを操作したりと様々なことができます。

実は、GASには結構強めな制限がかかっているのですが、無料で扱うことができる良いツールですので嫌いにならないでください。その制限事項のせいで「REST API」を構築することが難しいです。その辺は、こちらの記事で熱く語っているので覗いてみてね。

この辺は、成果物の最初の方にも言い訳がましく書いてあるので読みたくない方は、スルーの方向でお願いします。

ワイヤーフレーム

今回もワイヤーフレーム作成しました。最近は、業務としてもFigmaを活用しているので日々レベルアップを感じています。同時に後退も感じているので一進一退というやつですね。永遠とFigmaの布教をしています。最近Figmaでのプロトタイプを作成する方法を学んだので、動かすことができるようになりました。やはりワイヤーフレームを作って、目指す形がはっきりしている際のコーディングは楽ですね。

今回気に入っている部分としては、requestとresponseの型の部分の表記ですね。こちらは、我ながら良い出来だなと思っています。

課題としては、レスポンシブデザインと色使いです。毎度、レスポンシブ対応を行っているのですが、今回のスマホレイアウトはすごく難しかったです。正直、自分の中では納得がいっていません。精進が必要です。色遣いに関しては、自分の中にセンスがないのでサイトから輸入をしているのですが、今回は悩んだ挙句わからなくなり諦めました。気に入ったサイトから輸入するのも手ですね。パレットを共有してくれているサイトも多数存在しています。結局は組み合わせになるのですが、半分以上考えることはなくなるのでお勧めです。

注力した点

力を入れた部分としてはここですね。情報を1枚のスライドレベルでまとめるように意識しました。なんと今回は、コード共有として使っていたGistをページ内部でも活用しました。最近、ブログにも使っているGistですが、コード共有にはとてもいいツールですので、使ってみてください。

今回は、requestとresponseのサンプルをそれぞれ1つのGistとしてアップロードしました。JSONの自動ハイライトがかかっているので大変見やすいです。GistではカスタムHTMLで挿入することで、いい感じにコードを表示してくれます。今回は、Gistでrequestとresponseをセットとして保存しています。

そのままの表示でも十分おしゃれなのですが、2つのファイルを挙げた場合、表示として微妙です。そのためrequestとresponseの見やすい切り分けのために、Gistのコードにタイトルを追加するコードを作成しました。ピュアJSでターゲットを補足して挿入する形になります。下にコードおいておきます。

詰まった点としては、「findbyIdで探してきたElementがforEachで回せない」という点ですね。一度展開して、配列に直すことで回避することができました。

今回のコードの場合ですが、Gistが特定の形になっているもの（2つのファイルが投稿されている）限定です。Gistに関しては、Classのプロパティ名が固定なので、CSSファイルを直に編集することでレイアウトのカスタマイズを行うことができます。この辺は、使いたいときに調べるといいですね。

最近は、Reactばかり書いているのですが久しぶりにピュアJSを書くと忘れていることが多くて新鮮です。書くレベルは上がっているはずなのですが、昔の自分との対決みたいで、楽しいですね。

終わりに

ブログの面白いところはあらゆるシリーズごとでつながりを作ることができる点ですね。同時並行的にブログを書いているので、たまに何を書いているか忘れてしまいます。今回は、クロスオーバー系の企画でした。次回は、今回の仕様書を基にGoogle Apps ScriptでAPIを作ってみようと思います。といいますか、それ専用の仕様書になっていますね。おそらくですが、年明け一発目は技術系の投稿になると思います。

最近、頑張ってブログを書いているのですが、一週間に2本ずつ投稿すれば一年後には86本投稿できる計算をして目標として頑張っています。

今年最後の投稿ですかね？新年のあいさつと振り返り記事は年明けに書いていこうと思っていますので、よろしくお願いします。

それでは～よいお年を

RyosukeTanaka