Hatena::ブログ(Diary)

Life like a clown このページをアンテナに追加 RSSフィード Twitter

2010-02-05

はてな記法 基礎文法最速マスター

当初,自分で何かを書く気はなかったのですが,ブックマークコメントを見ていると「はてな的にはやっぱりこれか,これなのか・・・?」と言う気がしたので書きました.Wiki 記法をある程度知っている人は,これを読めばはてな記法の基礎をマスターしてはてなー?になることができるようになっています.また,簡易リファレンスとしても利用できます.

目次
  1. 基礎
    1. プレーンテキスト
    2. コメント
    3. 文字列装飾
    4. 数式
    5. 脚注
    6. スクリプトの実行
  2. 見出し
  3. リンク
    1. Web ページへのリンク
    2. はてなサービス内へのリンク
    3. トラックバック
    4. 自動リンク停止
  4. マルチメディア
    1. 画像の表示
    2. 動画の表示
    3. 音楽の再生プレーヤーの表示
  5. 整形済みテキストブロック
  6. 引用ブロック
  7. 表組み
  8. リスト
  9. 続きを読む記法
  10. ウクレレ記法

1. 基礎

プレーンテキスト

特別な記号(後述)で始まる文字列以外の文字列は全てそのまま出力されます.よく分からない,勉強したくないでござる,はてな記法(笑),と言う人はそのまま文章を書けば OK です.

お前の頭の中がはてなやな

はてなダイアリーでは,改行するまでの文章を一つの段落として扱います(pタグで囲む).そのため,最終的な改行位置をブラウザに任せずに自分で決めた場合,行ごとに大きな空白が開く事になります.改行位置を自分で決めたい場合には,pタグ停止記法を使用します.

><p>
この中では,改行しても pタグは挿入されない.<br />
勘違いしてたけど,それ以外のはてな記法は使用できる模様.<br />
例えば,[http://d.hatena.ne.jp/tt_clown/] はリンクが設定される.
</p><

pタグ停止記法は「><」で囲まれた部分を表すのですが,直後に何らかの HTML が書かれる事を想定して設計されているようです.適当なタグが思いつかない場合は,上記のように pタグを記述しておきます.

個人的には,特に理由がない場合はユーザは段落のみを気にして,実際の改行位置の処理はシステム(ブラウザ)に任せてしまう方が良いとは思います.

コメント

HTML タグのコメントと同様の文法です.ただし,コメントの部分は最終的な HTML のソース部分にも出力されません.

<!-- コメント -->
文字列装飾

はてな記法には,文字列装飾に相当するものがないようです.仕方がないので HTML タグを直書きします.はてな的には,入力支援ボタンを押してもらう事を想定しているようですが,文章を書いている途中でマウスを触るのはめんどくさいので黙って直書きします.

<!-- 太字強調 -->
<strong>太字</strong>

<!-- 斜体強調 -->
<em>斜体とか読みにくいんです</em>

<!-- 取り消し線 -->
<del>取り消し線の中に本心を書くメソッド</del>

「色変えたい><」とか「文字大きくしたい><;」とか言う人は頑張って下さい.

数式

数式は tex記法を用いて記述する事ができます.tex記法は,mimeTeX の機能を利用しているそうです.詳細は,数式を表示する(tex記法) - はてなダイアリーのヘルプ や TeX での数式の記述方法を参照して下さい.

<!-- 詳細は,はてな記法と言うよりは TeX を参照 -->
[tex:x^2 + y^2 = z^2]
[tex:e^{i\pi} = -1]
[tex:\frac{1}{x} + \frac{1}{y} = \frac{1}{z}]
脚注

二重括弧で囲むと脚注になります.括弧の中身に記述した内容は記事の一番下に出力され,記述した個所には *1 などのように表示されます.

いまから大切なお話をします((が,いろいろと前置きが長いので脚注に前置きをだらだらと書きます.
ちなみに,脚注は読み飛ばされる可能性も高くなります.脚注に記述するか,()書きで本文中に
直接記述するかは,記述する中身によって使い分ける必要があります.)).以下略.
スクリプトの実行

はてなダイアリーでは,多くの HTML タグに関してはそのまま(エスケープせずに)出力してくれますが,scriptタグは <script> </script>と言う文字列として表示されます.そのため,原則としては JavaScript などのスクリプトを実行する事はできません*1

今気付いたのですが script開始タグのみを記述して script終了タグを記述しないと表示がバグります(scriptタグに限らず,タグを閉じ忘れると表示はおかしくなりますが).

2. 見出し

はてな記法では,3 段階の見出し記法が用意されています.

* 見出し
** 小見出し
*** 小々見出し

この中で,見出し記法(* 記号1個)のみ少し扱いが異なります.はてなでは,1つの見出しにつき1ページを割り当てます(日記モードを除く?).また,リンクもこの見出し毎に生成されます(こちらは全モード共通).そのため,見出し記法は1つの記事に1つしか使用する事ができません.一方で,小見出し,小々見出しは記事中に複数存在する事ができます.尚,自分のはてなダイアリーがどのモードなのかは,管理→設定→記事の設定で確認,設定する事ができます.

また,見出し記法(* 記号1個)にはいくつかのオプションが存在します.

<!-- http://d.hatena.ne.jp/example/20100205/hoge と言うリンクが生成される -->
*hoge* 名前付き見出し

<!-- カテゴリー分けできる -->
*[Foo][Bar][Bas] Foo/Bar/Bas に属する記事

カテゴライズ機能は,似たような話題の一覧を表示する場合に便利なので,普段から意識してカテゴリーに分けておくと良いかもしれません.

3. リンク

Web ページへのリンク

[] で http:// から始まる URI を囲む(http記法)と,自動的にその URI へのリンクが設定されます.http記法には,いくつかのオプションがあります.よく使うのは,title,bookmark,と image 辺りでしょうか.

<!-- http://d.hatena.ne.jp/ と表示 -->
[http://d.hatena.ne.jp/]

<!-- リンク先のタイトルを表示 -->
[http://d.hatena.ne.jp/:tilte]

<!-- 「はてな」と表示 -->
[http://d.hatena.ne.jp/:title=はてな]

<!-- リンク先の被ブクマ数を表示 -->
[http://d.hatena.ne.jp/:bookmark]

<!-- リンク先のタイトルと被ブクマ数を表示 -->
[http://d.hatena.ne.jp/:title:bookmark]

<!-- 文字列の代わりにリンク先のスクリーンショットを表示 -->
[http://d.hatena.ne.jp/:image]

bookmark オプションを付与すると,生粋のはてなー?であればわくわくせざるを得ない被ブクマ数の画像を表示させる事ができます(→Life like a clown).また,image オプションを(画像ファイル以外に)付与すると,文字列の代わりにリンク先の Web ページのスクリーンショットを表示させる事ができます.尚,image オプションについては,画像ファイルの場合と使い方などが若干異なるので注意が必要です(画像ファイルの表示に関しては後述).

screenshot

上記の http記法の他に,主要な Web ページに対しては専用のリンク記法も用意されています.それらのリンク記法,および http記法の他のオプションについては,はてな記法一覧で確認して下さい.

はてなサービス内リンク

はてなの各種サービスへのリンクに関しては,id:tt_clown のように記述する事で該当ユーザのトップページへのリンクを設定する事が出来ます.はてな内リンクには,いくつかの種類が存在します.

<!-- http://d.hatena.ne.jp/tt_clown/ へリンク -->
id:tt_clown

<!-- http://d.hatena.ne.jp/tt_clown/ へリンク -->
d:id:tt_clown

<!-- http://b.hatena.ne.jp/tt_clown/ へリンク -->
b:id:tt_clown

<!-- http://hatena.g.hatena.ne.jp/hatena/ へのリンク -->
g:hatena:id:hatena

はてなダイアリーにおいては,単に id:tt_clown と記述すると該当ユーザのはてなダイアリーへのリンクになってしまうので,はてなブックマークなどにリンクを設定したい場合は,b:id:tt_clown のように種別に相当するプレフィックスを付与します.その他のはてな内リンク記法については,はてな記法一覧で確認して下さい.

トラックバック

設定で自動トラックバックが有効である場合,本文中に出現した URI および id 記法で生成されたリンクへは自動的にトラックバックが送信されます.ただし,「ちょっとした更新」にチェックを入れて編集した場合には,自動トラックバックが有効である場合でもトラックバックは送信されません.自動トラックバックが有効であるかどうかは,管理→設定→コメント・トラックバック設定で確認,設定することができます.

トラックバックに関する詳細は,トラックバックを送信する - はてなダイアリーのヘルプ を参照して下さい.

自動リンク停止

はてなダイアリーでは数多くのリンクを自動的に設定しますが,以下のように“[]”で囲んだ URI,キーワードに対しては自動的なリンクを設定しません.

<!-- http://d.hatena.ne.jp/tt_clown/ へのリンクを設定しない. -->
[]http://d.hatena.ne.jp/tt_clown/[]

<!-- リンクを設定せずに,[http://d.hatena.ne.jp/tt_clown/] と表示する.-->
[][http://d.hatena.ne.jp/tt_clown/][]

<!-- id 記法を用いてもリンクを設定しない -->
[]id:tt_clown[]

<!-- 意図しないキーワードへのリンクが設定された場合に無効化する -->
[]キーワード[]

4. マルチメディア

画像の表示

画像の表示方法は,いったん画像を はてなフォトライフ へアップロードしてから表示する方法と,(はてなフォトライフ以外の)Web 上に存在する画像を直接表示する方法に 2 通りが存在します.

<!-- はてなフォトライフにアップロードした画像を表示させる場合 -->
f:id:tt_clown:20100205141507p:image

<!-- 画像の URI を直接指定して表示させる場合 -->
[http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg:image]

<!-- 表示する画像の大きさを調節する場合 -->
[http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg:image:h50]
[http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg:image:w150]

はてなフォトライフにアップロードすると,画像を表示しているページの左上に下記のような記述があります.アップロードした画像を表示させる場合は,この「f:id:」部分をそのまま記述します.尚,はてなフォトライフに関しては,編集画面から直接操作するボタンも存在します.

f:id:tt_clown:20100205141507p:image

一方,(はてなフォトライフ以外の)URI 先の画像を直接表示させる場合には,http記法の imageオプションを使用します.imageオプションには,さらに表示サイズを調節するためのオプションが存在しており,オリジナルのサイズ以外で表示したい場合は,これらのオプションを使用します.

動画の表示

http記法の movie オプションを使用すると,リンク先の動画を再生するためのプレーヤーが表示されます.movie オプションには,さらに表示する再生プレーヤーの大きさを指定するオプションが存在します.大きさを指定するオプションには,横幅,高さの絶対値を指定するオプションの他に small オプションも存在します.また,ニコニコ動画に関しては専用の記法も存在しているようです.

<!-- movie オプションを用いて再生プレーヤーを表示する -->
[http://www.youtube.com/watch?v=revlrzqZoW4:movie]
[http://www.nicovideo.jp/watch/sm1128042:movie]

<!-- 再生プレーヤーの大きさを指定する場合 -->
[http://www.youtube.com/watch?v=revlrzqZoW4:movie:w300]
[http://www.youtube.com/watch?v=revlrzqZoW4:movie:h100]
[http://www.youtube.com/watch?v=revlrzqZoW4:movie:small]

<!-- ニコニコ動画専用 -->
[niconico:sm1128042]
音楽の再生プレーヤーの表示

http記法の sound オプションを使用すると,リンク先の音楽ファイルを再生するためのプレーヤーが表示されます.

<!-- 公式からコピペしたので何の音楽が流れるのか知りません -->
[http://hatena.g.hatena.ne.jp/files/hatena/3ab34c9ad414e964.mp3:sound]

5. 整形済みテキストブロック

はてな記法で最も便利な機能の一つが pre記法です.pre記法には,通常の(HTML の preタグ相当の)pre記法とスーパーpre記法の 2 種類が存在します.

<-- pre記法 -->
>|
pre記法の場合,HTML タグはてな記法は展開されてしまう.
|<
<!-- スーパーpre記法 -->
>||
スーパーpre記法の場合,<strong>HTML タグ</strong>や
[http://d.hatena.ne.jp/tt_clown:title=はてな記法]は展開されずにそのまま出力される.
||<

pre記法(HTML の preタグ)は,通常の文章を書く際にはあまり使用する事はないのですが,サンプル・プログラム等を貼りつけようとすると使用頻度が増大します.スーパーpre記法のおかげで,プログラマは貼りつけるプログラムを自力でエスケープする作業から解放されます.

さらに,スーパーpre記法ではシンタックス・ハイライト機能も提供されています.書き出しの「||」 の中に該当するプログラミング言語の名前を記述すると,そのプログラミング言語に適したシンタックス・ハイライトを行って表示されます.例えば,C++ の場合は「>|cpp|」と記述します.

#include <iostream>

int main(int argc, char* argv[]) {
    std::cout << "Hello, hatena world!" << std::endl;
    reutrn 0;
}

対応しているプログラミング言語については,ソースコードを色付けして記述する(シンタックス・ハイライト) - はてなダイアリーのヘルプを参照して下さい.

6. 引用ブロック

「>>」だけの行と「<<」だけの行で段落をはさむと,その部分が引用文だということを示すことができます.

<!-- 引用記法.>> の中には引用元の URI を指定する事ができる. -->
>http://d.hatena.ne.jp/tt_clown/20100202/1265096776:title:bookmark>
ここ最近,「○○○ 基礎文法最速マスター」と言う記事が流行っていたようです.この各記事の被ブクマ数を
見ていると,プログラミング言語毎の(はてな界隈での)人気がよく表れているなーと思ったので被ブクマ数
の多い順に列挙してみました*1.
<<

「>>」の中に,引用元の URI を記述する事で,引用元へのリンクを設定する事ができます.このリンクには,リンクで説明したオプションのうち,title, bookmark オプションを使用する事ができます.

ただし,引用記法では URI に「&」などの一部記号が混じっていると表示がおかしくなるようです.引用元 URI にそのような記号が混じっている場合は,Bitly | URL Shortener and Link Management Platform などの URI 短縮サービスを使用して逃げます.

7. 表組み

「|」で区切ることで,表組みが作成されます.先頭に「*」を付与すると項目名になり,表示方法が少し変わります.

<!-- 公式のコピペ -->
|*名前|*色|*個数|
|りんご|赤|1|
|みかん|だいだい|2|

はてな記法の表組みで提供される機能はこれだけです.「セル毎の横幅を指定したい」とかいろいろな要求を持った人は,頑張って table タグを記述して下さい.

8. リスト

はてな記法では,「+」を用いる数字リスト,「-」を用いる記号リスト,「:」を用いる定義リストの 3 種類のリスト表示方法が提供されています.数字リストと記号リストは,別階層であれば混在させる事ができるようですが,定義リストは独立して使用します(そもそも階層と言う概念がないが).

<!-- 階層が異なれば + と - を混在させる事ができる -->
+ ぶどう
-- 巨峰
-- マスカット
+ もも
-- すもも

<!-- どこまでネストできるのかな・・・ -->
- もも
-- すもも
--- すももも
---- すもももも
----- すももももも

<!-- 定義リストは別扱い? -->
:はてな:変な人がいるところ><
:2ちゃんねる:とにかく怖い人がいるところ><;
:mixi:楽しい人がいるところ^−^

9. 続きを読む記法

「=」を 4個か 5個続けて記述した行のみが現れると,それ以降の記述は隠され,代わりに「続きをよむ」と言うリンクが生成されます.「=」の数(4個 or 5個)の違いは,その後の見出し記法の表示方法の違いです.

<!-- 続きを読む記法 -->
以上.
====
補足.

<!-- これは表示される -->
*見出し2
<!-- スーパー続きを読む記法 -->
以上.
=====
補足.

<!-- これも隠れる -->
*見出し2

10. ウクレレ記法

そんなの知りません.

おわりに

何か,はてなの回しものみたいなものになりましたが,あまり気にしない事にします.それと,「入力支援ボタン使えば?」と言う人とは残念ながら宗教が異なるので,人によってはあまり参考にならないかもしれません.

References

*1iGoogle ガジェットなどを利用すれば抜け道はあるようですが.