軽量マークアップ言語で気楽にマークアップ

軽量マークアップ言語で
気楽にマークアップ
2013-04-20 Web Touch Meeting #056
13年4月21日日曜日

自己紹介
My name is 火村智彦
I Like
GNU Emacs
Terminal
Dvorak

自己紹介
My name is 火村智彦
I Like
GNU Emacs
Terminal
Dvorak
プログラマ的なことをしてる人

告知
オープンセミナー2013@岡山
5月11日 (土)
http://goo.gl/SMRk4
懇親会とか LT で盛り上るので一度は体験を

告知
同じぐらい盛り上げたいなーって思ったら
オープンセミナー2014@広島のスタッフに
2014年 1月か 2月に開催予定

アジェンダ
軽量マークアップ言語について
軽量マークアップ言語 Markdown
さまざまな軽量マークアップ言語
Org Mode の紹介
私の利用事例

軽量マークアップ言語でできること

HTML の作成

軽量マークアップ言語でできること2

軽量マークアップ言語でできること2
WORD の作成

元のファイル

文書の作成
別の形式に変換できる
HTML
Word
スライド

軽量マークアップ言語って
文書を作成するためのコンピュータ言語
書く量の少ないマークアップ言語
変換しなくても比較的読みやすい

確認マークアップ言語って？

確認マークアップ言語って？
代表的なもの
HTML
TeX
XML

確認マークアップ言語って?
プレーンテキストに追加の記述をして
文書の構造を定義したり
デザインを変更したり
コンピュータ言語

確認マークアップ
記述量が少ないのが特徴です。
例

確認マークアップ
記述量が少ないのが特徴です。
強調したい
例

確認マークアップ HTML
<strong>記述量が少ない</strong>のが特徴です
例

軽量マークアップ言語だと
**記述量が少ないのが** 特徴です。
例

軽量マークアップ言語だと
**記述量が少ないのが** 特徴です。
書く量が少ない
例

もっと具体的に

つくりたいページ

つくりたいページ
見出し1
見出し2
ハイパーリンク
引用
リスト

HTMLの場合
<h1>Web Touch Meeting</h1>
<h2>第56回「WEB TOUCH MEETING」やります！</h2>
<p>
<a href="http://atnd.org/events/38431">
お申し込みはこちらのアテンドから事前申請で！
</a>
</p>
<blockquote>
<p>WEB TOUCH MEETINGとは主に広島県、中国地方の方を対象に
ウェブ周りの技術や知識に関して自分は知ってる当たり前のことを
まずはさわりの部分からでもお互いにしあいましょうという会です。</p>
</blockquote>
<p>今回は、以下の<strong>３セッション</strong>を予定しています。</p>
<ul>
<li>
『OOCSS＋』
<ul>
<li>井上さん</li>
</ul>
</li>
<li>
『レスポンシブwebデザインについて』
<ul>
<li>藤本さん</li>
</ul>
</li>
<li>
『軽量マークアップ言語で気楽にマークアップ』
<ul>
<li>ひむらさん</li>
</ul>
</li>
</ul>

じっくりみたい人はこちらへ
http://goo.gl/SMRk4
webtouch.html > raw

軽量マークアップ言語の場合
Web Touch Meeting
=================
第56回「WEB TOUCH MEETING」やります！
--------------------------------------
[お申し込みはこちらのアテンドから事前申請で！](http://atnd.org/events/38431)
> WEB TOUCH MEETINGとは主に広島県、中国地方の方を対象に
> ウェブ周りの技術や知識に関して自分は知ってる当たり前のことを
> まずはさわりの部分からでもお互いにしあいましょうという会です。
今回は、以下の **３セッション** を予定しています。
* 『OOCSS＋』
* 井上さん
* 『レスポンシブwebデザインについて』
* 藤本さん
* 『軽量マークアップ言語で気楽にマークアップ』
* ひむらさん

軽量マークアップ言語ってどんなの
HTML比べて
記述量が少ない
文法規則が簡単
読みやすい

用途
プロジェクトの README
議事録などでメモをとるとき
Webサービスのコメント機能
バージョン管理したいとき

HTMLじゃダメなの?

いいよ

いいよ
HTMLは表現力と柔軟性が高い。

いいよ
でも

いいよ
でも
書く量が多い

Word じゃダメなの？

いいよ

いいよ
見た目どおりのまま編集できて便利

いいよ
でも

いいよ
でも
表示に専用アプリケーションが必要

いいよ
でも
表示に専用アプリケーションが必要
ファイルサイズが大きい

こういうのはやめてくれ

ついでにこれもやめて！！

軽量マークアップ言語じゃなくてもよくないか？

YES

YES
でも

YES
でも
読む機会があるかもしれない

YES
でも
オープンソース界隈ではよく使われてる

YES
でも
メールでワードファイル送るのはやめてください

YES
でも
メールでワードファイル送るのはやめてください
プレーンテキストが好きなんです

まとめ

まとめ
大事なのは

まとめ
大事なのは
誰がなんのために読む文書なのか

まとめ
大事なのは
伝える相手が読みやすいこと

まとめ
大事なのは
誰が書く文書なのか

まとめ
大事なのは
誰が書く文書なのか
書く人が扱いやすいこと

まとめ
軽量マークアップ
言語
HTML Word
表現力低い高い高い
データ形式人にやさしい人にも読める読む人は変態
ファイルサイズ小さい
Wordよりは
小さい
大きい

私の場合
文書を読むときは
ハイパーでポータブルでリッチに読みたい
文章を書くとき
プレーンテキストで気楽に書きたい

私の場合
文書を読むときは
ハイパーでポータブルでリッチに読みたい
文章を書くとき
プレーンテキストで気楽に書きたい
だから軽量マークアップ

アジェンダ
軽量マークアップ言語 Markdown の紹介
さまざまな軽量マークアップ言語を紹介
Org Mode の紹介
私の利用事例

Markdownの紹介

Markdownが使われてるとこ
Tumblr
Qiita
はてなブログ
Github - コメント欄
Ruby on Rails のドキュメント

Markdownの利点
軽量ながらも HTML と同等の表現力
プレーンテキストでの可読性が高い
文法が小さい

Markdownの利点
名前

Markdownの利点
名前
マークアップなのにマークダウン

Markdownの拡張子
md
mdown
markdown

Markdownの拡張子
md
mdown
markdown
例 README.md

Markdownの文法
よく使うものだけ…

M
arkdow
n
段落
何かと世間を騒がせている？レスポンシブwebデザインについて
正直最近になって特に、現場でも対応を余儀なくされてきている
感があります。
ちょうどhtmlのコーディングが、
テーブルレイアウトからcssレイアウトに変わろうとしていた、
そんな時期を思い浮かべます。

M
arkdow
n
段落
何かと世間を騒がせている？レスポンシブwebデザインについて
感があります。
ちょうどhtmlのコーディングが、
そんな時期を思い浮かべます。
空行
改行
改行
改行
改行

H
TM
L
段落
<p>何かと世間を騒がせている？レスポンシブwebデザインについて
感があります。</p>
<p>ちょうどhtmlのコーディングが、
そんな時期を思い浮かべます。</p>

H
TM
L
段落
<p>何かと世間を騒がせている？レスポンシブwebデザインについて
感があります。</p>
<p>ちょうどhtmlのコーディングが、
そんな時期を思い浮かべます。</p>
空行が段落の区切りに

M
arkdow
n
Level1 見出し
# 見出し1
見出し1
======

H
TM
L
Level1 見出し
<h1>見出し1</h1>

M
arkdow
n
Level2 見出し
## 見出し2
見出し2
--------

H
TM
L
Level2 見出し
<h2>見出し2</h2>

M
arkdow
n
Level3 以上
### 見出し3
#### 見出し4

H
TM
L
Level3 以上
<h3>見出し3</h3>
<h4>見出し</h4>

M
arkdow
n
リンク
[Google](http://google.com/)

H
TM
L
リンク
<a href=”http://google.com/”>Google</a>

M
arkdow
n
リスト
* list 1
* list 1-1
* list 1-2
* list 2
* list 2-1
* list 2-2

M
arkdow
n
リスト
* list 1
* list 1-1
* list 1-2
* list 2
* list 2-1
* list 2-2
代わりに + や - も使えます

H
TM
L
リスト
<ul>
<li>list 1</li>
<ul>
<li>list 1-1</li>
<li>list 1-2</li>
</ul>
<li>list 2</li>
<ul>
<li>list 2-1</li>
<li>list 2-2</li>
</ul>
</ul>

M
arkdow
n
数値リスト
1. list A
2. list B
3. list C

M
arkdow
n
数値リスト
1. list A
2. list B
3. list C
めんどくさい場合は 1. を繰り返してもよい

M
arkdow
n
引用
> 何かと世間を騒がせている？
> レスポンシブwebデザインについて
> 正直最近になって特に、
> 現場でも対応を余儀なくされてきている感があります。

H
TM
L
引用
<blockquote>
何かと世間を騒がせている？
レスポンシブwebデザインについて
正直最近になって特に、
現場でも対応を余儀なくされてきている感があります。
</blockquote>

M
arkdow
n
画像
![hogehoge](/images/hoge.png)

H
TM
L
画像
<img src=”/images/hoge.png” alt=”hogehoge”>

M
arkdow
n
コードブロック
```ruby
class Hoge
def hoge
puts ‘hoge’
end
end
```
拡張

H
TM
L
コードブロック
<pre class="sourceCode ruby"><code class="sourceCode ruby">
<span class="kw">class</span> <span class="dt">Hoge</span>
<span class="kw">def</span> hoge
puts ‘hoge’
<span class="kw">end</span>
<span class="kw">end</span>
</code></pre>

Github
コメント欄などなどで、Markdown が使えます
独自拡張されてます
絵文字とかも出せます

Github

Markdownエディタ

Win - Markdown#editor
http://hibara.org/software/markdownsharpeditor/

Mac - Maru
http://mouapp.com/

Emacs - markdown-mode.el

Emacs - markdown-mode.el
省略

marked
http://markedapp.com/

その他プログラマ向けの話
処理系は redcarpet がおすすめ
文法の拡張とかもできるっぽいです
pandoc もアツイです。
PHP なら php-markdown-extras
<small>たぶん</small>

まとめというほどでもないけど
簡単そうですよね？

どちらかというと一般の人に使って欲しい

いきなりWord などで文書を作成するより

いきなりWord などで文書を作成するより
HTMLやMarkdwn で文書の意味や構造を意識
して文章を書いて欲しい

さまざまな軽量マークアップ言語を紹介

文字がやや小さいので
http://goo.gl/SMRk4
見たい形式のファイルを選んで Raw をクリック

HTML
<h1>Web Touch Meeting</h1>
<h2>第56回「WEB TOUCH MEETING」やります！</h2>
<p>
<a href="http://atnd.org/events/38431">
お申し込みはこちらのアテンドから事前申請で！
</a>
</p>
<blockquote>
<p>WEB TOUCH MEETINGとは主に広島県、中国地方の方を対象に
まずはさわりの部分からでもお互いにしあいましょうという会です。</p>
</blockquote>
<p>今回は、以下の<strong>３セッション</strong>を予定しています。</p>
<ul>
<li>
『OOCSS＋』
<ul>
<li>井上さん</li>
</ul>
</li>
<li>
『レスポンシブwebデザインについて』
<ul>
<li>藤本さん</li>
</ul>
</li>
<li>
『軽量マークアップ言語で気楽にマークアップ』
<ul>
<li>ひむらさん</li>
</ul>
</li>
</ul>

Markdown
Web Touch Meeting
=================
--------------------------------------
[お申し込みはこちらのアテンドから事前申請で！](http://atnd.org/events/38431)
> WEB TOUCH MEETINGとは主に広島県、中国地方の方を対象に
> ウェブ周りの技術や知識に関して自分は知ってる当たり前のことを
> まずはさわりの部分からでもお互いにしあいましょうという会です。
* 『OOCSS＋』
* 井上さん
* 藤本さん
* ひむらさん

Markdown
今、最も流行してる
読みやすい
文法が少なくて覚えやすい
いろいろ拡張されている
HTMLが直接書ける => HTML と同等の表現力

== Web Touch Meeting ==
=== 第56回「WEB TOUCH MEETING」やります！ ===
[http://atnd.org/events/38431 お申し込みはこちらのアテンドから事前申請で！]
<blockquote>
WEB TOUCH MEETINGとは主に広島県、中国地方の方を対象に
まずはさわりの部分からでもお互いにしあいましょうという会です。
</blockquote>
今回は、以下の '''３セッション''' を予定しています。
* 『OOCSS＋』
** 井上さん
** 藤本さん
** ひむらさん
MediaWiki

Mediawiki
Wikipediaで利用される記法
柔軟な表が作れる
HTMLが直接書ける
HTMLと同等の表現力

creole
== Web Touch Meeting =
== 第56回「WEB TOUCH MEETING」やります！ ==
[[http://atnd.org/events/38431 お申し込みはこちらのアテンドから事前申請で！]]
* 『OOCSS＋』
** 井上さん
** 藤本さん
** ひむらさん

creole
よく知らない
MediaWikiに似てる

asciidoc
= Web Touch Meeting
== 第56回「WEB TOUCH MEETING」やります！
link:http://atnd.org/events/38431[お申し込みはこちらのアテンドから事前申請で！]
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
今回は、以下の *３セッション* を予定しています。
* 『OOCSS＋』
** 井上さん
** 藤本さん
** ひむらさん

asciidoc
UNIX界でみかけるよーな
man が生成できる
表現力がそこそこ
プレーンテキストの読みやすさも高め

Org Mode
* Web Touch Meeting
** 第56回「WEB TOUCH MEETING」やります！
[[http://atnd.org/events/3843][お申し込みはこちらのアテンドから事前申請で]]
#+BEGIN_QUOTE
#+END_QUOTE
- 『OOCSS＋』
- 井上さん
- 『レスポンシブwebデザインについて』
- 藤本さん
- 『軽量マークアップ言語で気楽にマークアップ』
- ひむらさん

Org Mode
豊富すぎる機能 - プレーンテキスト Oﬃce
Emacs による強力すぎる支援機能
HTML出力は癖がある
アウトライナーとして使いやすい
スケジュール管理などもできる

reSturcteredText
========================================
Web Touch Meeting
========================================
----------------------------------------
.. _お申し込みはこちらのアテンドから事前申請で！: http://atnd.org/events/38431
* 『OOCSS＋』
* 井上さん
* 藤本さん
* ひむらさん

reSturcutredText
プレーンテキストでの読みやすさを重視
文法はやや癖がある
Python界隈でよくみかける

RDoc
= Web Touch Meeting
== 第56回「WEB TOUCH MEETING」やります！
お申し込みはこちらのアテンドから事前申請で[http://atnd.org/events/3843]
* 『OOCSS＋』
* 井上さん
* 藤本さん
* ひむらさん

RDoc
Rubyのドキュメントによく使われる
プログラムの説明に適した機能がちらほら
blog には向かない

textile
h1. Web Touch Meeting
h2. 第56回「WEB TOUCH MEETING」やります！
"お申し込みはこちらのアテンドから事前申請で！":http://atnd.org/events/38431
bq. WEB TOUCH MEETINGとは主に広島県、中国地方の方を対象にウェブ周りの技術や知
識に関して自分は知ってる当たり前のことをまずはさわりの部分からでもお互いにしあい
ましょうという会です。
* 『OOCSS＋』
** 井上さん
** 藤本さん
** ひむらさん

textile
Ruby製のアプリのWikiによく使われている
Redmineとか
表現力は高い
HTMLにべったりな感が。

比較
$ wc -m sample/* | sort -r | sed -e '1 d'
583 sample/webtouch.html
486 sample/webtouch.asciidoc
458 sample/webtouch.rst
390 sample/webtouch.md
361 sample/webtouch.mediawiki
350 sample/webtouch.org
331 sample/webtouch.creole
325 sample/webtouch.textile
320 sample/webtouch.rdoc

Org Modeの紹介

Org Modeの紹介
興味ある人は少なそうなので手ぬきしました
すいません…

Org Mode タスク管理

gorogoro にカーソルを置いて
Ctrl + c, Ctrl + t, d

guruguru にカーソルを置いて
Ctrl + c, Ctrl + t, d

Org Mode 表計算

Org Mode 表計算
Ctrl+c Ctrl+c

Markdownの個人的な利用例

勉強会資料
量が多いとスライドにするの無理
http://goo.gl/Q3E7O

拡大してスライド代わりしにしたり

Hiroshima.rb のウェブサイト
レイアウトは HTML コンテンツは markdown
http://hiroshimarb.github.io
https://github.com/hiroshimarb/hiroshimarb.github.com

レイアウトファイル

内容は Markdown

Jekyll
Markdown などを利用してサイトを作成するツール
静的ファイルを生成するのでアップロードするだけ

Hakyll + SCSS + Compass + Pandoc
http://railsguide.eiel.info/

単なるコードリーディングメモ
https://github.com/eiel/railsdoc.eiel.info

セッションのプロット
アウトライナーとしての利用

そんな感じに
気楽に文書作成できそうですね

以下、告知

告知 AWSハンスオンセミナー
2014-05-13 (火) 13:00 - 16:00
参加費 1000円
http://atnd.org/events/38837
Amazon Web Servicesのアカウントを取得済みで利用でき
る状態であること
Webサーバ、DBサーバ、ロードバランサーがどういったも
のか知っていること
サブネットやルートテーブル、ゲートウェイといった用語を
理解できること

5月は他にもいろいろ
セキュリティもみじ
05-18 (土) 13:00 - 17:00
https://sites.google.com/site/secmomiji/
アジャイルジャパン２０１３−広島サテライト
05-25 (土) 10:00 - 17:00
https://sites.google.com/site/pmajcs9/

告知広島 Git 勉強会
6月1日 (土) たぶん 10:00 から 15:00
会場はたぶん広島工業大学 (五日市)
参加者・発表者募集中です。
http://local.aguuu.com/events/15354

告知広島 MacUG
4月28日 (日) 14:00 - 18:00 三篠公民館
ターミナルの使い方についてとかが。
http://atnd.org/events/38431

告知すごいHaskell読書会
すごいHaskellを楽しく学ぼう！の読書会
参加者があと2人みつかったら
平日の夜にやりたい。
参加者次第で。

参考文献など
Githubで利用できる軽量マークアップ
https://github.com/github/markup
Markdown
http://daringﬁreball.net/projects/markdown/
Redcarpet (Markdown)
https://github.com/vmg/redcarpet
Redcloth (Textile)
http://redcloth.org/

参考文献など
PHP Markdown Extra
http://michelf.ca/projects/php-markdown/extra/
Rdoc
http://rdoc.sourceforge.net/
Org Mode
http://orgmode.org/
Creole
http://wikicreole.org/wiki/Creole1.0

参考文献など
mediawiki
http://www.mediawiki.org/wiki/MediaWiki/ja
reStroucturedText
http://docutils.sourceforge.net/rst.html
AsciiDoc
http://www.methods.co.nz/asciidoc/userguide.html

参考文献など
Jekyll
http://jekyllrb.com/
Pandoc
http://johnmacfarlane.net/pandoc/
org-mode demo
http://www.youtube.com/watch?v=hL0Bh-kDRIo

ご清聴ありがとうございます

軽量マークアップ言語で気楽にマークアップ

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

More from Tomohiko Himura

More from Tomohiko Himura (20)

Recently uploaded

Recently uploaded (10)

軽量マークアップ言語で気楽にマークアップ