Grav Documentation では、シンプルのな画像ギャラリーの例がありました。 これを利用して、 下のようなページメディアにあるファイルの一覧を作ってみたいと思います。
テンプレートを追加するのは面倒なので、 ページの編集で Twig が実行できるようにします。 ページ内の Tiwg 部分の処理を実行させるオプションを有効にするためには、 ページの header 部分に下記を追加するか、 管理パネルのページオプションの「高度」から プロセスの Twig をチェックして保存します。
process:
markdown: true
twig: true
ページコンテンツには、 pdf ファイルなどを追加して下記の Twig を記述します。
<ul>
{% for pdf in page.media.files %}
<li><a href="{{ pdf.url }}">{{ pdf.url[39:] }} ({{ pdf.size//1024 }}KB )</a></li>
{% endfor %}</ul>
ページメディアのファイル数だけループして、 ファイルの URL ・ Size を取得して <a>
タグを作成しています。
ループ部分の page.media.files
はファイルの種類によって変わります。
また、 pdf.link()
、 pdf.title
だと <p>
タグが出力されてしまうので、 pdf.url[39:]
で URL の Path 部分を切り取りしています。
切り取る文字数はサイトによって調整して下さい。
<ul>
<li><a href="/user/pages/01.blog/50.grav-page-media/bocchan.pdf">bocchan.pdf (1275KB )</a></li>
<li><a href="/user/pages/01.blog/50.grav-page-media/gingatetsudono_yoru.pdf">gingatetsudono_yoru.pdf (634KB )</a></li>
<li><a href="/user/pages/01.blog/50.grav-page-media/hashire_merosu.pdf">hashire_merosu.pdf (397KB )</a></li>
<li><a href="/user/pages/01.blog/50.grav-page-media/maihime.pdf">maihime.pdf (694KB )</a></li>
<li><a href="/user/pages/01.blog/50.grav-page-media/shayo.pdf">shayo.pdf (1150KB )</a></li>
<li><a href="/user/pages/01.blog/50.grav-page-media/wagahaiwa_nekodearu.pdf">wagahaiwa_nekodearu.pdf (3089KB )</a></li>
</ul>
Grav Documentation のように meta.yaml
ファイルを使えば、 もっと細かい情報まで表示できるようになります。
このページで使われている PDF は青空文庫より取得・変換しています。
]]>TTBase は常駐型のユーティリティをプラグインとしてまとめて一つにできるソフトとして、 もともと K2さんによって開発されていましたが、 その後 オープンソースソフトウェアとなり開発が止まっていました。 しかし、 2016年2月に tapetum さんによって 32/64bit 両方を読み込める 派生「hako」が 2016年2月に公開されました。
タスクトレイを左クリックから「HotkeyCppの設定」から「追加」ボタンを押します。 ホットキーを割り当てて、 「Command」からプラグインを選んで「ID」で使う機能を選択します。
数年ぶりに TTBase が使えるようになって嬉しいです。 以前 TTBase で 対応していた Tclock と CLCL も 64bit 版が出てきてくれたら、 もっと嬉しい。
]]>Grav のインストール方法から管理パネルを使った基本的な設定・使い方、 テーマのカスタマイズ方法までの連載です。
第5回目は Grav のテーマ編集でよく使う変数と Twig の解説です。
なお、 これらの記事は一部 Grav learn (The MIT License © 2014 Grav) を基に翻訳・改変し、 使用しています。
今回はテーマでよく使う変数と Twig の解説ですが、 自分用のメモも兼ねてます。 正確にいえば Grav のテーマ変数と Twig の機能は別ですが、 同時に使うことが多いのでまとめました。 詳しくは Grav の公式サイトと Twig の公式サイトを読んで下さい。
{{ base_url_absolute }}
{{ base_url_relative }}
ホスト情報あり/なしで、サイトのベース URL を返します。
{{ theme_url }}
現在のテーマの相対 URL を返します。 画像や JavaScript・CSS ファイルなどに使用してください。
{{ config.site.title }}
{{ config.system.languages.supported }}
\user\config
内の site.yaml と system.yaml の値を返します。
{{ page.url }}
{{ page.url(true) }}
ページの相対 / 絶対 URL を返します。
{{ page.header.title }}
{{ page.header.metadata.description }}
ページヘッダーの値を返します、
{{ page.media.images|first }}
{{ page.media['myfile.pdf'] }}
ページと同じフォルダ内にある最初の画像 / 特定のファイルを返します。
{{ page.taxonomy.tag }}
ページにつけられた taxonomy を返します。
{{ page.date|date("Y/m/d") }}
日付を指定した書式で返します。 [PHPの日付書式](http://jp2.php.net/manual/ja/function.date.php?target=_blank ”PHP: date - Manua”)
{{ page.date|nicetime(false) }}
日付を何分前/何時間前などに変換します。
{% if A %}
{% elseif not B %}
{% elseif C and D %}
{% elseif E or F %}
{% else %}
{% endif %}
{% for i in [1, 2, 3, 4, 5] %}
{% endfor %}
{% include 'header.html.twig' %}
他のファイルを読み込みます。
{% set foo = 'bar' %}
変数を設定します。
{# コメント #}
処理されないコメントです。
{{ page.url(true)|ltrim('https?://') }}
左から指定された文字を切り捨てます。
{{ 'welcome'|upper }}
{{ 'WELCOME'|lower }}
文字列を大文字化 / 小文字化します。
{% for i in [1, 2, 3, 4, 5]|slice(0, 2) %}
{# 1~2 が処理されます #}
{% endfor %}
配列を指定した場所から指定した数だけ切り取ります。
Page Collections はテンプレートでも使用できます。
{% set progress = page.collection({'items':{'@taxonomy.category': page.header.taxonomy.category},'order': {'by': 'defaults', 'dir': 'asc'}}) %}
ページと同じカテゴリーを昇順でコレクションします。
<ul>
{% for post in page.find('/blog').children.order('date', 'desc').slice(0, 5) %}
<li class="recent-posts">
<strong><a href="{{ post.url }}">{{ post.title }}</a></strong>
</li>
{% endfor %}
</ul>
ページの URL に /blog
が含まれる下位ページを降順にして、 先頭から5つ繰り返します。
<h2>Kevin Smith's Posts</h2>
<ul>
{% for post in taxonomy.findTaxonomy({'author':'ksmith'}) %}
<li>{{ post.title }}</li>
{% endfor %}
<ul>
taxonomy の author に ksmith とつけられたページを繰り返します。
以上で5回にわたってお送りした Grav のインストール方法から管理パネルを使った基本的な設定・使い方、 テーマのカスタマイズ方法まででした。
Grav が公開され約1年半ですが、 途切れることなく更新が続いています。
Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。
Grav CMS、 Pico CMS、 Jekyll CMS、 HTMLy CMS、 Monstra CMS を Google Trends で検索してみましたが、 この中では勢いのある CMS だということがわかります。 Grav は Flat File CMS の中でも後発ですが、 その分洗練されています。
公開直後から Grav を使用してきましたが、 そのうち日本語の解説が増えないかなと思いながら使ってきました。 残念ながら、 日本語の解説は今でも少なく自分で書いてみようと今回の連載になりました。 簡単な解説ですが、 これで Grav の日本語の使用者が増えることを祈ってます。
]]>Grav のインストール方法から管理パネルを使った基本的な設定・使い方、 テーマのカスタマイズ方法までの連載です。
第4回目は Grav で使える Markdown 記法です。
なお、 これらの記事は一部 Grav learn (The MIT License © 2014 Grav) を基に翻訳・改変し、 使用しています。
Grav では一般的な Markdown に加え、 一部の GitHub Flavored Markdown に対応しています。 また、 Grav だけで使える特殊な記法もあります。 解説は Grav だけで使える記法 のみします。
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
___
---
***
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
そのまま。行末にスペース2つで改行
**rendered as bold text**
_rendered as italicized text_
~~Strike through this text.~~
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
* valid bullet
- valid bullet
+ valid bullet
+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem
In this example, `<section></section>` should be wrapped as **code**.
// Some comments
line 1 of code
line 2 of code
line 3 of code
```
Sample text here...
```
``` js
grunt.initConfig({
assemble: {
options: {
assets: 'docs/assets',
data: 'src/data/*.{json,yml}',
helpers: 'src/custom-helpers.js',
partials: ['src/partials/**/*.{hbs,md}']
},
pages: {
options: {
layout: 'default.hbs'
},
files: {
'./': ['src/templates/pages/index.hbs']
}
}
}
});
```
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be...
]]>
Grav のインストール方法から管理パネルを使った基本的な設定・使い方、 テーマのカスタマイズ方法までの連載です。
第3回目は Grav のデフォルトテーマ「Antimatter」の日本語化とカスタマイズ方法です。
なお、 これらの記事は一部 Grav learn (The MIT License © 2014 Grav) を基に翻訳・改変し、 使用しています。
今回は「Antimatter」の日本語化ですが、 先に完成品を置いときます。 「Antimatter」の継承テーマ(Wordpressでいう子テーマ)です。 解説に興味のない方はダウンロードして、使い方を読んでください。 変更部分はCC0 ライセンスです。
antimatter-ja-1.8.0.zip License : The MIT License © 2014 Grav
テーマにオリジナルの「Antimatter」がインストールされていることを確認します。
解凍し、 FTP で \user\themes
内にフォルダごとアップロードします。
管理プラグインの「設定-システム」の「デフォルトテーマ」から 切り替えます。
シェアボタンは \user\config
の site.yaml で設定します。
管理パネルからは追記できないので、 FTP でダウンロードするなどしてください。
いらないボタンは true
を false
にしてください。
share:
facebook: true
twitter: true
hatena: true
line: true
pocket: true
Antimatter 日本語版の主なファイルについて解説していきます。
テーマの設定ファイルです。
streams
部分で「antimatter-ja」にはないファイルは、 基の「antimatter」テーマを読み込んでいます。
enabled: true
default_lang: ja
dropdown:
enabled: false
streams:
schemes:
theme:
type: ReadOnlyStream
prefixes:
'': [user/themes/antimatter-ja, user/themes/antimatter]
html, body, button, input, select, textarea, .pure-g, .pure-g [class*="pure-u"], h1, h2, h3, h4, h5, h6 {
font-family: 游ゴシック, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
}
游ゴシック(YuGothic)は細めのフォントですので、 好みで消してください。
テンプレートの日本語化
日本で一般的な書式にします
{{ page.date|date("M") }}
→ {{ 'MONTHS_OF_THE_YEAR'|ta(page.date|date('n') -1) }}
月の書式を「Mar」→「3月」に変更します
\user\plugins\archives\templates\partials
内の archives.html.twig を \user\themes\antimatter-ja\templates\partials
フォルダにコピーして編集します。
{{ month|date('Y') }} {{ 'MONTHS_OF_THE_YEAR'|ta(month|date('n') -1) }}
<a href="https://twitter.com/share?text={{ page.title }}&url={{ page.url(true) }}{% if page.taxonomy.tag %}&hashtags={% for tag in page.taxonomy.tag %}{{ tag }},{% endfor %}{% endif %}" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="http://www.facebook.com/sharer.php?u={{ page.url(true) }}" data-ref="{{ page.title }}" target="_blank"><i class="fa fa-facebook-square"></i></a>
<a href="http://b.hatena.ne.jp/entry/{{ page.url(true)|ltrim('https?://') }}" target="_blank"><i class="fa fa-hatena"></i></a>
はてなブックマークは Font Awesome にはないので、 林家次男さんを参考にアイコンフォントっぽいものを追加する。
.fa-hatena:before { content: "B!"; font-family: Verdana; font-weight: bold }
<a href="http://line.me/R/msg/text/?{{ page.title }}%20{{ page.url(true) }}" class="line" target="_blank"><img src="{{ theme_url }}/images/linebutton_20x20.png" alt="LINEで送る" /></a>
.line > img {
width: 1em;
height: 1em;
margin-bottom: -2px;
}
Line は専用アイコン(改変不可)、 「LINEで送る」又は「LINE」のテキストでしか設置できません。
(2) 設置者は、LINEで送るボタンを外部サイトに設置する場合、専用アイコンを使用しなければなりません。但し、設置者は、専用アイコンの代わりに「LINEで送る」又は「LINE」というテキスト文字を使用することができます。
(3) 設置者は、専用アイコンの変更や改変を行なってはなりません。
© LINE Corporation
<a href="http://getpocket.com/edit?url={{ page.url(true) }}&title={{ page.title }}" target="_blank" rel="nofollow"><i class="fa fa-get-pocket"></i> 後で読む</a>
次回、 Grav で使える Markdown 記法に続きます。
]]>Grav のインストール方法から管理パネルを使った基本的な設定・使い方、 テーマのカスタマイズ方法までの連載です。
第2回目は Grav の管理パネルを使った基本的な設定・使い方です。
なお、 これらの記事は一部 Grav learn (The MIT License © 2014 Grav) を基に翻訳・改変し、 使用しています。
今回は管理パネルを使って日本語化、 システム・サイト設定、 更新・バックアップ、 ページの追加・変更をします。
管理パネルにログインする場合は http://yourwebsite.com/admin
にアクセスしてください。
後述しますが、 管理パネルの URL は変更可能です。
ユーザー作成で入力した Fullname(上記だと「あんりあ」)をクリックしてユーザー設定に移動します。 「Language」を「日本語」に変更し、 Sava します。
左サイドバーの「 設定」をクリックして、 システム・サイト設定に移動します。
言語の「対応」に「ja」を追加し、 「デフォルト言語」を「付加」を「いいえ」にし、 保存します。 続いてタブの「サイト」クリックして、 サイト設定に移ります。
「サイトのタイトル」・「デフォルトの著者」・「デフォルトのメール」・メタデータの「description」にサイトの概要を入力します。 保存して、 ダッシュボードに戻ります。
最新のページ更新の更新時間部分(上記だと「16分前」)が日本語化されました。 左上の Grav 管理の横の でサイトに移動できます。 サイトのタイトルが変更されていることを確認してください。
ダッシュボードでは、 Grav・プラグイン・テーマの更新が一括でできます。
メンテナンスの「 更新」をクリックすると、 アップデートがあったものは全て更新されます。
ここで 「Internal Server Error」 エラーが出る場合は、 Zip モジュールがないかもしれません。。
FTP でアクセスし /logs
内の grav.log に grav.CRITICAL: Class 'ZipArchive' not found
というエラーが出ていれば、 Zip モジュールがありません。
使用したい場合は、 サーバ管理者に問い合わせてください。
「 バックアップ」をクリックすると、 キャッシュ等を除いてサイトすべてを zip にしてくれます。
「バックアップをダウンロード」をクリックすると、 ローカルに保存できます。
ブログに新しい記事を追加します。 左サイドバーの「 ページ」をクリックして移動します。
右上の「 ページの追加」をクリックすると、 上記の画面になります。 フォルダー名は URL になりますので、 英数小文字とハイフン・アンダーバーしか入力できませんので IME を切ってください。(URL はオプションのスラッグで変更もできます) 上位ページに「Home」を選択することで、 Blog の下位ページになります。 表示テンプレートはページファイルで選択できます。 今回はブログの記事なので「Item」を選択します。
記事の内容は Markdown 記法で入力します。 エディタ部分の右上の「」で Markdown プレビューができます。 「===」で一覧表示の際に表示する範囲を指定できます。 (「Continue Reading...」より前か、後ろか)
オプションで「日付」・「Category」・「Tag」を入力し、 保存します。
新しい記事が追加されました。
今度は、 ブログ記事以外のページを追加します。
上位ページを「最上位」、 ページファイルを「Default」を選択します。 内容を入力し、 保存します。
メニューに「About」が追加されました。
ブログタイトルの「 My Gravtastic Blog A tale of awesomazingadventures」を変更します。 これは 記事の上位ページに書かれているので、 「 ページ」の「Home」をクリックします。
内容を変更し、 保存します。
不正ログイン対策で管理パネルの URL を変更します。 左サイドバーの「 プラグイン」をクリックし、「 Admin Panel 」へ移動します。 「Basics」 の 「Administrator path」を適当な文字列に変更します。 (他のページの URL に被らないようにして下さい) 保存したら変更した URL で再度ログインしてみてください。
次回、 Grav のデフォルトテーマ「Antimatter」の日本語化とカスタマイズ方法に続きます。
]]>このサイトで紹介している Grav のインストール方法から管理パネルを使った基本的な設定・使い方、 テーマのカスタマイズ方法までを全5回で連載します。 Grav については以前の記事、 GravってどんなCMS?2015年度版。をお読みください。
この連載で、 このようなブログ+αがあるサイトを構築します。
第1回目は Grav の FTP を使ったインストール方法です。
なお、 これらの記事は一部 Grav learn (The MIT License © 2014 Grav) を基に翻訳・改変し、 使用しています。
今回の解説は、 使用するサーバ環境によって異なる部分があります。 サーバ環境については、 各サーバ管理者にお問い合わせください。
GPM(Grav Package Manager)は、 テーマ・プラグインのインストールやアップデートなどを簡単に行える機能です。 GPM がついたモジュールがなくても動きますが、 手動でインストールやアップデートなどをする必要があります。
以下のファイルをダウンロードします。
ダウンロードフォルダに以下のファイルがあると思います。(x.x.xはバージョン)
これらのファイルを解凍します。
解凍したプラグインをそれぞれ「admin」「login」「forms」「email」にリネームして grav-skeleton-blog-site フォルダ内の \user\plugins
フォルダに移動します。
サーバーのルートディレクトリに解凍した grav-skeleton-blog-site フォルダの中身をアップロードします。
アップロードが終わったら、 ブラウザでサイトにアクセスしてみてください。 ユーザー作成画面が表示されるはずです。
表示されない場合は、 以下のインストールでよく起きるトラブルを参考にしてください。 ユーザー作成画面が表示された方は、 ユーザー作成へ飛んでください。
以下の内容の info.php を作成し、 サーバーにアップロードしてアクセスします。
<?php phpinfo(); ?>
このような画面が表示されるはずです。 表示されたらサーバ要件を満たしているか確認し、 アップロードした info.php は削除してください。
アクセスして 500 Internal Server Error が出た場合、 .htacsess の設定の可能性が高いです。 利用しているサーバの設定を確認し、 以下の方法を試してください。
Options -Indexes
をコメントアウトしてください
# Prevent file browsing
#Options -Indexes
# RewriteBase /
を有効にしてください。
RewriteBase /
使用できる文字等は、 以下のとおりです。
英数小文字・アンダーバー・ハイフンを使った3〜16文字のユーザー名が使えます。
使用できるメールアドレスを入力して下ください。
英数大文字小文字を組み合わせた、 少なくとも8文字以上の複雑な文字列を使用してください。
上記のパスワードを正しく入力してください。
日本語も使えます。
肩書・役割です(例:管理者)
入力し終えたら、 「Create user」をクリックします。
このような画面が表示されたら、 Grav を使用できるようになりました。 最後に安全に Grav を使用できる設定をしてください。
以降、管理パネルにログインする場合は http://yourwebsite.com/admin
にアクセスしてください。
次回解説しますが、 管理パネルの URL は変更可能です。
以前、 レンタルサーバーで Wordpress の改ざん騒動がありました。 これは Wordpress の脆弱性ではなく、 サーバ側の設定を悪用したものでした。 これを防ぐには共用サーバを使っている場合、 セキュリティ対策としてパーミッションを変更することをおすすめします。 デフォルトのパーミッション設定は「644」や「755」になっていることが多いので、 以下の設定に変更してください。
\user\accounts
\user\config
内の yaml「600」
その他のディレクトリは「705」、 その他のファイルは「604」
次回、 Grav の管理パネルを使った基本的な設定・使い方に続きます。
]]>Grav は記事が Markdown ファイルになっています。 Markdown ファイルは中身はただのテキストファイルなので、 エディタで正規表現を使った置換で一括編集できます。
何故、 一括編集が必要になったかというと、 このサイトでは External Links というプラグインを使っていました。
このプラグインは、 リンクが外部リンクだと自動で target="_blank"
をつけ、 さらにリンクの横に小さなアイコンを追加してくれます。
しかし、 このプラグインの影響で上のナビゲーションバーの表示がおかしくなっていたようです。
なので、 このプラグインをやめて手動で target="_blank"
をつけ、 アイコンをつける CSS を追加することにしました。
私が使っている Notepad++ での方法です。ローカルで記事を書いていない方は、 /user/pages
フォルダ内をすべてダウンロードしてください。
[Link](http://xx.xxx/xx "Alt text")
形式でリンクを書いてあるので、
Ctrl + R
で置換ウィンドウを開く(\(http.+?)\s
、 置換文字列を \1?target=_blank
とする以上で http から始まるすべてのリンクに ?target="_blank"
がつきます。
あとは custom.css に以下を追加。
FontAwesome は読み込み済みとします。
/* 外部リンクにアイコンを付ける */
a[target='_blank']:after {
font: normal normal normal 7px/1 FontAwesome;
display: inline-block;
margin: 0 .3em;
content: '\f08e';
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
変更した記事と css を上書きアップロードすれば終了です。
ブラウザで確認するとき、 キャッシュが残っている場合はスーパーリロード(Chromeなら Ctrl+F5
または Shift+F5
)で再読み込みしてください。
モーダルウィンドウが必要になったのですが、 いい感じのサンプルが見当たらなかったので作りました。 理想としては、
だったのですが、 Cookie を JQuery で扱うのはプラグインなしでは大変なので WebStorage を使ってみました。
デモのソースコードにライセンスがいるかわかりませんが、 CC0 ライセンスです。
デモのソースコードに簡単な説明が書いてありますが、 一部抜粋して説明します。
<section id="modal">
<h2>ModalWindow</h2>
<p>ダイアログが消えるまで下の「sessionStorageを削除する」のリンクは無効になっています。</p>
<p>sessionStorageに値を書き込みますか?</p>
<ul>
<li id="modal-yes"><a>はい</a></li>
<li><a>いいえ</a></li>
</ul>
</section>
モーダルウィンドウは見えなくする部分(サンプルだと <div id="wrapper">
)内には書かないでください。
opacity
が適応され、 クリックもできなくなります。
/* ダイアログは非表示にしておく */
#modal {
position: fixed;
z-index: 1;
top: 10%;
left: 50%;
width: 80%;
margin-left: -40%;
text-align: center;
border: solid 1px;
background-color: #fff;
display: none;
}
/* bodyにis-modal-visibleクラスがついたら表示 */
body.is-modal-visible #modal {
display: block;
}
/* wrapperは透明度を指定 */
body.is-modal-visible #wrapper {
opacity: 0.1;
}
/* リンクを無効化 */
body.is-modal-visible #wrapper a {
pointer-events: none;
}
JQuery で body に is-modal-visible クラスをつけるので、 それによって表示を切り替えます。
pointer-events
でクリックを無効化できます。
(function($) {
$(function() {
var $window = $(window),
$body = $('body'),
$yes = $('#modal-yes'),
$remove = $('#modal-remove');
// #modal-yesがあって、かつsessionStorageにKeyがなければ
if ($yes.length && !sessionStorage.getItem('Key')) {
// bobyタグにclass追加
$body.addClass('is-modal-visible');
}
// #modal-yesがクリックされたら
$yes.on('click',( function() {
// bobyタグのclass削除
$body.removeClass('is-modal-visible');
// sessionStorageに対応してたらKey:Valueを追加
if (window.sessionStorage) {
sessionStorage.setItem('Key', 'Value');
}
}));
// #modal-removeがクリックされたら
$remove.on('click',( function() {
// sessionStorageに対応してたらKey削除
if (window.sessionStorage) {
sessionStorage.removeItem('Key');
}
}));
});
})(jQuery);
WebStorage の sessionStorage を使用しています。 ウィンドウを閉じるとデータは破棄されるので、 データを保持したい場合は localStorage に置換してください。 簡単な流れとしては次の通り。
sessionStorage が書き込まれたかは Chrome なら 検証ツールから Resources > Session Storage
で確認できます。
最初の If 文で #modal-yes を判定しているのは、 これがないと外部リンクで Javascript を読み込んだ時に、 モーダルウィンドウがないページでも sessionStorage がないと body に is-modal-visible クラスをつけてしまうからです。
WebStorage 便利です。 JQuery で扱うなら Cookie よりおすすめ。 ただ、 localStorage で有効期限が指定できないで、 その点は Cookie を使うべきかな。 WebStorage だけでするとしたら、 記録した日時を保持して再度読み込んだ時に判定するようにするか……
]]>最近、 一部のページでアクセス時に「 500 Internal Server Error 」が発生していましたが、 タグの多い長文の記事がなりやすく Markdown から HTML に変換するのに負荷がかかっているようです。 テスト環境では問題なかったのですが、 どうもサーバトラブルがあったようです。
marisaが亡くなって、負荷分散サーバーを組みなおしたものの設定テストをしていなかった為、今朝もう1台の正常なサーバーがダウンした時、切り替わりが発生したのですが上手く動いていない状態でした。そこで慌てて設定を直そうとしてサーバーから締め出されてしまうトラブル
— ごりゅ (@usamimiinfo) 2016, 1月 28
自宅鯖を広告無しの無料で使わせていただいてるサーバなので感謝していますが、 たまに落ちるサーバです。 これを機会に少しでもサーバ負荷を減らすために以下の対策を取りました。
Grav は以下の優れたキャッシュ機能を持っていますが、 動的ページを静的ページにしておくページキャッシュ機能は本体にはついていません。 Grav AdvancedPageCache Plugin は Grav のページキャッシュプラグインです。
AdvancedPageCache is a powerful static page cache type plugin that caches the entire page output to the Grav cache and reuses this when the URL path is requested again. This can dramatically increase the performance of a Grav site. Due to the static nature of this cache, if enabled, you will need to manually clear the cache if you make any page modifications. This cache plugin (by default) will cache pages that have URLs that contain either querystring or grav-paramater style values, you may want to disable this behavior.
This plugin can provide dramatic performance boosts and is an ideal solution for sites with many pages and predominantely static content.
AdvancedPageCache Plugin は ページ全体を GRAV のキャッシュに出力して、 URL が再びリクエストされたときに、 これを再利用する静的ページキャッシュプラグインです。 これは劇的にGRAVサイトのパフォーマンスを向上させることができます。
デフォルトの設定では、 パラメータの区切り文字やクエリ文字列のある URL でもキャッシュしてしまうので無効にして、 念のため blacklist にも追加しておきます。
blacklist に追加しなくても大丈夫でした。
enabled: true
enabled_with_params: false
enabled_with_query: false
whitelist: false
blacklist:
- /
- /blog.atom
- /blog.rss
- /error
Grav では画像を表示する際 xxx.png なら xxx.png.thumb.png というファイルが同じフォルダにあると、 サムネイルとして扱ってくれます。 例えば、 以下のような記述のあるmdファイルの場合
![Image](xxx.png "Alt text")
サムネイル画像を作っておけば、 以下のように出力されます。
<a href="/xxx.png">
<img title="Image" alt="Alt text" src="/xxx.png.thumb.png">
</a>
これにより、 以下のようにサーバで画像をリサイズするより画質が劣化せず、 サーバの負荷を減少させる事ができます。
![Image](xxx.jpg?resize=400,300)
複数あるCSS、 または JavaScript をまとめることでブラウザのリクエスト回数を削減します。 また、 CSS、 または JavaScript の余計な空白や改行、 コメントを削除することで容量を圧縮します。 ただ、 これによって必要な空白の削除などが行われる可能性があるので不具合が起きる場合もあります。
前 | 後 | 差 | |
---|---|---|---|
ページ読み込み速度 | 11.11s | 3.42s | 7.69s |
ページの wait | 7.47s | 1.39s | 6.08s |
一度キャッシュクリアをしてから、 Website speed test で計測しました。 これでキャッシュが生成されたので、 もう一度計測します。 キャッシュ生成前は 11.11秒、 後は3.42秒と7.69秒の短縮です。
計測結果を詳しく見てみると、 ページの wait が7.47秒から1.39秒となり6.08秒減とかなり減少しています。 これはページにリクエストしてサーバからのデータを待っている時間のことですが、 サーバ側からすればデータ処理をしている時間です。 今回はキャッシュをすべて削除してからのリクエストなのでデータ処理にかなりの時間がかかっていますが、 その際にキャッシュを作成しているので後のデータ処理は減少します。 これにより、 サーバの負荷軽減とともにページ表示速度が向上します。
キャッシュをすべて消した測定だったので、 Grav AdvancedPageCache のありなしでの測定をしました。
あり | なし | 差 | |
---|---|---|---|
ページ読み込み速度 | 3.85s | 3.11s | 0.74s |
ページの wait | 1.78s | 1.09s | 0.69s |
ページの wait の差がほぼページ読み込み速度の差になっているので、 Grav AdvancedPageCache の効果だと思います。 ページ読み込み速度で19%減、 ページの wait で38%減の速度向上となりました。
コメントプラグインを変えたので、 whitelist にしました。
JSComments から Comments に変更したら Form を使っている関係で、 AdvancedPageCache を使用すると不具合がありました。 なので、 プラグインを有効にするページを whitelist で指定しました。 blacklist と併用はできません。(whitelist が優先される)
enabled: true
enabled_with_params: false
enabled_with_query: false
whitelist:
- /about
blacklist: false
ブログ記事の静的ページキャッシュはなくなりましたが、 その分 Disqus から読み込む外部ファイルなどがなくなり、 リクエスト数が減りました。 Website speed test の点数も上がっているので、 このままにします。
]]>