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

軽量マークアップ言語で気楽にマークアップ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

プログラマ的なことをしてる人13年4月21日日曜日

告知

オープンセミナー2013@岡山

5月11日 (土)

http://goo.gl/SMRk4

懇親会とか LT で盛り上るので一度は体験を


http://goo.gl/SMRk4

http://goo.gl/SMRk4

告知

同じぐらい盛り上げたいなーって思ったら

オープンセミナー2014@広島のスタッフに

2014年 1月か 2月に開催予定


アジェンダ

軽量マークアップ言語について

軽量マークアップ言語 Markdown

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

Org Mode の紹介

私の利用事例


軽量マークアップ言語でできること13年4月21日日曜日

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

HTML の作成


軽量マークアップ言語でできること213年4月21日日曜日

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

WORD の作成


軽量マークアップ言語でできること元のファイル13年4月21日日曜日

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

文書の作成

別の形式に変換できる

HTML

Word

スライド


軽量マークアップ言語って

文書を作成するためのコンピュータ言語

書く量の少ないマークアップ言語

変換しなくても比較的読みやすい


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


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

代表的なもの

HTML

TeX

XML


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

プレーンテキストに追加の記述をして

文書の構造を定義したり

デザインを変更したり

コンピュータ言語


確認マークアップ

記述量が少ないのが特徴です。

例


確認マークアップ

記述量が少ないのが特徴です。

強調したい

例


確認マークアップ HTML

<strong>記述量が少ない</strong>のが特徴です

例


軽量マークアップ言語だと

**記述量が少ないのが** 特徴です。

例


軽量マークアップ言語だと

**記述量が少ないのが** 特徴です。

書く量が少ない

例


もっと具体的に


つくりたいページ13年4月21日日曜日

つくりたいページ

見出し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://atnd.org/events/38431


じっくりみたい人はこちらへ

http://goo.gl/SMRk4

webtouch.html > raw


http://goo.gl/SMRk4

http://goo.gl/SMRk4

軽量マークアップ言語の場合Web Touch Meeting=================

第56回「WEB TOUCH MEETING」やります！--------------------------------------

[お申し込みはこちらのアテンドから事前申請で！](http://atnd.org/events/38431)

> WEB TOUCH MEETINGとは主に広島県、中国地方の方を対象に> ウェブ周りの技術や知識に関して自分は知ってる当たり前のことを> まずはさわりの部分からでもお互いにしあいましょうという会です。

今回は、以下の **３セッション** を予定しています。

* 『OOCSS＋』 * 井上さん* 『レスポンシブwebデザインについて』 * 藤本さん* 『軽量マークアップ言語で気楽にマークアップ』 * ひむらさん




軽量マークアップ言語ってどんなの

HTML比べて

記述量が少ない

文法規則が簡単

読みやすい


用途

プロジェクトの README

議事録などでメモをとるとき

Webサービスのコメント機能

バージョン管理したいとき


HTMLじゃダメなの?



いいよ



いいよ

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



いいよ


でも



いいよ


でも

書く量が多い


Word じゃダメなの？



いいよ



いいよ

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



いいよ


でも



いいよ


でも

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



いいよ


でも

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

ファイルサイズが大きい


こういうのはやめてくれ13年4月21日日曜日

ついでにこれもやめて！！13年4月21日日曜日

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



YES



YES

でも



YES

でも

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



YES

でも


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



YES

でも



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



YES

でも



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

プレーンテキストが好きなんです


まとめ


まとめ

大事なのは


まとめ

大事なのは

誰がなんのために読む文書なのか


まとめ

大事なのは


伝える相手が読みやすいこと


まとめ

大事なのは



誰が書く文書なのか


まとめ

大事なのは



誰が書く文書なのか

書く人が扱いやすいこと


まとめ

軽量マークアップ言語 HTML Word

表現力低い高い高い

データ形式人にやさしい人にも読める読む人は変態

ファイルサイズ小さい Wordよりは小さい

大きい


私の場合

文書を読むときは

ハイパーでポータブルでリッチに読みたい

文章を書くとき

プレーンテキストで気楽に書きたい


私の場合

文書を読むときは

ハイパーでポータブルでリッチに読みたい

文章を書くとき

プレーンテキストで気楽に書きたい

だから軽量マークアップ13年4月21日日曜日

アジェンダ


軽量マークアップ言語 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の文法よく使うものだけ…


Markdown段落

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

ちょうどhtmlのコーディングが、テーブルレイアウトからcssレイアウトに変わろうとしていた、そんな時期を思い浮かべます。


Markdown段落

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

ちょうどhtmlのコーディングが、テーブルレイアウトからcssレイアウトに変わろうとしていた、そんな時期を思い浮かべます。

空行

改行改行

改行改行


HTML段落

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

<p>ちょうどhtmlのコーディングが、テーブルレイアウトからcssレイアウトに変わろうとしていた、そんな時期を思い浮かべます。</p>


HTML段落

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

<p>ちょうどhtmlのコーディングが、テーブルレイアウトからcssレイアウトに変わろうとしていた、そんな時期を思い浮かべます。</p>

空行が段落の区切りに13年4月21日日曜日

MarkdownLevel1 見出し

# 見出し1見出し1======


HTMLLevel1 見出し

<h1>見出し1</h1>


MarkdownLevel2 見出し

## 見出し2

見出し2--------


HTMLLevel2 見出し

<h2>見出し2</h2>


MarkdownLevel3 以上

### 見出し3#### 見出し4


HTMLLevel3 以上

<h3>見出し3</h3><h4>見出し</h4>


Markdownリンク

[Google](http://google.com/)


http://google.com

http://google.com

HTMLリンク

<a href=”http://google.com/”>Google</a>


http://google.com

http://google.com

Markdownリスト

* list 1 * list 1-1 * list 1-2* list 2 * list 2-1 * list 2-2


Markdownリスト

* list 1 * list 1-1 * list 1-2* list 2 * list 2-1 * list 2-2

代わりに + や - も使えます13年4月21日日曜日

HTMLリスト<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>


Markdown数値リスト

1. list A2. list B3. list C


Markdown数値リスト

1. list A2. list B3. list C

めんどくさい場合は 1. を繰り返してもよい13年4月21日日曜日

Markdown引用

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


HTML引用

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


Markdown画像

![hogehoge](/images/hoge.png)


HTML画像

<img src=”/images/hoge.png” alt=”hogehoge”>


Markdownコードブロック

```rubyclass Hoge def hoge puts ‘hoge’ endend```

拡張


HTMLコードブロック

<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/


http://mouapp.com/

http://mouapp.com/

Emacs - markdown-mode.el


Emacs - markdown-mode.el

省略13年4月21日日曜日

marked

http://markedapp.com/13年4月21日日曜日

http://markedapp.com/

http://markedapp.com/

その他プログラマ向けの話

処理系は redcarpet がおすすめ

文法の拡張とかもできるっぽいです

pandoc もアツイです。

PHP なら php-markdown-extras

<small>たぶん</small>


まとめというほどでもないけど

簡単そうですよね？




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





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





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

HTMLやMarkdwn で文書の意味や構造を意識して文章を書いて欲しい


アジェンダ




Org Mode の紹介

私の利用事例


文字がやや小さいのでhttp://goo.gl/SMRk4

見たい形式のファイルを選んで Raw をクリック


http://goo.gl/SMRk4

http://goo.gl/SMRk4

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>




MarkdownWeb Touch Meeting=================

第56回「WEB TOUCH MEETING」やります！--------------------------------------

[お申し込みはこちらのアテンドから事前申請で！](http://atnd.org/events/38431)

> WEB TOUCH MEETINGとは主に広島県、中国地方の方を対象に> ウェブ周りの技術や知識に関して自分は知ってる当たり前のことを> まずはさわりの部分からでもお互いにしあいましょうという会です。






Markdown

今、最も流行してる

読みやすい

文法が少なくて覚えやすい

いろいろ拡張されている

HTMLが直接書ける => HTML と同等の表現力


== Web Touch Meeting ===== 第56回「WEB TOUCH MEETING」やります！ ===

[http://atnd.org/events/38431 お申し込みはこちらのアテンドから事前申請で！]

<blockquote>WEB TOUCH MEETINGとは主に広島県、中国地方の方を対象にウェブ周りの技術や知識に関して自分は知ってる当たり前のことをまずはさわりの部分からでもお互いにしあいましょうという会です。</blockquote>今回は、以下の '''３セッション''' を予定しています。

* 『OOCSS＋』** 井上さん* 『レスポンシブwebデザインについて』** 藤本さん* 『軽量マークアップ言語で気楽にマークアップ』** ひむらさん

MediaWiki




Mediawiki

Wikipediaで利用される記法

柔軟な表が作れる

HTMLが直接書ける

HTMLと同等の表現力


creole== Web Touch Meeting =

== 第56回「WEB TOUCH MEETING」やります！ ==

[[http://atnd.org/events/38431 お申し込みはこちらのアテンドから事前申請で！]]

WEB TOUCH MEETINGとは主に広島県、中国地方の方を対象にウェブ周りの技術や知識に関して自分は知ってる当たり前のことをまずはさわりの部分からでもお互いにしあいましょうという会です。






creole

よく知らない

MediaWikiに似てる


asciidoc= Web Touch Meeting

== 第56回「WEB TOUCH MEETING」やります！

link:http://atnd.org/events/38431[お申し込みはこちらのアテンドから事前申請で！]

--------------------------------------------------------------------------------WEB TOUCH MEETINGとは主に広島県、中国地方の方を対象にウェブ周りの技術や知識に関して自分は知ってる当たり前のことをまずはさわりの部分からでもお互いにしあいましょうという会です。--------------------------------------------------------------------------------

今回は、以下の *３セッション* を予定しています。



http://atnd.org/events/38431%5B

http://atnd.org/events/38431%5B

asciidoc

UNIX界でみかけるよーな

man が生成できる

表現力がそこそこ

プレーンテキストの読みやすさも高め


Org Mode* Web Touch Meeting

** 第56回「WEB TOUCH MEETING」やります！

[[http://atnd.org/events/3843][お申し込みはこちらのアテンドから事前申請で]]

#+BEGIN_QUOTEWEB TOUCH MEETINGとは主に広島県、中国地方の方を対象にウェブ周りの技術や知識に関して自分は知ってる当たり前のことをまずはさわりの部分からでもお互いにしあいましょうという会です。#+END_QUOTE


- 『OOCSS＋』 - 井上さん- 『レスポンシブwebデザインについて』 - 藤本さん- 『軽量マークアップ言語で気楽にマークアップ』 - ひむらさん


http://atnd.org/events/3843%5D%5B

http://atnd.org/events/3843%5D%5B

Org Mode

豊富すぎる機能 - プレーンテキスト Office

Emacs による強力すぎる支援機能

HTML出力は癖がある

アウトライナーとして使いやすい

スケジュール管理などもできる


reSturcteredText========================================Web Touch Meeting========================================

第56回「WEB TOUCH MEETING」やります！----------------------------------------

.. _お申し込みはこちらのアテンドから事前申請で！: http://atnd.org/events/38431







reSturcutredText

プレーンテキストでの読みやすさを重視

文法はやや癖がある

Python界隈でよくみかける


RDoc= Web Touch Meeting== 第56回「WEB TOUCH MEETING」やります！

お申し込みはこちらのアテンドから事前申請で[http://atnd.org/events/3843]





http://atnd.org/events/3843%5D

http://atnd.org/events/3843%5D

RDoc

Rubyのドキュメントによく使われる

プログラムの説明に適した機能がちらほら

blog には向かない


textileh1. Web Touch Meetingh2. 第56回「WEB TOUCH MEETING」やります！

"お申し込みはこちらのアテンドから事前申請で！":http://atnd.org/events/38431

bq. WEB TOUCH MEETINGとは主に広島県、中国地方の方を対象にウェブ周りの技術や知識に関して自分は知ってる当たり前のことをまずはさわりの部分からでもお互いにしあいましょうという会です。






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の紹介興味ある人は少なそうなので手ぬきしました

すいません…


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


http://goo.gl/Q3E7O

http://goo.gl/Q3E7O

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


Hiroshima.rb のウェブサイトレイアウトは HTML コンテンツは markdown

http://hiroshimarb.github.iohttps://github.com/hiroshimarb/hiroshimarb.github.com


http://hiroshimarb.github.io




レイアウトファイル


内容は Markdown


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


Hakyll + SCSS + Compass + Pandochttp://railsguide.eiel.info/


http://railsguide.eiel.info

http://railsguide.eiel.info

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


https://github.com/eiel/railsdoc.eiel.info

https://github.com/eiel/railsdoc.eiel.info

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


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


以下、告知


告知 AWSハンスオンセミナー2014-05-13 (火) 13:00 - 16:00

参加費 1000円


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 三篠公民館

ターミナルの使い方についてとかが。





告知すごいHaskell読書会

すごいHaskellを楽しく学ぼう！の読書会

参加者があと2人みつかったら

平日の夜にやりたい。

参加者次第で。


参考文献などGithubで利用できる軽量マークアップ

https://github.com/github/markup

Markdown

http://daringfireball.net/projects/markdown/

Redcarpet (Markdown)

https://github.com/vmg/redcarpet

Redcloth (Textile)

http://redcloth.org/








http://redcloth.org

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




http://rdoc.sourceforge.net

http://rdoc.sourceforge.net

http://orgmode.org

http://orgmode.org



参考文献など

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


http://jekyllrb.com

http://jekyllrb.com





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


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

Technology

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