「みんなの翻訳」は、世界中の文書をみんなで協力して翻訳するサイトです。

みんなの翻訳ロゴ
ブクタブ
翻訳サイト

カテゴリ一覧

このサイトについて 新規登録はこちら お試し翻訳

一覧

2017/07/28

メンテナンス終了のお知らせ

2017/7/25-2017/7/28に実施したメンテナンスは、2017/7/28/14:20に終了いたしました。 ご協力をいただき、ありが…

List

Hnoss

English⇒Japanese

shikimi

English⇒Japanese

sysInfo

English⇒Japanese

tkkobe

English⇒Japanese

ホーム > 翻訳記事

翻訳記事

AsciiDocでブログを作るには | from Opensource.com / Andrew Thornton

  AsciiDocマークアップ言語とHugoパブリッシング・プラットフォームを組み合わせると、動作が軽く、メンテナンスが簡単なウェブサイトやブログを作れるんです。

 2017年8月11日 |  Andrew Thornton (Red Hat)
 

   僕は仕事の関係上、毎日のようにコンテンツ・マネジメントツールとマークアップ言語を使って、ドキュメントを書く作業をしています。
 マークアップ言語のなかでも、僕が特に気に入っているのが、「AsciiDoc」です。シンタックスが単純なのに、機能は十分。その機能性には、ドキュメント・オタクですら満足してしまうくらいなのです。
 AsciiDocを使えば、HTMLよりも感覚的にドキュメントを書けますし、ウェブやPDFにしても見やすくて、伝える力が上がります。

 でも、僕はここで「AsciiDocでウェブサイトを作る方法ってないの?」と疑問に思ったんです。
 

  そこで私は自分でネット検索をかけたり、チャット仲間に尋ねまわりながら、「Hugo」というパブリッシング・プラットフォームを発見しました。このプラットフォームには、MarkdownやAsciiDocをウェブコンテンツに変換する機能があるといいます。
 言語への対応が充実しているほかにも、デザインテンプレートやテーマなどもあるということで、「これは実際に使えるのではないか」と興味がわきました。(ここのサイトでも参考にしたページがあります。)

 

  僕がHugoに感じた最大のメリットは、データベースに大量の設定をしなくても、ブログが作れるというところでした。
 Hugoで作成したページは、HTMLに変換されるので、サイトの読み込みが早く、メンテナンスが簡単です。
 早速、自分も手持ちのサーバーで試してみることにしました。
 もしあなたがサーバーをお持ちで、そこでHTMLさえ扱えれば使えるはずなので、皆さんもお試しください。
 

  そもそもデータベースに無駄がなく、PHPをつかわないのであれば、SQLインジェクションという不正アクセス攻撃のリスクを大きく下げられます。それだけ安全なサイトを作れるんですよ。

 しかし、毎回感じるメリットはどちらかというと、
 昔ながらのプラットフォームで効率よくウェブを作れて、コンテンツ・デリバリーネットワーク(CDN)と併用すれば、とても高速なウェブサイトを作れるところですね。
 

 そして、たいていのブログに求められる機能を付けることができます。
 例えば、新しい記事を追加したら、自動的にRSSフィードにも反映されます。
 もしチームでサイト制作にかかる場合でも、誰もがサイトの写しをローカルマシンに保存できます。例えば、下書きを保存すれば後で推敲することもできますね。どの記事も公表するタイミングを選べます。
 それから、Git branching strategyを併用すれば、ブログや記事を複数名で編集することもできます。そこで、誰がどのページを編集したかも明示され、どの段階の記事を公表するかも選べます。Disqusなどをプラグインとして追加すれば、コメントを受け付けることもできるようになりますよ。

 

  プラットフォームを少し工夫する


  とりあえず「最低限の」要件を満たしたブログの原型は完成したものの、まだ物足りない部分があります。
 「AsciiDoc」と「Hugo」の組み合わせは悪くない。しかし、サイトとして使うにはもう少しだけ調整が要るようです。

 そこで私は週末を使って、その他雑多な調整を行うことにしました。コンテンツもまだ1つも書いていません。
 この日は、テーマの決定と、バックエンドサービスの構築にほとんどの時間を割きました。

 

 Hugoはあくまでテンプレートシステムなので、それだけでサイトを構築するには幾分か手の届かない部分がありました。

 なので、構築したプラットフォームに AsciiDoctorという、AsciiDocを使っていく上で便利なツールを入れます。

 AsciiDoctorには、AsciiDocで記述した文書をPDFやLinuxマンページなど、他のフォーマットにローカルな環境で変換する働きがあります。ここで使うのはその中でも、HTMLに変換する機能でして、コンテンツにあと何が足りないのかを確かめることができます。

 それから、Hugoはコンソールで動かすツールなため、文書を保存すれば、現在のページの状態が見られるところがいいですね。
 こういう機能がなかったら、僕はだいたいこうなってます。

 ブログできたよっしゃ~!これかなりの自信作!
 いや、ちょっと待った。なんで書いた文章が全部「H1」扱いなの?…ちくしょう(泣)

 ―こんなことが夜中の3時くらい、眠気と格闘しながらコーヒーをがぶ飲みしている状態で起こる。

 
 

  文章を書いてみよう

  まず最初の下書きを、取りあえず英語で書いてみることにしました。(下書きはたいていそうです。)とはいえ、その下書きも今まで自分がGitで発表していたページのプログラム言語を差し替えるだけですから、そんなに手間はかかりません。
 AsciiDocとHugoの力で、筋の通ったHTMLが作られることでしょう。
 Gitなので、ページを変更することはブランチを変更することです。完成した文章は、私のマスターブランチに組み込まれます。

  また、私が書く予定の文書には、ある程度定型化されたテキストやコンテンツなどが含まれています。(例えば、ライセンス、サポート、組織説明などの情報などです。同じようなことしか書ないけど、ある程度繰り返し説明しなくちゃいけないものでしょ。)
 それから、ボイラープレート・コンテンツやテンプレート定義など、インクルード文を使って挿入する要素も、僕の仕事には欠かせません。
 このように、サイトを作るときには、複数の定型文・定型コンテンツを使うことがあり、それらはモジュラー化していつでもすぐに使える状態にしておきたいものです。
 

  掲載するコンテンツは、ある程度テーマごとにメタデータを付けて分類をできるようにしておきたいですね。(例えば、記事タグ、コンテンツグループ、「豆知識」や「よくある質問」などのコーナー、など)
 これにおいてはAsciiDocは優れていまして、それらのメタデータをドキュメントのヘッダに入れられる「メタデータ・セクション」なるものがあります。ブログの記事分類に大役立ちですね。
 Hugoにもメタデータを入れることができて、こちらも新しいコンテンツを作る時に役立ちます。

 

  私は「Vim」というエディターを気に入っているので普段から使っているですが、これを使って書いたシンタックスファイルは、AsciiDocでも使うことができます。

 コンテンツを作る時に、今記述している言語が、ページではどのように表現されるかを常に知りたいという方は、Atomエディターに、「AsciiDoc Preview 」プラグインを入れると、リアルタイムでプレビューが表示されるようになります。
 AtomエディターはGitHubで制作されたこともあって、Gitでのブランチ記述に対応しています。なので、GitHubでページを記述するときにも便利です。

  [写真] AsciiDocプレビューを表示したAtomエディター

 

  ここで、なんと自分が記述したい文書がほとんど、HugoとAsciiDocでまかなえることが分かりました。以前よりページ記述が簡単になったので、ますますコンテンツ制作に集中できることでしょう。
 今までGitで文書を書くときにも、PHP/MySQLコンテンツ管理システムを使っていたのですが、今回のワークフロー構築でサイトのパフォーマンスがぐっと上がりました。

 

  あなたもやってみよう!

  さて、今回HugoとAsciiDocで制作したページですが、その詳しい作り方をGitHubで公開しています。コンテンツやテーマ、それから制作時の注意事項などが書いてありますので、ぜひご覧ください。
 READMEファイルには、Hugoのダウンロード方法と、AsciiDocで記述するための設定方法を段階ごとに書いてあります。実際にやってみるときの参考にしてください。

  やってみた!という方は、ご自分のプロジェクトからリンクを張って、コメントを送ってくれると幸いです。

PDF
更新日:2017-08-20 12:57:20 Hnoss 1  del.icio.usに追加   はてなブックマークに追加   twitterに投稿   facebookでshare
公開ノート

文中で気になるのが、最終的にはHugoを使ってというより、AsciiDoctorを使ってHTMLに変換している感じがあるくだりです。大事なのは、HugoじゃなくてAsciiDoctorではないかと疑っています。

[ 原文 ] https://opensource.com/article/17/8/asciidoc-web-development Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス
翻訳者ページをみる

この記事の翻訳者

Hnoss さんの翻訳記事

【GitLab Pages 公式 を訳してみた】GitLab Pages 説明書 

GitLab Documentation > User documentation > Projects >GitLab Pages 説明書  GitLabには「GitLab Pages」という機能があります。  GitLab…2017-10-15 12:39:59

【GitLab Pages 公式 を訳してみた】GitLab Pages サーバー管理者向け説明書

  はじめに GitLab Pages機能 は、GitLab EE 8.3以降から使えるようになりました。 カスタムCNAMEにTLS証明書が使えるようになった のは、GitLab EE 8.5以降です。 コミュニ…2017-10-15 12:39:13

GitLab PagesでのTLS設定方法と、Let's Encryptについて | from: about gitlab.com

 GitLab Pagesで作られたサイトを、 Let's Encrypt でHTTPS化する方法をお教えします。   どうしてTLS/SSLが必要か  HTTPSについて話し合ったときなどに、よく「静的サイト…2017-10-10 21:24:06

【GitLab Pages 公式 を訳してみた】GitLab Pages のこと全部教えます!③

GitLab Documentation > User documentation > Projects > GitLab Pages 説明書 >GitLab Pages のこと全部教えます!③ 記事の 種類 : 取扱説明書 || 対象 : 初心者 || …2017-10-09 23:13:04