執筆者：yuyu

この記事は OUCC Advent Calendar 2022 の18日目の記事です。前回はみやじさんによる「ASP.NET Core を使ってREST APIを作ってみる」でした。

最近の良かったことはサッカーのワールドカップで日本が出た全試合をリアタイし、サッカーに少し詳しくなれたことです。

もともとは「オフサイドってなんやろ」「4-4-2とは？」というレベルの知識で、選手に関しても長友選手や AbemaTV で解説を務めた本田圭佑などの時代しか知りませんでした。解説や Twitter のつぶやきを理解するためにルールや戦略論（フォーメーションなど）を調べていきサッカーの奥深さに少し気づけたかなと思います。

さて、今回の記事では、今年の春に非プログラマーと協同で web ページの作成を担当し、リーダーとして動いていた経験をもとに、当時意識していたことを書きたいと思います。

目次

1. はじめに：背景
2. 問題点
3. 解決策
4. 導入：開発裏話
5. 結果
6. おわりに
7. リンク

1. はじめに：背景

私は別の団体と兼部をしているのですが（以下、G隊）、G隊では春の学祭にてクイズを使った出し物をしようということになりました。教室の中で完結するのですが、スタンプラリーのように順番に数問のクイズを解いていく形式で、最初の頃は設問を印刷して来場者に自分のペースで順番に解いてもらおうという議論でした。しかし、「様々な種類のクイズを用意したい」「答えは別用紙で用意する必要がある」「感染予防のため同じ紙を何枚もすらなければならない」などの理由から紙媒体ではなく電子媒体を用い、例えばQRコードを読み取ってもらってリンク先の web ページでクイズを読めるようにしようということになりました。結果的に印刷費用を抑えられるという利点もありました。

2. 問題点

非常にスマートで費用もかからないので現代の価値観に合った素晴らしい企画に思われましたが、ひとつだけ問題がありました。それは web ページを作ることができる人材の不足でした。

当時は私一人が G 隊の web 開発を担当していました。クイズ作成は複数人のチームで分担して行っていましたが、それを web ページにする仕事はひとりでやるには業務量が多すぎました。ぜひ web ページ作成も分担したいところですが、G 隊には web プログラマーは私一人しかいなかったので HTML & CSS で対応することは困難でした。

3. 解決策

HTML & CSS が使えないので Markdown 記法を用いて書けるシステムを採用すべきだと考えました。

Markdown（マークダウン）は、文章の書き方です。デジタル文書を活用する方法として考案されました。特徴は、

• 手軽に文章構造を明示できること
• 簡単で、覚えやすいこと
• 読み書きに特別なアプリを必要としないこと
• それでいて、対応アプリを使えば快適に読み書きできること

などです。Markdownはジョン・グルーバー（John Gruber）によって2004年に開発され、最初は Daring Fireball: Markdown で公開されました。その後、多くの開発者の手を経ながら発展してきました。 Markdown とは（日本 Markdown ユーザー会）

Markdown 記法であれば少なくとも HTML & CSS よりは非プログラマーにも簡単に web ページを作ることができます。

では、Markdown 記法を使うとして、どんなツールを使えばよいのでしょうか。条件をいくつか出しました。

共有しやすい（Git Hub 以外の方法で）

html ファイルに変換できる（サーバーをレンタルしていなかったため、GithubPages を使う必要があった）

無料のサービスである

結果、“StackEdit”なるサービスを発見しました。これはブラウザ上で Markdown 記法を使って web ページを作ることができるサービスで、アプリのダウンロードが不要だったこともありがたく感じました。

StackEdit の素晴らしい点は Google Drive と連携できる点でした。G 隊はファイルの共有などは Google Drive で行っていたので今まで通りに各自で作成した web ページを Google Drive で共有できるというのは魅力的でした。進捗管理にも大変役立ちました。

また、html ファイルにエクスポートすることもできました。G 隊はサーバーをレンタルしておらず、web ページを持つために私の GitHub アカウントで GithubPages を作成して公開していました。GithubPages には html ファイルと css ファイルしか使えないという先入観がありました（ md ファイルでもアップロードできたのかもしれないがよくわからん）。

StackEdit のエディター画面

デザインは凝ったものにできませんが、学祭でしか使わないページになるだろうということで妥協することにしました。

こうして、学祭担当のチームのみんなには StackEdit を使ってクイズのページを作成してもらい、Google Drive に共有されたファイルを私が html ファイルに変換して GitHub のリポジトリにアップロードするという体制ができあがりました。

4. 導入：開発裏話

ここまでは企画運営の方針に関しての話でしたが、ここからはチームのみんなに環境構築をしてもらう段階となります。導入時に参照するドキュメントを作成し、Google Drive 上に共有しました。

導入用ドキュメント

意識したことは IT 用語（プログラミングの用語や web 開発の文脈の用語）を使わないよう徹底したことです。自分の知らない言葉で埋め尽くされたドキュメントは読む気にならないでしょう。例えば英語の文章において98%以上の語彙を理解して初めて適切な読解が可能になると言われています（Hu & Nation, 2000; Laufer, 2010; Schmitt, Jiang & Grabe, 2011)。知らない語彙が一定数あると読解精度が落ちるわけですが、個人的にはこの現象は外国語の文章に限らず専門的な内容の文章を読む場合でも変わらないと思っています。

ドキュメントの整備に加えて、質問しやすいような環境づくりも意識しました。定例会議では何か困ったことがないか尋ね、相談してもらえるようにしました。

準備が整ったら各自好きなタイミングでクイズを書き、Google Drive にアップロードしてもらいました。それを私がチェックするという流れです。

5. 結果

クイズ画面

クイズ画面は上のような感じになりました。スッキリとした印象で、問題を解くうえではかなり見やすい画面になっているように思います。プログラミングを使わなくてもここまでできるのは素敵ですね。

学祭当日は、私は忙しかったので運営として参加することはできませんでしたが盛況だったと聞いています。貢献できたようで嬉しい限りです。

また、この StackEdit 導入をきっかけに G 隊内において web 開発を始めてみることへの心理的抵抗感が弱まり、チームでの web 開発につなげやすくなったことは思わぬ幸運でした。

6. おわりに

新しくプログラミングに興味を持ってもらうには、「なんだか難しそう」という食わず嫌いを払拭させ、自分にもできそうだと思ってもらうことが何よりも重要でした。これはプログラミングに限らず新たな技術を導入する時には常に心掛けるべきことでしょう。チームの抵抗感を和らげ、スムーズな導入を目指しましょう。

OUCC Advent Calendar 2022 、次回の担当は ciffelia さんです！お楽しみに！

7. リンク

StackEdit：https://stackedit.io/