iGEM Wiki を乗り切るためのTips10

(追記 2023/12/29) ※iGEM 2022 以降では、Mediawiki システムによる Wiki の管理が変更されたため、本記事が参考にならない可能性があります。 iGEM 2023 に参加し、その時のログを残してくださっている、ろぼいんさんのブログを確認しましょう。 iGEM のチーム Wiki 担当としての振り返り Great Tips for iGEM Wiki!

Q1. Wiki を書き終えることができるか不安です！

Wiki を書くためには最低限の HTML タグや CSS を書く必要があります。間に合わなかったらどうしよう...

安心してください！最低限の Wiki は一瞬で作ることができます。

やり方は簡単です。

• 1. 原稿を PDF に変換する。
• 2. HTML に PDF を埋め込む。

これだけです。画像や数式があっても綺麗に反映できます！

不安な方はとりあえず PDF で最低限の Wiki を作ったあとで作業すると精神的にも現実的にも良いかもしれません。

Q2. 新しいページを作るには？

iGEM Wiki の作成ページは初見では非常に見にくい UI ですので新規ページの作り方さえ最初はわからないかもしれません。

方法は以下のようになります。

• 1. https://2021.igem.org/Main_Page にいき、上部黒いバーからログインします。

• 2. login を押すと、Username, Password を求められるので入力しましょう。

• 3. その後、https://2021.igem.org/Team:○○/xxxxx にアクセスし、上部黒いバー -> wiki tools -> create で作成できます。

リンクの ○○ には自チームの参加登録名、xxxxx には任意の文字列を入れることが可能です。

Q3. 他のチームのようなかっこいい HOME をつくりたい！

一般的な web ページは html UI デザイン -\> コーディングの流れで最終的にコードを書くことで出来上がります。

かっこいいデザインを作れたとしても実装上難しくてできない場合があります。

これを解決する方法としてパワポなどで作成したデザインをそのまま画像として出力し、Wiki に画像として埋め込むという方法があります。

画像にするとテキストが選択できなかったり、レスポンジブ対応ができないという問題がありますが、iGEM Wiki では pc サイズでのみ見ることができればいいのでそれに最適化された画像を用意し、埋め込むだけで大丈夫です。(目安 1280 * 800 pixels)

不安になるかもしれませんが、2019 年に Best wiki で受賞した Linkoping_Sweden チームの HP を参考にしましょう。

彼らのトップページを見るとわかるのですが、メインになる部分は画像が埋め込まれています。

このように、不要なコーディングを避けつつ、iGEM Wiki として良い Wiki を作ることを心がけましょう。

Q4. 自分で書いた css が Mediawiki ではうまく反映されない？

iGEM が採用している Media Wiki ではデフォルトでいくつかの CSS が適応されています。

よってこの CSS のせいで想定していたデザインにならないことが多々あります。

以下のコードで、デフォルトでの CSS の問題が解決できます。

#sideMenu,
#toptitle,
.patrollink,
#firstHeading,
#homelogo,
#sideMenu {
  display: none;
}
#content {
  padding: 0px;
  width: 100%;
  margin-top: -7px;
  margin-left: 0px;
  border: none;
}
body,
html {
  background-color: white;
  width: 100%;
  height: 100%;
}
#bodyContent h1,
#bodyContent h2,
#bodyContent h3,
#bodyContent h4,
#bodyContent h5 {
  margin-bottom: 0px;
}
#bodyContent a[href ^="https://"], .link-https
{
  padding-right: 0px;
}

(これらを Style タグで囲んで使用してください。)

参考 : https://2021.igem.org/Resources/Template_Documentation

Q5. 画像や pdf はどこにアップロードしたらいい？

iGEM Wiki では画像などの静的なファイルは外部サーバーでホストしてはいけないというルールがあります。(Wiki freeze 後に変更できなくするため)

必ず iGEM 専用ストレージにアップロードするようにしましょう。

新規ページを作る時と同様にログインします。

上部黒いバー -\> wiki tools -\> upload files`

からアップロードしましょう。

この際、Destination filename をT--Qdai--test.pngのように T--チーム名--任意のファイル名 になるようにしましょう。

アップロード後、File history の上に Original file というリンクがあるのでそこに行き、画像の URL を取得します。 (≠ 画像の iGEM サーバーでのアップロード画面のページ URL)

そのアドレスを画像であれば、src = に入れることで使うことができます。

○ `https://2021.igem.org/wiki/images/e/e6/T--Qdai--test.png`

× `https://2021.igem.org/File:T--Qdai--test.png`

下の URL を src に入れるとページのロードでバグおこり、ページが表示されなくなるので、ご注意を。

Q6. link タグで CSS や JS を読み込みたい

CSS や JS (JavaScript)を link タグで使用する際の注意点を話しておきます。

https://2021.igem.org/Template:Qdai/sample.css

にいき、新規ページと同じように作成します。

そのリンクを元に

<link
  href="https://2021.igem.org/Template:●●/css/sample.css?action=raw&ctype=text/css&ver=1.0"
  rel="stylesheet"
/>

のように ?action=raw&ctype=text/css&ver=1.0" を付ける必要があります。

Wiki を作成する上で必ずこの問題が出てくると思います。

Q7. 自分のアップロードしたもの一覧が見たい

チームで作成されているページ一覧

以下のページで、チーム名を入力することで確認できます。

https://2021.igem.org/wiki/index.php?title=Special%3AAllPages

Display pages starting at: Team:〇〇

というようにいれいれば、チームが作成したすべての wiki ページを確認できます。

個人でアップロードした画像等

以下のページで、個人の Username を入力することで確認できます。

`https://2020.igem.org/Special:ListFiles`?

`Username: 〇〇`

というようにいれいれば、一覧で特定のユーザーがアップしたものを確認できます。

各ファイルは、対象とする URL を変更することなく、更新することができるようになっています。

ファイルのアップロードのみで、コードを変更することなく、Wiki 画像を変更することができます。

Q8. Parts Registry の編集ができません

環境依存ではなく、ユーザーの権限設定上のバグです。iGEM HQ にメールをして、諦めましょう。 チーム内で、編集できるユーザーを探しましょう。

また、WIki のサーバーと Parts Registry のサーバーは別物です。

Wiki サーバーは、各年新しくなっていきますが、Parts Registry サーバーは、年度による更新がありません。 画像などについても、2 度手間になりますが、それぞれのサーバーにアップしましょう。

• Wiki サーバー (2021) : https://2021.igem.org/Main_Page
• Parts Registry サーバー : https://parts.igem.org/Main_Page

Q9. 自動でアップロードしたい

仮想ブラウザでログインすれば、Github と紐づけて、自動アップロードもできます。

iGEM 2020 の、BITSPilani-Goa_India チームが作成した igem-wikisync は、自動アップロードのための便利なツールです。

彼らに感謝して、自分たちの形に合わせて使用しましょう。 この方法であれば、アクセスが困難な、締め切りギリギリな状況でも対応できます。

Q10. ローカルとの挙動がどうしても異なってしまいます

iGEM Wiki では Media Wiki というバグの温床ともいえるものが使われていることを忘れないでください。

時には、Media Wiki が悪いと決めつけることが解決策かもしれません。

まとめ

Wiki は、iGEM で大きな役割を持ちます。

ルールについて再確認し、ミスなくできるようにしましょう。

一般的な良い web ページを作るというより大会の要件を満たすページを作るということを意識して wiki 作成に望みましょう。

そして Wiki は、完成させることが大切です。

例年、アップロードが間に合わないということが多発しています。

どのチームでも、質をあげることを求めるため、必ずギリギリまで修正することになります。

もしまだ書き始めていないチームがいましたら、”いますぐ”、仮の文章でもよいので、すべてのページを埋めてから他のことを行いましょう。

また、iGEM 公式が発表している Wiki に関する情報についても簡単にまとめましたので、合わせてお読みください。

iGEM 公式発表の Wiki ルール

iGEM 公式発表のWikiルール

iGEMチームの皆さん、Wikiは書き始めているでしょうか？

iGEM Wikiは、独自のルールがいくつか存在し、それらを守ることが求められています。 さらに、Media Wikiというツールを利用しており、想定しない挙動が起こったりしてしまいます。

そこで本記事では、iGEM公式が発表しているWikiに関する情報について簡単にまとめましたので、参考にご覧ください。

また、wiki作成にあたっての注意点をQ&A形式でまとめましたので合わせてお読みください。 iGEM Wiki を乗り切るためのTips10

※本記事は、iGEM Qdaiの協力で執筆されました。

※iGEM 2022以降では、MediawikiシステムによるWikiの管理が変更されたため、本記事が参考にならない可能性があります。(追記 2022/5/3)

yomogy.com