6月14日もモブワークの日としました。
この日のワークは、先日(※6/11のモブワーク)にて取得した独自ドメインを紐づけること、OGPの設定をすること、正式名称を決めていよいよ建設中ページを公開すること、ついでに公式Twitterを取得する、といった内容になります。
まずは、カスタムドメインでGitHub Pagesを使うための設定です。
順不同で構わないと思いますが、以下の設定します。
- DNSレコードの設定
ドメインを取得した会社（レジストラ、販売業者）のドメイン管理画面から、GitHub PagesのIPをAレコードとして指定します。 4つあるので、全て設定しましょう。Xserverの場合、DNSレコード設定ページの「コンテンツ」のところにIPアドレスを入力します。ホスト名の前、wwwなどを入れると想定されますが、使わない場合は空欄でOKです。
https://help.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site にIPアドレス、他の設定が書かれています。
- CNAMEを設定する
/docs/CNAMEというファイルを作り、ここにgipotal.jpと記入します。/docsがドキュメントルートになる場合ですから、リポジトリのトップがルートになる場合は、当該リポジトリのトップに置くことになります。
ただし、Pushしてない状態でも動いたので、どうやらこの設定はいらない模様です……(一応やったこととして書いておきます
- GitHub PagesのSettingsにドメインを記入する。ついでにHTTPSの設定も行う。
GitHubのリポジトリ設定（Settingsタブ内、下の方)に、ドメインを入力します。公開Sourceの下にドメインを入れるところがありますので、ここにドメインを入れます。
ついでに、HTTPS強制の設定もあるので、ここにもチェックを入れます。
上に、設定したドメインで公開されたよ！（Your site is published at https://gipotal.jp/） というメッセージが表示されていること、そこをクリックしたらちゃんと表示されることを確認して、設定は終了です。
なお私達が設定した際には、いっときHTTPSの設定がグレーアウトしていることがあったなど、タイミングなのか、何かに関連するものがあるのかはよくわかりませんが、設定できなくなることがありました。このため、httpでは見れるけれどhttpsでは見れないといった状態が起こりえます。
また、設定をしてもネームサーバなどにすぐに反映されるわけではない場合もありえます。正しく設定したはずなのになぜか読み込めないといった現象も発生しうるのです。この場合、しばらく経って設定の反映を待ってから確認してみるといったことが必要な場合があります。サーバ間の連携や、サーバへの反映に時間がかかるようなケースでは、焦って試行錯誤すると、間違った方向に進んでしまうこともあるので気を付けてください。
OGPとは、Open Graph Protcolの略で、TwitterなどSNSでシェアしたときに表示する、サムネイルやタイトル、サイト概要などを定めるHTML要素です。Metaデータとしてヘッダに入れるようです。
Webのいろいろなところに解説がありますので、OGPの記載例を参考に、コードを入れます。
<meta property="og:url" content="https://gipotal.jp" />
<meta property="og:type" content="website" />
<meta property="og:title" content="TOPページ" />
<meta property="og:description" content="ぎぽたる｜技術同人誌ポータルは、世の中のさまざまな技術同人誌・サークルへの入り口です。ジャンル、イベント横断検索、新着告知など、新しい本との出会いの場です。" />
<meta property="og:site_name" content="gipotal | 技術同人誌ポータル" />
<meta property="og:image" content="https://gipotal.jp/images/ogp.png" />OGP用の画像を準備するとか、サイト説明（description）を考えておく必要はあります。
ここでいろいろネタに走ったりするのもモブのご愛敬。 これを作ったら、Slackとかに貼って動作確認をします。
Twitterカードとファビコン1の設定もついでにやっておきます。
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@gipotal" />
<link rel="icon" href="https://gipotal.jp/images/favicon.png" sizes="32x32" />さて、ここまで何となくギポタル/ぎぽたるで来ていましたが、正式に決めたわけではありません。Twitterのハッシュタグなどにも関わりますので、ここで確定することにします。
候補には、カタカナ、ひらがな、アルファベットそれぞれのぎぽたるが残っていました。実際これまでの進捗報告でハッシュタグを三つ併記していました。
モブワークやりました！ #gipotal #ギポタル #ぎぽたるみたいな感じで、後日対応もできるようにしましたが、冗長である感は否めません。
MURALの投票機能を使って、参加者で投票します。カタカナのギポタルが強かったので、それに決定です。同時にロゴ、アイコンのプロトタイプも作ってくれました。
これを以て正式名称がギポタルになり、他の設定もそれに合わせて設定を変更しました。また、TwitterIDも@gipotalを取得しましたので、反映しました。Twitterの運用の検討は追々行っていきます。
ツイッターにOGPが表示されていることなどを確認して、次に進みます。
正式名称がカタカナに決まったので、ロゴの製作が進みます。もっとさんが「ある程度勝手に」進めていただいていたのですが、最終調整に入ることになります。
シンボルとロゴタイプの調整、色、そしてロゴのみならずテーマカラーを決めるなどの話です。
ロゴの色についての議論が生まれます。
技術書典が緑、技書博が青系の色です。したがって、黄色系はニュートラルなイメージとしてこの議論の参加者にも受け入れられました。
ロゴの色は黄色（ゴールドに近い）ということで決定します。
次は、キャラ設定についてです。
トップページにいる黒い子たちについてです。名前とかが決まっていなくて呼びづらいという問題です。
ぎぽたる族のなんとかくん、なんとかちゃん、という設定はよい、という案が出ます。耳をつけるとぎぽたる族になれるとか、語尾はぎぽー、～ぎぽ、です。
実はこのキャラには元ネタの妖怪がいます。沼に引きずり込む妖怪がいて、名前を布絡み2というそうです。沼のそばで布に化けていて、その布に近づいた人を沼に……。
技術同人誌書きたいなー、という発言を探して執筆沼に引きずり込む、という類似点があるんだだそうで、身に覚えがありますね……。
設営をしている子がおやかたをイメージしており、泣きながら執筆しているのがえるきちさんをイメージしているそうです。いいですね。
ほんがらみという妖怪のギポタル族です。個別名は任意につけられますが、執筆している子は「ぎぽきち」という名前であるという公式設定ができます。
これからキャラが増えると、ぎぽーるとか名前を増やせるでしょう。
語尾は超安直に、～ぎぽです。「今日サイトを立ち上げたぎぽ！」です。
このキャラをVTuber化するとか、背景だけをバーチャル背景として出すとかいった案も出てきます。また小物、例えばネクタイつけるとかでキャラ分けする形になりますかね。アバター売って回るとか、名前空間を売るとか。いろいろアイディアは出ますね。キャラスポンサーとして、運営費の足しにするというのもアリですね。本を紹介するVTuberなんてどうでしょう？
Twitterの運用として、ぎぽたるちゃんアカウントを作るというのも案として出てきたので、これについても継続検討ですね。
そろそろ締めに入ります。ここまで出たもろもろから課題を抽出し、ふりかえりのFun Done LearnのなかでNext Workを設定します。
工事中ができたことで、もうできた感があるねー、という発言に対して、「実装はこれからだけどね」という的確なツッコミが入ります。
次あたりから実際にサイトの実装に入るのでしょう。トップページの仮組あたりから始まる見込みです。トップページを組みづらいときには、サークルページを組んでしまうと要件が明確になるでしょう。逆にデザイン的にはやはりトップページから組んでいく必要があります。
ここで改めて確認したのが、サークルページ主体で組んでいくのか、頒布物主体で組んでいくのかです。これが決まらないと、それぞれのページの関係があやふやになりますし、手戻りが生じる可能性があります。これについては、明確に「頒布物主体である」ということを改めて確認しました。頒布物のページが主体であり、頒布物の集合としてサークルページがあり、ジャンルのページがあるという形態になります。
そして、次回モブワークで、実装に向けて構成要素や構成を決めるため、インセプションデッキを作ることにしました。
インセプションデッキというのはプロジェクトを始める前に明らかにしておくべきことを知るためのフレームワークです。 具体的にはWhyとHowを明らかにする以下の質問に答えます。
Whyを明らかにする質問はこのようになるそうです。
- 我々はなぜここにいるのか
- エレベーターピッチ
- パッケージデザイン
- やらないことリスト
- 「ご近所さん」を探せ
対して、Howを明らかにする場合は、このような質問になるようです。
- 技術的な解決策
- 夜も眠れない問題
- 期間を明確にする
- トレードオフスライダー
- 何がどれだけ必要か
今明らかにするのは、Whyであろうということで、Whyを明らかにするインセプションデッキを組みます。特に重要なのが、エレベーターピッチとやらないことリスト、そしてなぜこれをやっているのかだろうというところに合意が出ました。最初の「我々はなぜここにいるか」は、今後参加者を探すのにも、我々がどういうことを考えてやっているのかを明らかにして勧誘しやすくなるでしょう。逆に今はHowの方の優先度は下がります。
また、定期的にモブワークを開催することで、「歩みを止めない」ことができ、やっている感を出していくことで中ダレせずに進める事ができるでしょう。
それ以外にGit環境、JS環境を整理するなど、次やることが決まりましたので、今回はこれで締めます。
また、次回までに調べておくこと、個別にやっておく作業を宿題として列挙します。
現時点で30本以上のIssueがあるので、これを管理するためにGitHub Projectを使って管理するとよさそうということになり、Issue立てたら自動的にIceboxに入るとかの設定ができるようにしておきたいなどの話が出ます。これらは個別に調べて次回共有することになるでしょう。
3回目のモブワークのふりかえりFun Done Learnです。
ギポタルかわいいがはじけて枠を飛び出して主張しています。こういうFunがたくさん出るのがいいですね。また時間的にも2時間程度がちょうどいいところだというのが出て、みんなが合意していてよかったところです。疲れすぎず、だれ過ぎず、時間が短すぎてやりたいことができないということもなく。慣れてくると成果は増えてくるし、都合をつけやすい、枠として確保しやすい時間ですね。
やったことが増えてくるのはよいことですが、むりに増やそうとするとしんどくなるので、無理に増やそうとしないで、雑談や相談の時間をゆっくり持ちましょうということも、今回で決まりました。Doneの欄が少なくない？という指摘が出ましたが、それに対しては、Doneの粒度をもっと下げてよいのではないか、というコメントが付きました。例えば今回のワークの中では、HTTPS対応したとかも成果として十分です。実際には、設定のボタンをポチっとしただけですが、成果は成果です。ファビコンつけたなど、粒度を細かくすればいくらでも増やせるでしょう。粒度を下げて成果を可視化することも学びであり、結果としてDoneが埋まること自体も学びです。
次は、コーディングというよりプロダクト的な話で、インセプションデッキの作成、そしてGitHubや環境の整理、ぎぽたる族のTwitterを作るなども次にやることです。
Learnはそれ自体が学びで、デザインに関してデザイナーがどんなことを考えているのかが知れた、インセプションデッキの概要について知るなど、新たな学びが出てきたことは本当に良いことです。
どうも、泣きながら執筆しているえるきちです。いつも泣いてるわけじゃないんだギポ！
最近の技術書典では、執筆期限がギリギリすぎて前日入稿をキメて当日は疲れのあまり「即身仏」になっていたり、「新刊落としました」の実績を達成してしまったり、前日から当日までがっつりお試し冊子を作成して、設営開始時刻に遅刻したりしたこともありましたが、わたしは元気ですギポぉ。
なんか自分をもとにキャラが作られるのは光栄ではあるものの、泣きながら執筆してるイメージかー、そうかーという複雑な気持ちでもあるんだギポ。
ぎぽきちくん（ちゃん？）のなんとも言えない味わい深い表情はとても好きですギポ。
なべくらさん素敵ギポ！
Footnotes
-
favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。(Wikipedia調べ https://ja.wikipedia.org/wiki/Favicon ) ↩