HTMLでwiki風に編集できるWebページを作る方法！
「Wikipediaのようにブラウザ上で編集できるWebページを作流方法について知りたい。」
「HTMLをwikiのように編集可能にする方法ってあるのかな？」
上記のように考えている方もいるのではないでしょうか？
HTMLのcontenteditable属性を使うことで、wikiのように編集可能なWebページを作成できます。また、wikiを簡単に作れるWebサービスを使うことで、プログラミング初心者でもwikiを作成できます。
今回WEBCAMP MEDIAでは、HTMLでwiki風に編集できるWebページを作る方法について解説します。
- wikiとは
- HTMLとwikiの入力方法
- contenteditable属性とは
- HTMLでwiki風Webページを作る方法
- WordPressでwiki風サイトを作るには
- wiki作成におすすめのサービス
以上の項目について解説します。
この記事を読むことで、HTMLをwikiのように編集可能な仕様へ変更する方法について理解できます。また、WordPressを使ってwiki風のWebサイトを作る方法についても解説しているので、気になる方はぜひチェックしてみてくださいね！
ウィキ(wiki)とは
wikiはCMS(コンテンツ管理システム)の一種で、管理者だけでなくユーザーも内容を書き換えできます。
代表的なWebサイトでは、誰でも内容を書き加えることができるウィキペディア(Wikipedia)が挙げられます。
ウィキペディア(Wikipedia)は、ウィキメディア財団が運営しているオンライン百科事典です。wikiの仕組みを利用しているので、ユーザーも内容を書き込んだり追記できます。
ほかにも、wikipediaの企業版である社内wikiも存在しており、一般公開されているサイトからから企業内ツールまで幅広く利用されています。
HTMLの入力方法とwiki記法の違い
wiki記法は、HTMLやCSSといったマークアップ言語やプログラミング言語に比べてシンプルです。
実際どのように入力するのか、HTMLの入力方法と比べながら見ていきましょう。
見出しの入力方法
| 入力内容 | HTML | wiki |
| 小見出し | <h3>小見出し</h3> | *** 小見出し |
| 中見出し | <h2>中見出し</h2> | ** 中見出し |
| 大見出し | <h1>大見出し</h1> | * 大見出し |
文字サイズと文字の装飾方法
| 入力内容 | HTML | wiki |
| 文字サイズ | <font size=”文字サイズを入力”> | &size(文字サイズを入力) |
| 文字色 | <font color=”文字色を入力”> | &color(文字色を入力) |
| 背景色 | <font background-color=”背景色を入力” | &color(文字色を入力, 背景色を入力) |
| 太字 | <strong>太字にする文字</strong> | ”太字にする文字” |
| 斜体 | <i>斜体にする文字</i> | ”’斜体にする文字”’ |
| 下線 | <u>下線を引く文字</u> | %%%下線を引く文字%%% |
| 取り消し線 | <del>取り消し線を引く文字</del> | %%取り消し線を引く文字%% |
| 上付き文字 | <sup>上付き文字</sup> | &sup()上付き文字 |
| 下付き文字 | <sub>下付き文字</sub> | __下付き文字__ |
要素の位置を指定する方法
| 入力内容 | HTML | wiki |
| 左寄せ | <align=”left”> | &align(left){左寄せにする内容} |
| 右寄せ | <align=”right”> | &align(right){右寄せにする内容} |
| 中央寄せ | <align=”center”> | &align(center){中央寄せにする内容} |
リストと画像の入力方法
| 入力内容 | HTML | wiki |
| 箇条書きリスト | <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> | -リスト1 –リスト2 —リスト3 |
| 番号付きリスト | <ol> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> | +リスト1 ++リスト2 +++リスト3 |
| 画像表示 | <img src=”画像のURL”> | &ref(画像のURL) #ref(画像のURL) |
| 画像サイズ | <img src=”画像のURL” width=”横幅” height=”縦幅”> | &ref(画像のURL,横幅,縦幅) |
その他の入力方法
| 入力内容 | HTML | wiki |
| 引用文 | <blockquote>引用したい文を入力</blockquote> | 文頭に半角スペースか「>」を入力したあと、引用したい文を入力 |
| 整形した文字をそのまま表示 | <pre>整形した文字</pre> | =|| 整形した文字を入力 ||= |
| リンク | <a href=”リンク先URL”>リンク名</a> | [[～～>ページ名]] |
| 別ウィンドウ | <a href=”リンク先URL” target=”_blank”>リンク名</a> | [[～～>>リンク先URL]] |
| <video src=”動画のURL”></video> | &video(動画のURL) |
HTMLでwiki風に編集できるcontenteditable属性とは
HTMLで作ったWebページは、ファイルを編集することで内容を変更できます。しかし、contenteditable属性を追加すると、ブラウザ上で誰でも内容を書き換えできるようになるのです。
contenteditable属性の特徴と使い方について解説します。
contenteditable属性とは
contenteditable属性は、指定したHTMLタグ内の要素に変更の権限を付与できるHTML属性の一種です。
contenteditable属性の値に「true」を指定すると編集可能になり「false」を指定すると編集不可になります。
たとえば、下記のコードはcontenteditable属性にtrueの値が指定されているので、ブラウザ上で誰でも編集できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<p contenteditable='true'>この文章は好きなように編集できます</p>
</body>
</html>表示された文字をクリックすると、テキストボックスのように文字入力のマウスカーソルになって内容を編集できます。
また、タグ自体は変更できず内容の文字のみ変更可能です。
contenteditable属性で画像をwiki風に編集する
HTMLのcontenteditable属性をimgタグに指定して画像を表示すると、ブラウザ上で画像を移動したり削除できるようになります。
また、画像の横に文字を追記することも可能です。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div contenteditable="true">
<img src="pic/icon.png">
</div>
</body>
</html>imgタグの親要素に「contenteditable=”true”」を指定することで、imgタグで表示している画像の横に文字を追加したり場所を移動でしたりできます。
実行結果
HTMLのcontenteditable属性でwiki風Webページを作る方法
contenteditable属性でwikiのようにWebページの内容を変更したり追記できる仕様にするには、編集したい範囲をdivタグで囲い「contenteditable=”true”」を指定します。
contenteditable属性は、指定したHTMLタグ内全ての内容に反映されます。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div contenteditable='true'>
<h2>編集できるタイトル</h2>
<p>編集できる内容です。下の画像をドラッグ&ドロップで好きな場所に移動できます。</p>
<img src="pic/icon.png" width="300" height="250" alt="pic1" />
<img src="pic/pc.jpeg" width="300" height="250" alt="pic2" />
<img src="pic/sp.jpg" width="300" height="250" alt="pic3" />
<img src="pic/test.png" width="300" height="250" alt="pic4" />
</div>
</body>
</html>上記コードでは、bodyタグ直下にあるdivタグ内全ての要素が変更できる状態です。
実行結果
下記のように画像を好きな場所に移動したり、文字を変更できます。
また、contenteditable属性の範囲内でEnterを押して改行すると「<div><br></div>」が自動入力されます。
pタグにマウスカーソルを当てた状態でEnterを押すと、divタグがpタグになって改行されます。
pタグの改行後に文字を入力するとpタグ内に文字が指定され、タイトルや画像などpタグ以外の場所で改行して文字を入れると、divタグに指定されるという特徴も押さえておくとよいでしょう。
contenteditable属性でメモ帳を作る方法
contenteditable属性の特徴を活かすことで、HTMLを使ってメモ帳のように編集可能なWebページをブラウザ上に表示できます。
作り方は簡単で、HTMLファイルのbodyタグ内を空白にしてbodyタグに「contenteditable=’true’」を指定します。
すると、ブラウザの表示範囲内は全て編集可能な範囲となり、メモ帳のように文字を入力したり削除したりと自在に編集できます。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body contenteditable='true'>
</body>
</html>実行結果
【応用編】WordPressでwiki風Webサイトを作る方法
WordPressプラグインである「Yada Wiki」を使うと、wikipediaのようなWebサイトがWordPressで作成できます。
Yada Wikiでwikiを作ることで、ひとつの事柄に対して複数人の意見を文字データとして残すことができます。ほかにも、社内Wikiとしてノウハウの共有やスケジュール管理としての活用にピッタリです。
今回は、WordPressのYada Wikiプラグインでサッカーのwikiを作る方法を例にして、作り方を解説していきます。
WordPressにYada Wikiを導入する
WordPressにYada Wikiを導入する手順は下記の通りです。
プラグイン一覧に「Yada Wiki」が表示されるので「今すぐインストール」というボタンをクリック。
社内wikiの内部を作成する
Yada Wikiのインストールが完了したあとは、wikiの主題とその土台となる内容を入力します。
今回は、サッカーのwikiを前提として必要なカテゴリを決めます。カテゴリの具体的な例は下記のとおりです。
- サッカーとは
- サッカーの歴史
- サッカーのルール
- サッカーの有名な大会
- 有名なサッカー選手
カテゴリーを設定するには、WordPress管理画面から「Wiki Pages」欄にマウスを当てて、表示されたメニューの中から「Wiki Categories」をクリックします。
- 名前：カテゴリーの名前を入力
- スラッグ：URLの語尾に入力する英数字を入力
- 説明：カテゴリーの詳細内容について入力
各入力欄を埋めたあと「Add New Wiki Category」という青いボタンをクリックして追加します。
下記のように全てのカテゴリーを入力します。
wikiのトップ画面を作成する
wikiのトップページは、管理画面にある「Wiki Pages」欄から「Add New」をクリックして作成します。
「Add New Wiki Page」という、タイトルと内容の入力画面が表示されます。
まずはトップページに必要な「目次」を入力していきます。「段落」というドロップダウンメニューから「見出し2」を選択て「目次」と入力します。
タイトル入力欄には、トップページと認識できるように「トップページ」などとわかりやすい名前を入力しておくとよいでしょう。
次に目次の内容を入力していきます。
目次のリストを数字で指定したいときは「番号付きリスト」を選択して「・」で指定したいときは「番号なしリスト」を選択します。
選択したあとは「Add Wiki Link」をクリックしましょう。すると、下記の画面が表示されるので「Link」欄にカテゴリーの名前を入力し、Show欄は空白の状態で「Insert Shortcode」という青いボタンをクリックすると目次として設定完了です。
上記の内容で全てのカテゴリーを目次として設定します。
設定したあと、画面右上にある「プレビュー」というボタンを押すと、入力した内容がリンク付きの目次として表示されます。
プレビュー画面で正しく表示されていることが確認されたら、画面右上にある「下書き保存」というボタンをクリックして保存しておくとよいでしょう。
リンク先の詳細画面を作成する
先ほど作成した目次から移動できる、各個別ページの内容を作成します。
目次の直下にある「サッカーとは」という項目を例に解説します。
まず、プレビュー画面で表示されている「サッカーとは」というリンクをクリックします。すると、下記のようにリンク先の設定画面が表示されます。
タイトル欄には、すでに目次でクリックしたリンクの名前が入力されています。
内容欄に「サッカーとは」という題名に関した内容を入力します。
内容を入力した後は、画面右にある「Wiki Categories」欄からタイトルに該当するカテゴリーにチェックを入れます。
最後に「公開」という青いボタンをクリックして完了です。ほかの目次も同じ流れで作っていきましょう。
最後に、目次を表示しているページの画面右上にある「公開」ボタンを押してwikiの完成です。
上記画像のように、クリックしたリンクは色が変わるのでひと目でわかります。
WordPressでwiki風Webサイトを作りたい方はぜひ参考にしてみてくださいね！
wikiを作成できるおすすめWebサービス3選
HTMLをwikiのように編集可能にしたり、WordPressを使ってwiki風のWebページを作ったりできますが、中にはwikiを作れるWebサービスもあります。
その中でも、比較的使いやすいwiki作成サービスを3つ紹介します。
スリムウィキ(SlimWiki)
SlimWikiは、文字や画像、グラフなどを指定する機能が備わっているので、HTMLやWordPressの知識が必要なくてもwikiを作成できるWebサービスです。
ひとつのアカウントで3人のユーザーが利用可能。4人目以降は月額5ドル追加されます。
SlimWikiを使うためにはアカウント登録が必要ですが、名前とメールアドレスを入力して自分でパスワードを決めるだけなので簡単です。
コンテンツの入力欄は下記のようになっています。
WordPressのブロックエディターと似ており、文字や画像の追加が簡単にできます。
プログラミングを始めたばかりでHTMLに自信がない方や、簡単にwikiを作りたい方におすすめです。
ファンダム
ファンダムは完全無料で利用できるwiki作成サービス。バックエンドにMediaWikiというwikiウィキソフトウェアで作られています。
wikiを作るためのテンプレートが用意されており、初心者でも簡単に作れるのが魅力です。ファンダムのトップページには「ハリーポッター」のような映画から「スポンジボブ」のようなテレビシリーズまでエンターテイメント中心のwikiが掲載されています。
ほかのwiki作品を参考にしながら自分の作品を作れる点もメリットと言えるでしょう。
ファンダムの編集画面は下記のとおりです。
テンプレートに沿ってコンテンツを追加するだけで作れるので、HTML学習を初めて間もない初心者の方でもwikiを作れます。
DokuWiki
DokuWikiは、自分のサーバーにダウンロードして利用できるオープンソースのwiki作成サービスです。
同じオープンソースで人気なWordPressと設定方法が似ており、サーバー上にアップロードしてプラグインやPHPコードを使って機能を拡張できます。
DokuWiki用のテンプレートも複数存在しており、Wikipediaのようなデザインテンプレートから、シンプルな作りでレスポンシブに対応しているテンプレートまで利用できます。
DokuWikiを使うときは、レンタルサーバーを利用するか自分のパソコンにサーバーを組む必要があります。また、カスタマイズする際にPHPを触る機会も出てくるので、WordPressを触ったことがある方におすすめのサービスです。
ノートピーエム(NotePM)
NotePMは社内wiki用のサービスで、5,000以上の企業が利用しています。
サイト内検索機能に強いのが特徴で、会社のノウハウやマニュアルなどの社内に関する情報をすぐに検索できます。リモートワークが広がった今、オンラインで社員同士の意思疎通をスムーズに行うための仕組みとしてぴったりのサービスです。
NotePMの機能は、マニュアル作成用のテンプレートから変更履歴の管理まで幅広く取り揃えています。社内情報の内容に合わせてわかりやすく表現できるので、コミュニケーションコストの削減も期待できるでしょう。
料金は人数に応じてプランが組まれており、8人利用で4,800円が最安値です。30日間の無料トライアル期間もあるので、実際に使ってみたあと継続利用の有無を決めることをおすすめします。
社内wikiの利用を検討している企業におすすめのサービスです。
まとめ
今回は、HTMLでwiki風に編集できるWebページを作る方法について解説しましたが、いかがでしたでしょうか？
wikiは第三者が編集可能なCMSで、HTMLよりも簡単なコーディングでWebページ内のコンテンツを作成できます。
HTMLcontenteditable属性を使うと、HTMLタグの内容がwikipediaのようにブラウザ上で編集できるようになります。
簡単にwikiを作りたいときは、wiki作成専用のサービスを利用することがおすすめです。
ぜひ参考にしてみてくださいね！
