Home このサイトはあんりあの趣味を全部ぶち込むためのサイトです。具体的には、WebDesignやエロ小説の公開、二次小説の紹介など。 2016-12-22T22:19:00+09:00 あんりあ http://unrea.usamimi.info/blog Gravページメディアのファイル一覧 http://unrea.usamimi.info/blog/grav-page-media 2016-12-22T22:19:00+09:00 2016-12-22T22:19:00+09:00

Grav Documentation では、シンプルのな画像ギャラリーの例がありました。 これを利用して、 下のようなページメディアにあるファイルの一覧を作ってみたいと思います。

ページメディアのファイル一覧

テンプレートを追加するのは面倒なので、 ページの編集で Twig が実行できるようにします。 ページ内の Tiwg 部分の処理を実行させるオプションを有効にするためには、 ページの header 部分に下記を追加するか、 管理パネルのページオプションの「高度」から プロセスの Twig をチェックして保存します。

process:
    markdown: true
    twig: true

Page Madia

ページコンテンツには、 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 はファイルの種類によって変わります。

  • page.media.files
    • html 、 pdf など
  • page.media.images
    • jpg 、 png など

また、 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の派生「hako」 http://unrea.usamimi.info/blog/hako-derivation-of-ttbase 2016-04-17T21:37:00+09:00 2016-04-17T21:37:00+09:00

TTBase は常駐型のユーティリティをプラグインとしてまとめて一つにできるソフトとして、 もともと K2さんによって開発されていましたが、 その後 オープンソースソフトウェアとなり開発が止まっていました。 しかし、 2016年2月に tapetum さんによって 32/64bit 両方を読み込める 派生「hako」が 2016年2月に公開されました。

ダウンロード

使用しているプラグイン

  • HotkeyCpp(ホットキーを設定する)
  • RedirectWheelG(後ろのウィンドウをスクロールする)
  • MinToTray(タスクトレイに入れる)
  • SnapShot2(スクリーンショットを撮る)
  • ファイルダイアログ拡張7(保存ダイアログにショートカットを追加)

ホットキーの設定方法

hotkey
hotkeyの追加
© hako

タスクトレイを左クリックから「HotkeyCppの設定」から「追加」ボタンを押します。 ホットキーを割り当てて、 「Command」からプラグインを選んで「ID」で使う機能を選択します。

数年ぶりに TTBase が使えるようになって嬉しいです。 以前 TTBase で 対応していた Tclock と CLCL も 64bit 版が出てきてくれたら、 もっと嬉しい。

]]>
Gravテーマの変数とTwigの解説 http://unrea.usamimi.info/blog/grav-theme-twig 2016-04-10T23:42:00+09:00 2016-04-10T23:42:00+09:00

Grav のインストール方法から管理パネルを使った基本的な設定・使い方、 テーマのカスタマイズ方法までの連載です。

  1. Grav の FTP を使ったインストール方法
  2. Grav の管理パネルを使った基本的な設定・使い方
  3. Grav のデフォルトテーマ「Antimatter」の日本語化とカスタマイズ方法
  4. Grav で使える Markdown 記法
  5. Grav のテーマ編集でよく使う変数と Twig の解説

第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・for文

{% 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 %}

配列を指定した場所から指定した数だけ切り取ります。

Collectionなど

Page Collections

Page Collections はテンプレートでも使用できます。

{% set progress = page.collection({'items':{'@taxonomy.category': page.header.taxonomy.category},'order': {'by': 'defaults', 'dir': 'asc'}}) %}

ページと同じカテゴリーを昇順でコレクションします。

Page Find

<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つ繰り返します。

Taxonomy FindTaxonomy

<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年半ですが、 途切れることなく更新が続いています。

Googletrends
Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。

Grav CMS、 Pico CMS、 Jekyll CMS、 HTMLy CMS、 Monstra CMS を Google Trends で検索してみましたが、 この中では勢いのある CMS だということがわかります。 Grav は Flat File CMS の中でも後発ですが、 その分洗練されています。

公開直後から Grav を使用してきましたが、 そのうち日本語の解説が増えないかなと思いながら使ってきました。 残念ながら、 日本語の解説は今でも少なく自分で書いてみようと今回の連載になりました。 簡単な解説ですが、 これで Grav の日本語の使用者が増えることを祈ってます。

]]>
Gravで使えるMarkdown記法 http://unrea.usamimi.info/blog/grav-markdown 2016-04-03T21:13:00+09:00 2016-04-03T21:13:00+09:00

Grav のインストール方法から管理パネルを使った基本的な設定・使い方、 テーマのカスタマイズ方法までの連載です。

  1. Grav の FTP を使ったインストール方法
  2. Grav の管理パネルを使った基本的な設定・使い方
  3. Grav のデフォルトテーマ「Antimatter」の日本語化とカスタマイズ方法
  4. Grav で使える Markdown 記法
  5. Grav のテーマ編集でよく使う変数と Twig の解説

第4回目は Grav で使える Markdown 記法です。

なお、 これらの記事は一部 Grav learn (The MIT License © 2014 Grav) を基に翻訳・改変し、 使用しています。

Grav では一般的な Markdown に加え、 一部の GitHub Flavored Markdown に対応しています。 また、 Grav だけで使える特殊な記法もあります。 解説は Grav だけで使える記法 のみします。

見出し H1~H6

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

水平線 hr

___
---
***

段落 p 改行 br

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つで改行

太字 strong

**rendered as bold text**

イタリック i

_rendered as italicized text_

取り消し線 del

~~Strike through this text.~~

引用 blockquote

> **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.

順序のないリスト li

* 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

順序のあるリスト ol

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

インラインコード code

In this example, `<section></section>` should be wrapped as **code**.

インデントコード pre code

 // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

ブロックコード pre 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']
      }
    }
  }
});
```

表 table

| 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テーマの日本語化とカスタマイズ http://unrea.usamimi.info/blog/grav-theme-customize 2016-03-25T23:57:00+09:00 2016-03-25T23:57:00+09:00

Grav のインストール方法から管理パネルを使った基本的な設定・使い方、 テーマのカスタマイズ方法までの連載です。

  1. Grav の FTP を使ったインストール方法
  2. Grav の管理パネルを使った基本的な設定・使い方
  3. Grav のデフォルトテーマ「Antimatter」の日本語化とカスタマイズ方法
  4. Grav で使える Markdown 記法
  5. Grav のテーマ編集でよく使う変数と Twig の解説

第3回目は Grav のデフォルトテーマ「Antimatter」の日本語化とカスタマイズ方法です。

なお、 これらの記事は一部 Grav learn (The MIT License © 2014 Grav) を基に翻訳・改変し、 使用しています。

今回は「Antimatter」の日本語化ですが、 先に完成品を置いときます。 「Antimatter」の継承テーマ(Wordpressでいう子テーマ)です。 解説に興味のない方はダウンロードして、使い方を読んでください。 変更部分はCC0 ライセンスです。

ダウンロード

Antimatter ver1.8.0 日本語版

antimatter-ja-1.8.0.zip License : The MIT License © 2014 Grav

使い方

テーマにオリジナルの「Antimatter」がインストールされていることを確認します。 解凍し、 FTP で \user\themes 内にフォルダごとアップロードします。 管理プラグインの「設定-システム」の「デフォルトテーマ」から 切り替えます。

シェアボタンは \user\config の site.yaml で設定します。 管理パネルからは追記できないので、 FTP でダウンロードするなどしてください。 いらないボタンは truefalse にしてください。

share:
  facebook: true
  twitter: true
  hatena: true
  line: true
  pocket: true

解説

Antimatter 日本語版の主なファイルについて解説していきます。

antimatter-ja.yaml

テーマの設定ファイルです。 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]

css > custom.css

  • 日本語フォントの追加
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)は細めのフォントですので、 好みで消してください。

templates > partials

テンプレートの日本語化

blog_item.html.twig

  • Continue Reading... → 続きを読む
  • Next Post → 次の記事
  • Previous Post → 前の記事

日付形式の変更

日本で一般的な書式にします

blog_item.html

{{ page.date|date("M") }}{{ 'MONTHS_OF_THE_YEAR'|ta(page.date|date('n') -1) }}
月の書式を「Mar」→「3月」に変更します

archives.html.twig

\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) }}

シェアボタンの追加

blog_item.html

  • Twitter
<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>
  • Facebook
<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
}

© 林家次男

  • Line
<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

  • Pocket
<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の使い方 http://unrea.usamimi.info/blog/grav-basic-tutorial 2016-03-19T20:44:00+09:00 2016-03-19T20:44:00+09:00

Grav のインストール方法から管理パネルを使った基本的な設定・使い方、 テーマのカスタマイズ方法までの連載です。

  1. Grav の FTP を使ったインストール方法
  2. Grav の管理パネルを使った基本的な設定・使い方
  3. Grav のデフォルトテーマ「Antimatter」の日本語化とカスタマイズ方法
  4. Grav で使える Markdown 記法
  5. Grav のテーマ編集でよく使う変数と Twig の解説

第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」を入力し、 保存します。

表示確認表示確認

新しい記事が追加されました。

Aboutページ作成

今度は、 ブログ記事以外のページを追加します。

ページページ

上位ページを「最上位」、 ページファイルを「Default」を選択します。 内容を入力し、 保存します。

表示確認表示確認

メニューに「About」が追加されました。

ブログタイトルの変更

ブログタイトルの「 My Gravtastic Blog A tale of awesomazingadventures」を変更します。 これは 記事の上位ページに書かれているので、 「 ページ」の「Home」をクリックします。

ページページ

内容を変更し、 保存します。

表示確認

セキュリティ対策

不正ログイン対策で管理パネルの URL を変更します。 左サイドバーの「 プラグイン」をクリックし、「 Admin Panel 」へ移動します。 「Basics」 の 「Administrator path」を適当な文字列に変更します。 (他のページの URL に被らないようにして下さい) 保存したら変更した URL で再度ログインしてみてください。

次回、 Grav のデフォルトテーマ「Antimatter」の日本語化とカスタマイズ方法に続きます。

]]>
Gravのインストール方法 http://unrea.usamimi.info/blog/grav-installation 2016-03-12T00:43:00+09:00 2016-03-12T00:43:00+09:00

このサイトで紹介している Grav のインストール方法から管理パネルを使った基本的な設定・使い方、 テーマのカスタマイズ方法までを全5回で連載します。 Grav については以前の記事、 GravってどんなCMS?2015年度版。をお読みください。

  1. Grav の FTP を使ったインストール方法
  2. Grav の管理パネルを使った基本的な設定・使い方
  3. Grav のデフォルトテーマ「Antimatter」の日本語化とカスタマイズ方法
  4. Grav で使える Markdown 記法
  5. Grav のテーマ編集でよく使う変数と Twig の解説

デモを見る

この連載で、 このようなブログ+αがあるサイトを構築します。

第1回目は Grav の FTP を使ったインストール方法です。

なお、 これらの記事は一部 Grav learn (The MIT License © 2014 Grav) を基に翻訳・改変し、 使用しています。

諸注意

今回の解説は、 使用するサーバ環境によって異なる部分があります。 サーバ環境については、 各サーバ管理者にお問い合わせください。

Grav 設置するサーバ要件

  • Apache なら mod_rewrite が使える
  • PHP 5.5.9以上と以下のモジュール
    • gd
    • curl (GPM)
    • openssl (GPM)
    • zip support (GPM)
    • mbstring

GPM(Grav Package Manager)は、 テーマ・プラグインのインストールやアップデートなどを簡単に行える機能です。 GPM がついたモジュールがなくても動きますが、 手動でインストールやアップデートなどをする必要があります。

ファイルのダウンロード

以下のファイルをダウンロードします。

  • 公式サイトの Skeletons から「Blog Site」

Blog Site
© Grav CMS

  • 管理プラグインの Admin Panel を GitHub 上から最新版(Latest release)の Source code (zip)

Admin  Panel
© GitHub

  • 管理プラグインで必要となるプラグインを Plugins から 「Login」 「Forms」 「Email」

Forms
© Grav CMS

解凍・アップロード

ダウンロードフォルダに以下のファイルがあると思います。(x.x.xはバージョン)

  • grav-skeleton-blog-site-vx.x.x.zip
  • grav-plugin-admin-x.x.x.zip
  • getgrav-grav-plugin-login-x.x.x-x-gxxxxxxx.zip
  • getgrav-grav-plugin-form-x.x.x-x-gxxxxxxx.zip
  • getgrav-grav-plugin-email-x.x.x-x-gxxxxxxx.zip

これらのファイルを解凍します。 解凍したプラグインをそれぞれ「admin」「login」「forms」「email」にリネームして grav-skeleton-blog-site フォルダ内の \user\plugins フォルダに移動します。

pluginsフォルダ

サーバーのルートディレクトリに解凍した grav-skeleton-blog-site フォルダの中身をアップロードします。

アップロードが終わったら、 ブラウザでサイトにアクセスしてみてください。 ユーザー作成画面が表示されるはずです。

ユーザー作成

表示されない場合は、 以下のインストールでよく起きるトラブルを参考にしてください。 ユーザー作成画面が表示された方は、 ユーザー作成へ飛んでください。

トラブルシューティング

PHP が正常に動いているか確認する

以下の内容の info.php を作成し、 サーバーにアップロードしてアクセスします。

<?php phpinfo(); ?>

info.php

このような画面が表示されるはずです。 表示されたらサーバ要件を満たしているか確認し、 アップロードした info.php は削除してください。

500 Internal Server Error

アクセスして 500 Internal Server Error が出た場合、 .htacsess の設定の可能性が高いです。 利用しているサーバの設定を確認し、 以下の方法を試してください。

  • Options -Indexes

Options -Indexes をコメントアウトしてください

# Prevent file browsing
#Options -Indexes
  • RewriteBase

# RewriteBase / を有効にしてください。

RewriteBase /

ユーザー作成

使用できる文字等は、 以下のとおりです。

  • Username

英数小文字・アンダーバー・ハイフンを使った3〜16文字のユーザー名が使えます。

  • Email

使用できるメールアドレスを入力して下ください。

  • Password

英数大文字小文字を組み合わせた、 少なくとも8文字以上の複雑な文字列を使用してください。

  • Confirm Password

上記のパスワードを正しく入力してください。

  • Fullname

日本語も使えます。

  • Title

肩書・役割です(例:管理者)

入力し終えたら、 「Create user」をクリックします。

Dashboard

このような画面が表示されたら、 Grav を使用できるようになりました。 最後に安全に Grav を使用できる設定をしてください。

以降、管理パネルにログインする場合は http://yourwebsite.com/admin にアクセスしてください。 次回解説しますが、 管理パネルの URL は変更可能です。

セキュリティ対策

以前、 レンタルサーバーで Wordpress の改ざん騒動がありました。 これは Wordpress の脆弱性ではなく、 サーバ側の設定を悪用したものでした。 これを防ぐには共用サーバを使っている場合、 セキュリティ対策としてパーミッションを変更することをおすすめします。 デフォルトのパーミッション設定は「644」や「755」になっていることが多いので、 以下の設定に変更してください。

\user\accounts \user\config 内の yaml

「600」

その他

その他のディレクトリは「705」、 その他のファイルは「604」

次回、 Grav の管理パネルを使った基本的な設定・使い方に続きます。

]]>
Gravの記事の一括編集 http://unrea.usamimi.info/blog/grav-bulk-edit 2016-03-06T21:58:00+09:00 2016-03-06T21:58:00+09:00

Grav は記事が Markdown ファイルになっています。 Markdown ファイルは中身はただのテキストファイルなので、 エディタで正規表現を使った置換で一括編集できます。

何故、 一括編集が必要になったかというと、 このサイトでは External Links というプラグインを使っていました。 このプラグインは、 リンクが外部リンクだと自動で target="_blank" をつけ、 さらにリンクの横に小さなアイコンを追加してくれます。 しかし、 このプラグインの影響で上のナビゲーションバーの表示がおかしくなっていたようです。 なので、 このプラグインをやめて手動で target="_blank" をつけ、 アイコンをつける CSS を追加することにしました。

私が使っている Notepad++ での方法です。ローカルで記事を書いていない方は、 /user/pages フォルダ内をすべてダウンロードしてください。

Notepad++で置換で一括編集
© Notepad++

[Link](http://xx.xxx/xx "Alt text")形式でリンクを書いてあるので、

  • 記事の item.md をすべて開く
  • 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)で再読み込みしてください。

]]>
JQueryとWebStorageを使ったモーダルウィンドウ http://unrea.usamimi.info/blog/jquery-webstorage-modal-window 2016-02-27T00:45:00+09:00 2016-02-27T00:45:00+09:00

モーダルウィンドウが必要になったのですが、 いい感じのサンプルが見当たらなかったので作りました。 理想としては、

  • 一時的にデータを保存できる(複数ページで使うため)
  • プラグインを使わない

だったのですが、 Cookie を JQuery で扱うのはプラグインなしでは大変なので WebStorage を使ってみました。

デモを見る

デモのソースコードにライセンスがいるかわかりませんが、 CC0 ライセンスです。

ソースコードの説明

デモのソースコードに簡単な説明が書いてありますが、 一部抜粋して説明します。

HTML

<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 が適応され、 クリックもできなくなります。

CSS

/* ダイアログは非表示にしておく */
#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 でクリックを無効化できます。

Javascript

(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 に置換してください。 簡単な流れとしては次の通り。

  1. sessionStorage の値判定
  2. なければ body に is-modal-visible クラスをつける
  3. 「はい」がクリックされたら is-modal-visible クラスを消して、 sessionStorage に値を書き込む

sessionStorage が書き込まれたかは Chrome なら 検証ツールから Resources > Session Storage で確認できます。

最初の If 文で #modal-yes を判定しているのは、 これがないと外部リンクで Javascript を読み込んだ時に、 モーダルウィンドウがないページでも sessionStorage がないと body に is-modal-visible クラスをつけてしまうからです。

まとめ

WebStorage 便利です。 JQuery で扱うなら Cookie よりおすすめ。 ただ、 localStorage で有効期限が指定できないで、 その点は Cookie を使うべきかな。 WebStorage だけでするとしたら、 記録した日時を保持して再度読み込んだ時に判定するようにするか……

]]>
Gravの負荷軽減と高速化 http://unrea.usamimi.info/blog/grav-advancedpagecache-plugin 2016-02-20T14:16:00+09:00 2016-02-20T14:16:00+09:00

最近、 一部のページでアクセス時に「 500 Internal Server Error 」が発生していましたが、 タグの多い長文の記事がなりやすく Markdown から HTML に変換するのに負荷がかかっているようです。 テスト環境では問題なかったのですが、 どうもサーバトラブルがあったようです。

自宅鯖を広告無しの無料で使わせていただいてるサーバなので感謝していますが、 たまに落ちるサーバです。 これを機会に少しでもサーバ負荷を減らすために以下の対策を取りました。

  • Grav AdvancedPageCache Plugin を導入
  • 画像処理をサーバに任せないでサムネイル作成しておく
  • CSS・Javascript パイプラインを有効にする

Grav AdvancedPageCache Plugin

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 にも追加しておきます。

追記(2016/2/22)

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 をまとめることでブラウザのリクエスト回数を削減します。 また、 CSS、 または JavaScript の余計な空白や改行、 コメントを削除することで容量を圧縮します。 ただ、 これによって必要な空白の削除などが行われる可能性があるので不具合が起きる場合もあります。

Pingdom Website speed testでの速度比較(前後)

Website speed test beforeWebsite speed test after
© Pingdom AB

ページ読み込み速度11.11s3.42s7.69s
ページの wait7.47s1.39s6.08s

一度キャッシュクリアをしてから、 Website speed test で計測しました。 これでキャッシュが生成されたので、 もう一度計測します。 キャッシュ生成前は 11.11秒、 後は3.42秒と7.69秒の短縮です。

計測結果を詳しく見てみると、 ページの wait が7.47秒から1.39秒となり6.08秒減とかなり減少しています。 これはページにリクエストしてサーバからのデータを待っている時間のことですが、 サーバ側からすればデータ処理をしている時間です。 今回はキャッシュをすべて削除してからのリクエストなのでデータ処理にかなりの時間がかかっていますが、 その際にキャッシュを作成しているので後のデータ処理は減少します。 これにより、 サーバの負荷軽減とともにページ表示速度が向上します。

追記(2016/2/22)

キャッシュをすべて消した測定だったので、 Grav AdvancedPageCache のありなしでの測定をしました。

Website speed test plugin-beforeWebsite speed test plugin-after
© Pingdom AB

ありなし
ページ読み込み速度3.85s3.11s0.74s
ページの wait1.78s1.09s0.69s

ページの wait の差がほぼページ読み込み速度の差になっているので、 Grav AdvancedPageCache の効果だと思います。 ページ読み込み速度で19%減、 ページの wait で38%減の速度向上となりました。

追記(2016/3/17)

コメントプラグインを変えたので、 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 の点数も上がっているので、 このままにします。

]]>