iGEMのWikiにBootstrapを導入するには
Dear iGEMers
This website is operated in collaboration with iGEM Qdai and iGEM Gifu. This article have compiled information about iGEM in Japanese to provide a new information resource for new Japanese iGEMers in the future. Let's go iGEM Qdai wiki and iGEM Gifu 2021 wiki !
※ iGEM Gifu is nominated for the Best Wiki (iGEM 2021). Congratulations!
iGEMチームの皆さん。Wikiページの制作は順調でしょうか？
iGEMではあらかじめWikiページのテンプレートが用意されています。テンプレートをある程加工することで、一定のクオリティのWikiページを作ることができますが、時間をかけて作る以上、Wikiページのクオリティは少しでも上げたいところです。しかし、読者に伝わりやすいデザインを意識すると細かいパーツのデザインや配置の調整などに膨大な時間がかかってしまいます。
また、いきなりホームページ制作の経験が無ければ、Wikiページのデザインを考えることも容易ではないでしょう。そこで、これらの問題を解決するためのツールとしてGifuチームではBootstrapというCSSフレームワークを使っています。
本記事ではBootStrapの簡単な説明とiGEMで用いられているMediaWiki上に導入する方法を説明します。
※iGEM 2022以降では、MediawikiシステムによるWikiの管理が変更されたため、本記事が参考にならない可能性があります。(追記 2022/5/3)
目次
CSS フレームワークとは？
分かりやすくいうと Web ページのパーツ集のようなものです。CSS フレームワークにはボタンやテキストのスタイルから、タブ切り替えコンテンツ、ドロップダウンメニューなど、さまざまなパーツがあらかじめデザインとコーディングがされた状態で配布されています。
したがって、フレームワークを利用することで、デザインに沿ってCSSで見た目を指定し、ひとつひとつの部品を組み立てていく作業が省略できます。
パーツデザインをする必要がないので、デザイナーでなくても簡単にクオリティの高いWikiページを作ることができます。
また、要素を横並びにしたり、全画面表示にしたりといったページのレイアウトも簡単に組めるように、あらかじめCSSが用意されています。iGEM Wikiのテンプレートを加工することに比べても同等の学習コストで編集技術を習得することができます。
CSS フレームワーク利用することで、Wiki ページのクオリティアップと製作時間の短縮を同時にかなえることができるでしょう。
BootStrap の導入方法
このトピックでは Gifu チームがどのように BootStrap を導入したのかを紹介します。Gifu チームでは過去に US AFRL CarrollHS 2019 チーム (https://2019.igem.org/Team:US_AFRL_CarrollHS) が提供している方法で導入を行っています。
1. BootStrap のダウンロード
https://github.com/us-afrl-carrollhs/iGEM-Wiki-Bootstrap
上のリンクを踏み、git から以下のファイルをダウンロードします。
このレポジトリは iGEM US AFRL CarrollHS が 2019 年にコラボレーションの一環として公開しているものです。
- ・BootStrapCSS 1
- ・BootStrapCSS 2
- ・BootStrapCSS 3
- ・BootStrapCSS 4
- ・BootStrapCSS 5
- ・BootStrapCSS 6
- ・BootStrapJS 1
- ・BootStrapJS 2
- ・BootStrapJS 3
2. iGEM Wiki 内で JS、CSS ファイルの作成
Wiki tools ->Edit から Wiki 編集画面に移動します。{{ チーム名(任意の名前) }}と記述し、Save Page することで任意の名前のファイル生成、参照します。
Save page を終えると Edit 画面上に Templates used on this page という使われているテンプレート一覧が現れるので、このテンプレートを Edit から編集していきます。
Gifu チームでは以下の写真のように {{Gifu/BootStrapcss1}}～{{Gifu/BootStrapcss6}}と{{Gifu/BootStrapJS}}で計７つのファイルを生成、参照しました。
3. 生成したファイルにダウンロードしたファイルの中身をコピーする
各 Template の URL に移動したのち、メニューバーから Edit を選択し、それぞれ生成したファイルにダウンロードしたファイルの中身をコピー＆ペーストし、Save Page をします。
Gifu チームではダウンロードした BootStrapJS1 ～ BootStrapJS3 の中身はすべてまとめて生成した Gifu/BootStrapJS に移しました。
以上の操作を行えば iGEM Wiki で通常どおり BootStrap を使用できるようになります。
まとめ
今回の記事では、BootStrap の導入方法にのみ焦点を当てました。iGEM Wiki を楽に編集するためにはテンプレートを使うという選択肢だけでなく、Bootstrap やその他過去の iGEM チームがコラボレーションの一環として提供した方法を利用していく方法もあります。
岐阜チームでは Bootstrap を利用していますが、最低限の学習コストで、できるだけ分かりやすい Wiki を作り、実験の集中していくという姿勢が大事だと考えています。
