モノクロタイム

I'm from the future!

第9回長崎デジタルコンテストでスプリンター賞を受賞しました

こんにちは、れいじです。

11/21-11/22に開催された長崎デジタルコンテストに参加してきました。

今回は学生限定かつ開発期間(約3ヶ月間)開発をしてくるのではなく、社会人も交えて約20時間の制限時間内でプロトタイプを作成・もしくは企画を発表するハッカソン形式のイベントとなっています。

digicon.me

今回参加したイベントは

の二本立てて、アイデアソンの内容を元にハッカソンで成果物を作っていくのですけれども、私自身会場でチームを組む、当日のアイデアソンを元にプロトタイプを組む、というのが初めてだったので不安も大きかったです。

常連的に参加しているHackDayでは

  • 既に決まったメンバーで

  • 自分たちの作りたいものを考えて

  • 事前に何が必要かを考えたり、どういった技術があるかを調査したりする

ので、『考える』というフェーズがハッカソン当日には無いんですね(チームによっては当日アイデア出しをするチームもあるみたいですが)。

なのでアイデアソンを含めた24時間でものを考えて作って発表するっていうのは初めての経験です。

作ったもの

「ココどがん?」というWebサービスを作りました(スマホで見ること前提に作っています)

https://kokodogan.herokuapp.com/kokodogan.herokuapp.com

アプローチについて

元々のテーマとして「長崎✕デジタル」というものがあり、人口減少や未だアナログで回る社会などなどの問題を解決するためにIT技術を活用して課題を解決するのが目的です。

自分たちのチームでは、

  1. ブレストで出た内容を社会の問題か、個人の問題であるかに分け

  2. 個人の問題に近いほど解決が容易であって、何通りものアプローチが考えやすい

と当たりを付けてアイデアを膨らませていきました。

f:id:yomoyamareiji:20201124232538j:plain

※もし同イベントの参加者が当ブログを見ていて、かつハッカソンの継続参加に意欲があるならば以下の書籍がおすすめです。

私がブレストをしたり、新しいアイデアを求められたりした時やプレゼン等で人の共感を得る話をする時に参考にしてきたものです。

[asin:4802510411:detail]

色々なアイデアが出た結果、

  • 地方の飲食店を始めとして、観光地の営業時間や料金情報が古かったためにガッカリした体験がある。

  • 長崎に到着したはいいけど、次の予定まで時間が空いている。この辺りのおすすめスポットが知りたい。

  • 話題のお店でも行き方がわからない。どのバスに乗れば良いのか、何処で降りれば近いのか?

上記3つを解決するために、地元住民に情報を提供してもらうことで情報の鮮度を保ちつつ、さらに信憑性が絶えず更新され続けるような新サービスとして当サービスを開発しました。

サービス概要

以下はスポット(観光地・飲食店・etc……)の情報詳細ページです。

f:id:yomoyamareiji:20201124235011p:plain

情報の鮮度を保証する

  • 地方の飲食店を始めとして、観光地の営業時間や料金情報が古かったためにガッカリした体験がある。

ページ下部にコメント欄があります。コメント欄では、県内在住者と県外在住者とのコミュニケーションが可能となっており、当該スポットについての質問を行うことができます。この機能によって、スポットそのものへの理解を深めたり、或いは地元住民しか知らない情報を聞くことが可能となっています。

f:id:yomoyamareiji:20201125000021p:plain

街の魅力を感じてもらうためのレコメンド機能

長崎に到着したはいいけど、次の予定まで時間が空いている。この辺りのおすすめスポットが知りたい。

上記の問題を解決するために、「ココどがん?」欄で、当該スポットから然程苦労せずに行けるスポットを提示しています。この情報は、当該スポットの次に何処に行ったかの情報を県内在住者に提供してもらうことでレコメンド指標の一つとしています。

将来的には閲覧者の好みやカテゴリー指定によってより目的に即したレコメンドが出来るようになればいいですね。

情報の信憑性を保証する

話題のお店でも行き方がわからない。どのバスに乗れば良いのか、何処で降りれば近いのか?

このページに提示されている内容は基本的にユーザーに投稿してもらうもので、システム側から何か良い感じのアルゴリズムを使って提示するということはありません。長崎県内に住む人の感じているリアルな現状や感情を乗せることで、情報の信憑性を保ちます。

ハッカソンとは楽しんで、悔しがって、成長していくもの

ハッカソンが途中でつまらなくなってくることの大きな理由として、進捗が上がらないとか自分たちが作ってるものは本当にいいものなのかとか、そもそも完成するかどうかの焦りとか、時間に対する恐れが膨らんでくるからなんですよね。まあでも深夜に進捗バリバリ出るほうが普通はおかしいんですよ。特に初参加の場合って。

私の場合過去のデジコン歴代優勝者なんて書かれていますが(全然関係ないけどこれ入れたら三冠っすね!)、私がいわゆるこういう『ハッカソン』に参加したのは2011年か2012年辺りの頃で、その時マジでチームに何も貢献できなくて悔しくて悔しくてたまらなかった経験があります。

reiji1020.hatenablog.com

reiji1020.hatenablog.com

そういう経験があって、一度チームを組んで開発する前にまずは自分自身の技術力を磨き上げて、一人でどこまで出来るかを試した初めてのイベントが第二回長崎デジタルコンテストでした。その後第5回デジタルコンテストにも呼んでいただいて運良く同じように最優秀賞を頂きまして今回に至ります。正しくはその後に3回HackDayに出場し、次はチーム(タッグ……?)での勝利の方程式を編み出していくことになるのですが、これはまた別の話なので割愛します。詳しくは過去記事で。

reiji1020.hatenablog.com

reiji1020.hatenablog.com

私はバカなので朝6時くらいまで500のプレモルちびちびやりながら開発してましたけど、多分慣れてないと無理だと思います。慣れてるからできるし、見通しが立ってるから酒を入れてもなんとかなるし。ただ、ビールを飲まなくてもリフレッシュはできる訳です。深夜帯ってのめり込みたくなる気持ちはわかるんですが、意外とリフレッシュに時間を使ったほうが局面打開出来たりすることがあります。休憩大事。色々講釈垂れてるんですが、結局はハッカソンイベントたのしー!次も参加してー!と思えるような体験ができたかどうかに掛かっているのかな、と思っています。あとは一度決めたコンセプトをひっくり返して再び議論をすることは往々にしてナンセンスです。作ってしまったものがひっくり返る可能性すらある。

もう私も地元を流出した側の人間なので、どちらかというとガチガチのガチで開発するよりは場の盛り上げとかサポートに徹する方が良いのかと思いましたがついついアツくなってガッツリ開発やってました。なので皆さんに元気があればもっと情報交換とかしたかったですね。

技術について

「ココどがん?」は以下の技術・サービスを使って開発されています。

キニナッタヒトハシラベテミテネ

まとめ

今年、というよりは社会人になってからは開発関連で本気をだすというよりはナレッジを残していくのが使命なんじゃないかと少しだけ思っています。勿論無料でではないですけど……

もうここまできたら私もお助け屋さんポジションで会場ウロウロするだけの遊び人ポジションになってみたいとちょっとだけ思いました笑

とにかく来年のアニバーサリー・イヤーイベントが楽しみです!ありがとうございました!

ではでは。

[asin:4802510721:detail]

Microsoft Azureを撤退してGitHub Pagesに色々移行した

こんにちは、れいじです。

有り難いことに主催の方からお声掛け頂き、第9回長崎デジタルコンテストに出場することになりました。

digicon.me

過去の軌跡はこんな感じです。

reiji1020.hatenablog.com

reiji1020.hatenablog.com

最後の出場回で作ったVJ-Cardboardですが、学生時代の無料アカウントを駆使しまくったMicrosoft Azureでホスティングしていました。

当時は金欠金欠アンド金欠でなんとか無料で使えるPaaSサービスを利用していましたが既に社会人となり、さらに社会は進化してgithubでもWebページが公開できる時代になっていました。

Azureは元々使うの辞めたいな~(だるだる)とずっと思って思っていたので、思い切ってGitHub Pagesに移行した次第です。

移したサイト

VJCardBoardのLPをGitHub Pagesに移しました。

reiji1020.github.io

雑な手順

  1. 元々コードをBitbucketで管理していた(当時はPrivateリポジトリが無限に作成できるサービスがこれくらいしかなかった)のと、もうPrivateにする必要もないのでGithubリポジトリを移行しました

https://github.com/new/import

全然関係ないけどsvnって聞かなくなったなあ。

  1. リポジトリ名にgithub.ioをつける

  2. 公開する

諸々の設定事項は以下を読み進めて実施しました。

docs.github.com

これすごく便利だしこれアカウントごとに1つとか制限ないらしいです。 儲かってるのか不思議。サンキューGitHub

ではでは。

【Netlify+ReactApp】create-react-appで作ったWebアプリでNetlifyのForm機能を使う

こんにちは、れいじです。

NetlifyというHerokuみたいなPaaSサービスがあるのですけれども、これが中々よろしいサービスでして最近色々と弄ってみてます。

www.netlify.com

無料枠でも

  • 月300デプロイまで可能
  • カスタムドメイン設定可能
  • 簡易CI/CD

などなど。アクセス数に関しても(大バズする程でなければ)全然大丈夫。確か12万アクセスまで大丈夫だった気がする

その中でも目立つのがFormという機能でして、例えばショップページを運営している場合だとお問い合わせフォームや商品に関する感想を受け付けるフォームが簡単に実装できます。

qiita.com

私はWebページを作る時は専らReactなりVueなりを使っているので、今回作ろうとしたページもReactで作るつもりでした。皆おなじみcreate-react-appです。

…………Form動かねえ~~~~~~~~!!!

滅茶苦茶悩んでなんとか実装出来たのでサンプルコードと共に置いておきます。

利用技術+αは

  • React(create-react-app)
  • Material-UI

です。

第1の躓き:補助用formタグはpublic/index.htmlに書く

も~~~~~これですこいつが全ての元凶。いや私の頭が悪いだけかもしれん

そもそもNetlifyのForm機能を使うためにライブラリを導入しなければならないとかそういうのは一切なく、form要素にnetlify属性を付与してやればNetlifyのBotがその値を読み取ってFormと連携してくれるよっていうのが強力なポイントなのですけれども、JSXを使っている場合だと上手く動かないらしいです。(Botが検出できるのはHTML要素だけであって、JSによって生成されたHTML要素はクロールできない)

この問題を解決するために以下の公式のドキュメントには、任意のhtmlファイルにnetlify属性を付与したformタグを書いておく必要があるらしいです。

www.netlify.com

上で述べたように、JSで生成されるHTML要素(コンポーネント)はbotがクロールできないので、こいつをReact,Component内だったりfunction Componentの中に書いても動作しないんですよね。

で、create-react-appコマンドで作ったWebアプリでこいつが書けそうなhtmlファイルはindex.htmlしかありません

つまりこんなかんじ

これでNeilifyのBotが「オッこのページにはNetlifyのFormと連携する要素があるっぽいぞ!」と把握することができます

第2の躓き:補助用formタグの中で仕える要素はinputかtextarea

Material-UIとかいい感じのコンポーネントライブラリを使っていると色々と忘れがちだと思うんですけど、コンポーネント側でどんなFormやInputを使っていようと、index.htmlに追記する補助タグの中身はinputタグかtextareaタグじゃないと動作しないようです。

例えば連携するフォームが以下のようなものでも、index.html側に書くものは基本的なフォーム系タグで構成されていなければNetlify側で掴む事ができません。いや当然といえば当然なんですが本当HTML5のタグ忘れるよ……Reactとか使ってるとさ……

gist.github.com

第3の躓き:inputタグを忘れない

<input type="hidden" name="form-name" value="message" />

これ!!これね!!

index.htmlを読み込んだ時に見つけたフォームと紐付けるための大事なやつだから忘れちゃだめなやつです!公式フォーラムで「Form動かねえ~」って質問してる人のうち9割くらいがこのinputタグ書いてないとかそんな感じだったと思います

Netlify form not submitting, or showing page not found error - Support - Netlify Support Forums

[Support Guide] Form problems, form debugging, 404 when submitting - Support Guides - Netlify Support Forums

これを書かないとそもそもNetlifyのForm機能に値が送信されないので気を付けてください。

まとめ

というわけでなんとか実装できました

f:id:yomoyamareiji:20200823120603p:plain

Formikとか使ってたらもっとややこしそう(こなみかん)

github.com

全然関係ないけどNetlifyのフォーラムには運営側の人が結構常駐していて、こういうTipsの共有をかなり嬉しがるっぽいです。英訳してフォーラムに投稿しちゃおうかな~(英語力皆無)

ではでは!!

【#StayAtHome🏠】【終了しました】4/26~5/6の間技術書典で発刊したvvvvの既刊を誰でも閲覧可能にしました(※一部制限付き)

f:id:yomoyamareiji:20200426121703p:plain

こんにちは、れいじです。

コロナウイルス対策で全国的に外出自粛を行わざるを得ない状況で、「おうち時間」を過ごす人が圧倒的に増えています。

この機会に家で出来る新しい余暇活動を見つけて難局を乗り切ろうという兆候も見られます。

(外出自粛しなくてもGW前に一部のエンジニアは○○を勉強するぞ!と意気込んでたりするのですが)

クリエイター、というかビジュアルプログラミングに少しでも興味のある方の「おうち時間」を支援するべく、ビジュアルプログラミング言語「vvvv」に関する技術同人誌3冊をGW中の期間限定で閲覧できるようにしました。

GW期間中に無料で閲覧できる書籍

- vvvvでCGプログラミングやってみる本ービジュアルプログラミングことはじめー : https://drive.google.com/file/d/1rWGELXTag4qIToujDJWfY_m-2I-AB6Bg/view?usp=sharing

制限事項

技術書典及び通販等でお金を払って購入いただいた方と差別化を行う為に以下の利用制限を設けています(Googleドライブの共有設定で縛っています)

  • pdfファイルのダウンロード不可Webブラウザでのみの閲覧に限定します

  • pdfファイルの印刷不可:印刷→再度自分用にPDF化もしないでください

読んだ後にやってくれたらうれしいこと

  • Twitterアカウントをお持ちの方は、是非「#vvvv」「#vvvv_jp」タグをつけて作業過程や作ったものをツイートしてください。当然私も見ますし、日本のvvvvユーザーたちも見ていますし、vvvv開発側の人たちも良く見ているハッシュタグです。励みになります!

正直マジで外出れなくてつらたにえんだけどウチらみんなで乗り切ってこ!って感じでよろしくおねがいします!

ではでは!