ニューヨークのGatsbyjsミートアップ情報2020年2月
そもそもミートアップって何？
お洒落なニューヨークのITオフィスで開催されてるGatsbyjsミートアップに行ってきました。日本にもミートアップはありますね。一言で言うと、個人が作れるパブリックイベントの掲示板というところでしょうか？ミートアップというウェブサイトに行くと、個人（もちろん法人も）で作成したイベント下のイメージのようにずらっと並んでいて、、
登録すればどんなイベントにも参加できるようになっています。もちろんイベントに寄っては有料のもので、完全に営利目的で行なっているもの、また個人が開催してるのに人気でなかなかとケットが取れないものとか、無料の上に食べ物屋飲み物も付いてくる会とか、プライベートのイベントで招待者にしかイベント内容が分からないものもあります。用途は本当に様々で、デート、出会い系のもの、プログラマーのミートアップで新しい技術を学ぶグループとか、ボランティアベースのものと数え切れません。基本は主催がどんな人なのか、どの会社で働いてるのか、等々が明記してありますが、日本人にしてみると多少抵抗感があるかもしれません。しかし、こうしたカジュアルで、いつもと違う人にいきなり会って、勉強して帰る、的な感覚はアメリカ人にとっては文化的に合うのです。
Gatsbyミートアップで何をやってるの？
今回のGatsbyミートアップは2020年2月の13日に、Taboolaと言うITの会社で行われました。ニューヨークのITの会社は内装がお洒落、でこんなところで働いてみたい！ですね。因みに以前こちらのブログでも説明しましたが、アメリカのIT会社はプログラマーにストレスなく働いてもらう為の最大限の工夫がしてあり、Taboolaも成功してお洒落なオフィスを持った会社の一つです。
ちなみにGatsbyのミートアップウェブサイトはこんな感じです。
主催側はGatsbyjsのコミュニティを広げる目的でやってると説明していますが、無料で食べ物、ビールまで出てくる、スポンサー付きのミートアップです。スポンサーはAONと言うソフトウェアを作っている会社のようです。
今回のGatsbyミートアップのトピックGatsbyイメージプラグイン
今回はGatsbyイメージプラグインをどのように使うかの講座でした。 ちゃんとしたフロントエンドのデベロッパーなら知っていると思いますが、現代のウェブサイトを作成するに当たってイメージデータの圧縮はSEOにとって重要なキーです。なぜなら、イメージデータはとても重く、プロであればウェブサイトのスピードを上げるためにはスクリーンサイズに合ったイメージのデータを複数作成して、スクリーンの幅が変わると同時に表示するイメージサイズも変えるプログラムをする必要があります。現代では画像が与えるウェブページのインパクトはとても高いのですが、スクリーンサイズによって表示イメージをスワップするコードを書くのは結構手間です。またサイズだけではなく、レイジーロードと言って、イメージのデータが全て読み込まれてなくてもイメージを表示するテクノロジーが必要です。もちろんWordpress等々のウェブサイトビルダーはデフォルトでやってくれます。設定を確認しましょうね。
そして、トップを目指すGatsby、もちろんそのイメージプラグインが一枚のイメージを挿入しただけで全てやってくれるのです。また、Blur upテクノロジーと言って、最初に表示されるイメージはぼやけているけど、段々とはっきりとしたイメージにするテクニークを実装してます。（今読んでるこのページをリフレッシュしてもらえばなんだかわかりますよ）。
イメージスワップのテクニーク
こちらで複数のイメージサイズを準備しなくても良いと言うのは大変便利ですが、マニュアルでイメージの質をコントロールできないのは問題です。イメージの中には圧縮されるとイメージが綺麗に見えないものと見えるものの両方があります。
アートディレクターと言う肩書きをもらったら、こうした綺麗に見えない写真を掲載したくない、と思うこともあります。そんな時は下記のようなコードを書いて、イメージをサイズに合わせてスワップしましょう、と言う内容のものでした。
イメージをスワップした際のAltテキストの設定
Gatsbyイメージプラグインを使ったことがある人はご存知でしょうが、AltテキストはイメージAPIに紐づいていません。ですので、Altテキストをどうにかイメージスワップ時に同時にスワップする必要があります。Altテキストは日本ではあまり重要視されていないかも知れませんが、アメリカではAltテキストがないことが、目の見えない人を差別したと言う理由で訴えられることがあります。ですので、Altテキストは必ずつけましょう。また、AltテキストはSEOをする際にも大事になりますので、忘れずに設定しましょうね。
