Hnoss

Hnoss

さーてと。GitLabランナーのインストール編終了です!
カレンダー

文書タグ

フノス(訳者)(155) IT(127) 解説記事(82) オープンソース(49) GitLab CI(34) Linux(32) メディア(31) ウェブ制作(23) DTM(19) HTML5(19) Libre Music(18) コンテナ(18) おすすめ オープンソース・ソフトウェア(17) 百科事典(14) プラグイン(13) 文化(12) ソフトウェア(11) 録音(11) ミキシング(11) MIDI(10) 西アジア/中東(10) グルジア(9) 東ヨーロッパ(9) 料理(9) ジョージア(9) セキュリティ(8) シーケンス(8) 芸能(8) 音楽編集(8) 音楽(7) マスタリング(7) 経済(6) WordPress(5) アプリ(5) 業務効率化(5) JACK(5) コマンド(5) Google(4) Windows(4) 映像制作(4) Android(4) GNU(4) 音楽プレーヤー(4) マイクロサービス(4) 北米(3) アニメ(3) ホームオートメーション(3) アニメーション(3) IoT(3) Ardour(3) 社会(3) Java(3) ワークフロー(3) ソーシャルメディア(3) DAW(3) 欧州(3) Ubuntu(3) Python(3) 牛(2) ニュース(2) GNOME3(2) 歴史(2) 仮想通貨(2) マーケティング(2) PlayStation(2) 古代エジプト(2) 有角神(2) ERPシステム(2) 電子ブック(2) エジプト(2) ALSA(2) OS X(2) トヨタ(2) Krita(2) 電子書籍(2) ERP(2) バト(2) ウィッカ(2) Twitter(2) GPL(2) オカルト(2) ロスレス音源(2) iOS(2) スマホ(2) 魔女宗(1) アクティブSETI(1) バイノーラル(1) アップストリーム・パッケージング(1) 画像(1) 意味(1) コシディウス(1) インド(1) ユーコン(1) サウンドフォント(1) UNIX(1) ヤーウェ(1) CD(1) タブレット(1) 羊(1) ベルゼブブ(1) デジタルサイネージ(1) VR(1) ポータブルソフトウェア(1) 由来(1) グンデストルップの大釜(1) カナン(1) カナダ(1) 詩篇(1) チップチューン(1) バ・ネブ・デデト(1) コットン・マザー(1) クラウドキャスティング(1) VST(1) リーナス・トーバルズ(1) エリファス・レヴィ(1) マサチューセッツ(1) 考古学(1) 申命記(1) スタジオジブリ(1) クヌム(1) 魔女裁判(1) オンデマンド(1) 政治(1) バフォメット(1) 国際(1) クリエイティブ・コモンズ(1) 黙示録(1) Synfig(1) 独占(1) アモン(1) セイラム魔女裁判(1) ねじ巻きラジオ(1) 3D(1) EU(1) イボ人(1) 国際公文書館会議(1) マイナビ(1) キリスト教(1) レビ記(1) アマナイ(1) 広告(1) KXStudio(1) 絵文字(1) サンフランシスコ(1) イケンガ(1) リクルート(1) ユダヤ教(1) ウルガタ聖書(1) 科学技術(1) Blender(1) 出エジプト記(1) 観光案内(1) ツイッター(1) Youtube(1) パキスタン(1) CC(1) ハトホル(1) パン(1) 地方(1) 羊神(1) ギリシャ(1) 高速道路情報無線(1) ゲーム(1) 法律(1) 中南米(1) モヘンジョ=ダロ(1) 悪魔(1) ラジオ(1) OpenToonz(1) 電子教材(1) アレクサンドロス大王(1) ローマ(1) ポッドキャスト(1) パシュパティ(1) アピス(1) 宗教(1) テレビ(1) BountySource(1) 船乗りの柱(1) シリア(1) GPS(1) 日記(1) アフリカ(1) リグ・ヴェーダ(1) F-Droid(1) 教育(1) bi-modal IT(1) ムネヴィス(1) ネオペイガニズム(1) コミュニティ放送(1) アンビソニック(1) Papagayo(1) 写真(1) 元ネタ(1) ケルヌンノス(1) ナイジェリア(1) 聖書(1) 任天堂 DS(1) 学校(1) 日本(1)
リファレンス

first-time visitors
user guide
謝辞

「みんなの翻訳」は情報通信研究機構言語翻訳グループ東京大学図書館情報学研究室による共同プロジェクトであり、三省堂国立情報学研究所連想情報学研究開発センターが開発に協力しています。三省堂には「グランドコンサイス英和辞典(36万項目収録)」の使用を許可していただきました。

連携研究グループはこちらをご覧ください。

「みんなの翻訳」を使っている翻訳グループについてはこちらをご覧ください。

バナー

logo

ポスター

poster

フライヤー

poster poster
Mozilla Firefox ブラウザ無料ダウンロード
本サイトはブラウザ「Mozilla Firefox」推奨です。
Firefox3で動作確認しています。

Valid XHTML 1.0 Transitional

site_image
SSGs Part 2: Modern Static Site Generators  | about GitLab.com / Marcia Ramos
https://about.gitlab.com/2016/06/10/ssg-overview-gitlab-pages-part-2/
Hnoss Hnoss     最終更新:2017-09-23 11:58:35    PDF


 引き続き、静的サイト・ジェネレータ特集です。
 前回は、「静的サイトとは何か」というような内容で終わってしまいましたが、いよいよ本題です。

 静的サイト・ジェネレータって何でしょう。
 というか、なんのためにどうやって使うものなの。
 どんなことにむいているの。できないことって何。
 GitLab Pagesで使う時の約束事は?
                        などの疑問にお答えします。

 

 【前回の記事】 SSGを知る①:静的 vs 動的 ウェブサイト

 【次回の記事】 SSGを知る③:様々な静的サイト・ジェネレータを使うための予備知識

 
 注:今回は、ウェブ開発に関する知識をある程度持ち合わせている人を対象にした記事です。
 静的サイト・ジェネレータに興味があり、特にGitLab Pagesへのデプロイを真剣に考えている方は、ぜひご一読ください。


 


  最近の静的サイト・ジェネレータって、どのへんがいいの?

 静的サイト・ジェネレータとは、静的サイトの作成を自動的に行ってくれるソフトウェアのことです。コード記述をする時には、変更をすぐさま反映できる利点を活かして、動的な処理がなされることが多くあります。
 なので、SSGの特性を「コード記述は動的に、発表するものは静的に」と言い表す場合があります。
 セキュリティリスクがほとんどなく、それなりに良いウェブサイトを作成できることが最大のメリットです。

 SSGの良さは、コード記述が効率的なことと、お金がかからないこと(特にウェブ・ホスティング関係)、そしてページの読み込み時間を動的サイトよりも短縮できることです。

 また、アクセス数が突然増加しても、静的サイトがアクセス不能になることはほとんどありません。なぜなら、動的サイトよりも仕組みが単純で、サーバーにかかっている負担が少ないからです。

 注:この仕組みについてもっと詳しく知りたい方は、前回の記事をご覧ください。


 SSGの構造

 SSGには、静的サイト開発をより早く失敗せずに終わらせることが求められています。そのため、ソフトウェアの構造としてはやや独特ですけれど、構造自体が難しいわけではありません。
 主に次の部分に分かれています。

  • 開発環境
  • テンプレート・エンジン
  • マークアップ言語
  • プロセッサー
  • ディレクトリの構造

 開発環境

 開発環境、またの名をプラットフォームは、SSGを作り上げているプログラミング言語によってほとんど決定します。プログラミング言語が違えば、設定やカスタマイズの方法、それからパフォーマンスの癖などが違ってきます。
 SSGは Ruby、Python、Node JSなどで記述されているものが多く見られます。

 テンプレート・エンジン

 ウェブページを作りたい人なら、さすがにテンプレート・エンジンが何であるかはわかっておいた方がよいみたいです。
 テンプレート・エンジンは、動的言語で記述されています。サイトの構造を決定しておくもので、入れておくとページ作りが大変にはかどります。
 代表例: LiquidHamlSlim (Ruby)、Twig (PHP)、Swig (JavaScript)

 たとえば、Liquidテンプレート・エンジンを使ってページを記述すると、このようなHTMLファイルが作成されます。

======================
<!DOCTYPE html>
<html lang="en">
     {% include head.html %}
<body>
     {% include header.html %}
     <main class="content">
          {{ content }}
     </main>
     {% include footer.html %}
</body>
</html>
======================
 「head、header、footer」という3つの.htmlファイルが挿入されていることがわかりますね。
 Liquidの場合、この3つのファイルがテンプレートとして自動的に挿入されます。挿入しているファイル自体は静的ですが、ファイルを自動で入れる際に、動的な言語が必要なようです。
 {{ content }}の部分に、ページの内容が記述された別のファイルが入るので、その部分がページ毎に異なります。

 こうしてつくられたページはウェブサーバーに収容される前に、全てのファイルをコンパイルして、きちんとしたHTMLファイルに変換されます。
  この工程をビルドといいます。

 これらのシステムの利点

  • 打ち込むコード数が減るので、必然的に打ち間違いが減る
  • ページのコードで毎回同じ部分が短縮されるので、どこが違うのかが分かりやすい。
  • 挿入されるファイルの内容を変更すれば、サイト中のページをまちがいなく一斉に変更でき、メンテナンスが簡単。


 マークアップ言語

 マークアップ言語とは、コンピューターの中で文書を書くために開発されたシステムのことです。
 決まった作法に従って文章を書くだけで、機械で表示できる形式に変換できます。まさに機械にも人間にも分かりやすいスグレモノ。
 単に文字を書くだけでなく、文字に色を付けたり、リンクを入れたりと、エフェクトを添加することもできるので、サイトを作る時には是非とも活用したいものです。

 とくに軽量マークアップ言語と呼ばれる部類は、覚える作法もそこまで多くなく、様々なテキストエディターで記述できるようになっています。
 あなたが書きたいコンテンツに合ったものを選びましょう。

 ウェブコンテンツも作りやすい特性上、ほとんどのSSGがマークアップ言語に対応しています。少しマイナーかもしれませんが、 AsciiDocTextileReStructuredTextなども軽量マークアップ言語の一種です。

 マークアップ言語にmarkdownを使っているSSGでも、たいていmarkdownエンジンを選ぶことができるようになっています。たとえば、Rubyで記述されたMarkdownエンジンを少し紹介すると、KramdownRDiscountRedcarpetRedClothあたりですね。

 markdownでページを書くと、初めの方に「フロントマター(front matter)」というページの情報を載せる項目があるのです。
 次に例示するのは、Jekyll例示サイト「example.md」ファイルとMiddleman例示サイトの「example.html.md」ファイルに書かれているフロントマターです。どちらも同じ内容のもの使っています。

======================
---
# front matter (3つの項目に分かれている)
title: "Hello World" # 記事タイトル
date: YYYY-MM-DD HH:MM:SS # 本来は更新日時が "2016-04-30 11:00:00"のように表示される
author: "Foo Bar" # 作者
---

# An h1 heading

Some text.
======================

 フロントマターは変数です。テンプレート・エンジンに代入させる設定をすると、フロントマターの内容がそのままサイトのデザインに組み込まれるようになります。

 Liquidテンプレート・エンジンの場合だと、次のように設定します。

======================
<h2>Title: {{ page.title }}</h2>
<p>Date: {{ page.date }}</p>
<p>By {{ page.author }}</p>
======================

 今回のフロントマターの場合、HTMLに直された時には次のようになります。

======================
<h2>Title: Hello World</h2>
<p>Date: 2016-04-30 11:00:00</p>
<p>By Foo Bar</p>
======================

 そして、コンテンツ化された時には、単に次のように出力されます。

======================
<h1>An h1 heading</h1>
<p>Some text.</p>
======================



 プロセッサー

 プロセッサーはコンテンツを作る時に使う言語の定型文セットのようなものです。コードを打つ手間が省け開発が簡単になるほか、コンパイルする時もバグの心配が少なくて済みます。
 たとえば、CSSなら SassStylusが、JavaScriptなら CoffeeScript などが有名です。

 どれだけ短くなるか、同じ設定を通常のCSSとSassで書いて比べてみましょう。

 通常のCSS

======================
h1 {
  color: #333;
  padding-top: 30px;
}
p {
  color: #333;
}
======================

 Sassで書いた場合
======================
$clr = #333
h1
  color: $clr
  padding-top: 30px
p
  color: $clr
======================
 まず最初に、「$clr」で色を指定してから、「color」の項目で代入させています。Saasには「$clr」のような変数があり、複数個所で同じ設定が簡単にできるんです。
 { }(中括弧)や ; (セミコロン)での区切りもありませんね。これがもっと長文化すると、入力する文字数も少なめになることがわかりますよ。

 そして、このように、短くて単純な設定をし終えたら、後は自動的に普通のCSSに変換してコンパイルされます。
 本当はもっと面白い機能がたくさんあるのですが、それはちょっと長くなるので、ここでは割愛します。
 

 もう一度いいますけど、この2つのCSS設定、どっちも内容同じですからね。

 ディレクトリの構造

 静的サイトを構成するディレクトリの配置は、SSGによってそれぞれ異なります。
 SSGを使い始める前に、そのSSGがどのような「ファイルツリー」を構成しているかについてきちんと確かめておいてください。大切です。
 「サイトが何でかビルドしない」という人の大半が、ファイルを適切に配置できていません。
 その原因は、ファイルツリーをほとんど理解できていなかったり、そこの説明を読み飛ばしているところにあります。

 Hexo structureMiddleman structureJekyll structureなど、各SSGの説明をよく読んで、新しく作ったファイルを正しいディレクトリに入れてください。


 SSGを選ぶときに参考にしたいポイント

 ディレクトリの構造の好き嫌いなどの、基本的な機能についてだけでなく、
 ビルドイン機能もSSGを選ぶ重要なポイントです。
 これがあるのとないのとでは、サイトを作る手間の桁が違う場合もあります。
 最低限、次の3項目があるかどうかをチェックしてください。

  • ローカル環境にサイトのプレビューを表示する簡易サーバー(ほとんどのSSGについている)
  • ライブリロード・プラグイン[LiveReload plugin]   (ページにかけた変更をすぐに表示する機能。ブラウザをリロードする手間がなくなる。)
  • ビルドインコンパイラが自分の使いたいプロセッサに対応しているかどうか

  Blog-Aware SSGs(ブログ対応SSG)
 最近の静的サイト・ジェネレータは、ブログの制作に対応していることが特色です。
 ブログを作るのに、記事を入れておくためのデータベースや、サーバで処理しなくてはならないファイルをわざわざ作らなくても、コンテンツの拡充を楽に行えます。

 コンテンツを日時順に並べたり、アーカイブリストを作ったり、「ブログといえば」というコンテンツを作ることができるんですよ。

 基本的には、ファイルツリーとテンプレート・エンジンを使ってサイトを作っていきます。記事はファイルツリーの中の「posts」ディレクトリに入れられることがほとんどです。それにテンプレート・エンジンのデザインが自動で適用されていきます。
 この特定のディレクトリ内にある記事に、テンプレートが自動対応する機能が「posts dynamically」などと説明されていることがあるので、覚えておきましょう。

 Liquidテンプレートを使ったブログを作るとして、全てのページに何らかの処理を一括でかけるfor loopという設定があります。

======================
<ul>
   {% for post in site.posts %}
    <li>
     <span>{{ post.date }}</span>
     <h2>
      <a class="post-link" href="{{ post.url }}">{{ post.title }}</a>
     </h2>
    </li>
   {% endfor %}
</ul>
======================
  この設定例だと、
 サイトの中のそれぞれのブログ記事対して
 ( {% for post in site.posts %}の部分)、

 番号の付かないリストとして日付順に表示し
 (<span>{{ post.date }}</span>)、

 それぞれの記事タイトルに、あてはまるページのリンクURLをつなげる
 (<a class="post-link" href="{{ post.url }}">{{ post.title }}</a>)

 ようにしてあります。

 もちろん、ここにあるのはあくまで一例ですから、HTMLを変更すれば他の一括処理も可能です。
 たとえば、同じカテゴリの文章だけを表示したりして、検索しやすくするという設定もできます。写真や本などのコレクションごとに分類してもおもしろいですね。

 デザインはSSGがテンプレート・エンジンを自動適用するので、これといった心配がありません。


 静的サイトに載せられるコンテンツ

 静的サイトは、HTML、CSS、JavaScriptでできたコンテンツなら、いくらでも載せられます。
 もっといえば、クライアントサイド・プロセシングができる言語でできていれば、何でもありです。
 

 対応言語とファイル形式

  • これらのファイル拡張子がつく言語のいずれか:.html / .css / .js / .xml / .pdf / .txt
  • 主要なメディアファイル:画像音声映像SVG

 対応している双方向サービス

 

 対応ユーティリティ

 静的サイトではできないこと

  • ユーザー記録
  • 管理者アクセス
  • mail() 関数でのメール送信
  • その他サーバーサイド言語、スクリプト


 これらの動作は全てサーバーサイドでの処理が必要です。
 特に、静的サイトのみを受け付けるウェブサーバーではこれらが使えないメカニズムについては、このシリーズの最初の記事でお伝えしました。

 SSGではできないことを外部ツールで補う

 ユーザー認証

 ユーザー記録ができないことから、ユーザー認証もできないことがわかります。
 ですが、Firebaseなどの外部サービスのユーザー認証を使えば、静的サイトでもユーザー認証ができるようになります。詳しくはこちらのページをご覧ください。

 コンテンツ・マネジメント

 SSGディレクトリに、ウェブブラウザから編集を加えることが不可能なわけではありません。
  Teletext.ioが出しているサービスからなら、それが可能です。ただし、あくまでできることは手直しのみで、新しくページを作成することができません。
 お使いのウェブブラウザでサービスを開始する方法は、ユーザー説明書に書いてあります。

 コンタクトフォーラム

 コンタクトフォーラムも外部サービスとの連携で掲載できるようになります。
 たとえば、 FormspreeFormKeepWufooFoxyFormGoogle Formsなどが使えます。
 どうしてもメールスクリプトを使いたい場合には、SendGridを使うという方法もあるようです。

 JavaScriptが使えない場合

 静的サイトにJavaScriptを載せることは自由ですが、ブラウザがJavaScriptに対応しておらず、まったく動作しない場合があります。
 その場合は、JavaScriptが動作していない旨を相手に伝える必要があります。
 そのときに、<noscript>タグをウェブページに追加します。JavaScriptが使えなかったときにだけ表示されるはずです。

======================
<noscript>Please enable JavaScript on your browser for a better experience with this website!</noscript>
======================
         あるいは
======================
<noscript>当ウェブコンテンツを十分にお楽しみいただくため、お使いのブラウザでJavaScriptの使用を許可するように設定してください。</noscript>
======================

 おわりに

 今回の記事はここでおわりですが、静的サイト・ジェネレータの使い方が、読む前より少しだけリアルに想像できるようになってくれたら幸いです。
 動的サイトの機能性は、確かに目を見張るものがあります。
 しかし、今回紹介した通り、静的サイトでもできることは思ったよりもたくさんあったでしょう。この時点で欲しい機能が全部見つかった!という方は、ぜひともSSGの使用をお考え下さい。

 次回は第3回、このシリーズは最終回ですけれども、GitLab Pagesで様々なSSGを使った実例をご紹介する予定です。
 SSGごとにどのようなCI設定をすればよいのかについても、ある程度ご説明しますので、ぜひご期待ください。

 様々なSSGで作成したサイト見本をこちらのページ(GitLab Pages公式)に掲載しています。新しいSSGを使ったサンプルも受け付けております。

 関連記事

原文:https://about.gitlab.com/2016/06/10/ssg-overview-gitlab-pages-part-2/
Creative Commons License
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス外部リンク
新着文書(Hnoss)

Install GitLab Runner
GitLab Runner > GitLab Runnerをインストールする  GitLab Runnerは、GNU/Linux、 macOS、 FreeBSD、 Windowsでインストールと使用すること...
GitLab Runner bleeding edge releases
GitLab Runner > GitLab Runnerをインストールする >nightly版をインストールする 警告: この操作でインストールされるランナーは、まだテ...
Run GitLab Runner on a Kubernetes cluster
GitLab Runner > GitLab Runnerをインストールする >Kubernetesクラスターにインストールする  KubernetesでGitLab CI Runnerをお使いに...
Install GitLab Runner on FreeBSD
GitLab Runner > GitLab Runnerをインストールする >FreeBSDにインストールする 注: FreeBSDでは、現在 ”開発最先端”とされて...

新着文書

Revisit to resist: Histories of the movement to end gender-based violence
抵抗のための再検討:ジェンダーに基づく暴力を終わらせるための活動の歴史 2017年11月8日 記憶は抵抗である。あなたの話が沈黙させられ挑まれたな...
What do women’s rights have to do with the SDGs and the internet?
女性の権利はSDGsとインターネットにどのような関係があるか? 2017年8月2日、スリランカ 女性は均質な集団ではなく、科学技術へのアクセスもまた、...
Sexual rights and the internet: Third EROTICS global survey now launched!
性的権利とインターネット:第3回EROTICS国際調査、現在開始! 2017年7月19日 EROTICS国際調査が戻ってきた! もしあなたが、インターネットを自ら...

新着Wikipedia翻訳

Air gap malware
エアギャップ・マルウェア エアギャップ・マルウェアとは、様々なエアギャップの隠されたチャネルを使い、安全なコンピュータ・システムのエアギャッ...
Air gap (networking)
エアギャップ(ネットワーク関係) エアギャップ(air gap:空隙)またはair wall(空気壁)、エア・ギャッピング[1]とは、ネットワーク・セキュリ...
HTTP Public Key Pinning
HTTP公開鍵ピニング HTTP公開鍵ピニング(HPKP: HTTP Public Key Pinning)[1]とは、HTTPヘッダによって実現されるセキュリティの仕組みであり、HT...

更新履歴

※文書量によっては処理に数十秒かかる場合があります
バージョン 比較対象 更新日時 更新者
1(最新) 2017-09-23 11:58:30 Hnoss
2 2017-09-22 23:01:55 Hnoss
3 2017-09-22 23:01:53 Hnoss
4 2017-09-20 23:40:06 Hnoss
5 2017-09-20 23:40:00 Hnoss
6 2017-09-17 23:04:39 Hnoss
7 2017-09-17 22:59:51 Hnoss
8 2017-09-17 22:59:14 Hnoss
9 2017-09-17 22:58:08 Hnoss
10 2017-09-17 22:54:42 Hnoss

    
ブックマーク登録

タグを「;(半角セミコロン)」区切りで入力して下さい(例)tag1;tag2;tag3
10タグまで登録可能。各タグ30文字まで

履歴
状態 作業中 作業予定あり 作業予定なし 作業完了
テーマ 社会 政治 法律 経済 文化 芸能 科学技術 IT 健康/医療 スポーツ メディア 植物 動物 菌類 地方 国際
地域 日本 東アジア アフリカ 南アジア 東南アジア 西アジア/中東 太平洋 北米 中南米 欧州
ジャンル ニュース 解説記事 論文 日記 百科事典

コメントを入力して下さい
0 / 250
    
ブックマーク登録

ブックマークに登録しました。


言語選択

    
ファイルプロパティ

使用許諾条件
ファイル情報
あなただけがこのファイルを閲覧・編集できます。
みんながこのファイルを閲覧できますが、
編集ができるのはあなただけです。
あなたに加えて、指定された人やグループが
このファイルを自由に閲覧・編集できます。
公開設定
編集設定
グループ:0組 翻訳者:0人
    
アクセス属性
この文書は「非公開」設定になっています。
一般公開する場合は、編集ページの書誌情報で「公開」設定に変更して下さい。
翻訳者選択

※メニュー「翻訳者管理」で翻訳者、グループを追加することができます。


    
ノート

非公開ノート
0 / 2000 ※「公開・編集」権限を持つ翻訳者のみに公開されます。
公開ノート
0 / 2000 ※文書を「公開」にした場合、一般に公開されます。

言語選択

 →