2017-08-27

Hugo立ち上げとテーマ適用、サマリ長すぎ問題の修正

Hugoで静的サイトを作る際の問題点として「サマリ長すぎ問題」が挙げられる。

原因は、デフォルトのサマリは70 words （69回のスペース区切り）で要約を表現していることである。99%のテーマ作者はCJK言語圏のことを考慮していないので、デフォルトをそのまま使い、問題となる。

サマリ長すぎ

Hugoユーザは色々と自力で色々やらなければならない。大切なのは根気である。

本記事では静的サイトを新規に作り、テーマの適用を行い、サマリ長すぎ問題を解決する。

静的サイトの新規作成

hugo new site bloblo
cd bloblo
git init

テーマの適用

テーマは https://themes.gohugo.io/hugo-h5bp/ を見つけたとする。 [Download]のurlをコピーして、以下のコマンドにする。

git submodule add https://github.com/garvincasimir/hugo-h5bp-simple.git themes/h5bp

config.toml を次のようにする。

baseURL = "/"
languageCode = "ja"
title = "bloblo"
theme = "h5bp"

なにか書く

適当に記事を hugo new posts/hello-hugo.md に書く。

---
title: "Hello Hugo"
date: 2017-08-27T21:31:12+09:00
draft: false
---

吾輩は猫である。名前はまだない。

動かす

hugo server

静的サイトができている。

人様が作ったテーマというのは、けっこうバギーだったりするものだから、ここまでで、なんかうまくいかないときは、テーマを変えると上手くいくだろう。

なお、

hugo

とすれば、静的サイトがビルドされる。

サマリ長すぎ問題の修正

さて、いよいよこいつ。

大まかな流れは、既存のテーマでサマリを描画しているところを特定して、テンプレートHTMLをオーバーライドすることだ。

テーマに内蔵されているテンプレートファイルや静的ファイルは、それに対応するファイルを置けば、探索の優先順位はそちらが高いので、オーバーライドになる。詳しくは Hugo | Customize a Theme を参照されたい。

テンプレートを特定する

まずは、 hugo server --debug によって、ログ出力を詳細にし、テンプレートの挙動を追いかける。

ログより themes/h5bp/layouts/index.html を見ていることがわかった。実際、{{.Summary}} がある。

複雑なテーマでは、パーシャルHTMLをさらに読んでいて、そして該当しそうなパーシャルファイルが複数見つかることがある。そのときはpartialsをパスに含むものを優先する。

テンプレートを複製する

これを、パスの関係性を維持しながら、複製する。

深いファイルパスであると、cp の前に mkdir -pが必要になりうる。

cp themes/h5bp/layouts/index.html layouts/index.html

試しに、複製したほうに、テスト用の改変を仕込んでみる。

{{ .Title }} !!!!

うまくいっている。

テンプレートを修正する

{{ .Summary }} を意図通りのコードに書き換えれば、

{{ if gt (len .Summary) 200 }}
  {{slicestr .Summary 0 200}}...
{{ else }}
  {{ .Summary }}...
{{ end }}

2017-08-20

Alfredで自作プラグイン(workflow) 最初の一歩

Alfredでプラグイン作るぞ！！！と思った人が最初に見るべき記事が足りない気がしたので書きます。

なお、プラグインの利用および作成は課金民だけに許されています。世の中カネっすわ

用語

workflow: Alfredにおけるプラグインのこと

作りたいもの

みなさん大体こういうものを作りたいはずです

Alfredを呼び出す
おもむろに文字を叩く
それに何らかの形で呼応したアイテムがシュッと出て来る

なので本記事では、それに即したHello Worldをやってみます。

Getting Started

Alfredの設定 > Workflows > [+] > Script Filter

Continue を押したら、雛形ができました。 XMLのほうは要らないので消します。

やったー完成です。お疲れ様でした(ぇ

結局、JSONを吐けばいいのさ

このままでは自作した感がありません。一旦、jsonformatの中身を見ましょう。 Script Filterとして、標準出力に適切な出力（つまりJSON）を流すことが求められるようです。

#
# Alfred Script Filter JSON format
#
# This example demonstrates all fields available for populating results.
#
# For an in-depth explanation, use the (?) help button to the bottom left.
#

cat << EOB
{"items": [

    {
        "uid": "desktop",
        "type": "file",
        "title": "Desktop",
        "subtitle": "~/Desktop",
        "arg": "~/Desktop",
        "autocomplete": "Desktop",
        "icon": {
            "type": "fileicon",
            "path": "~/Desktop"
        }
    },

    {
        "valid": false,
        "uid": "flickr",
        "title": "Flickr",
        "icon": {
            "path": "flickr.png"
        }
    },

    {
        "uid": "image",
        "type": "file",
        "title": "My holiday photo",
        "subtitle": "~/Pictures/My holiday photo.jpg",
        "autocomplete": "My holiday photo",
        "icon": {
            "type": "filetype",
            "path": "public.jpeg"
        }
    },

    {
        "valid": false,
        "uid": "alfredapp",
        "title": "Alfred Website",
        "subtitle": "https://www.alfredapp.com/",
        "arg": "alfredapp.com",
        "autocomplete": "Alfred Website",
        "quicklookurl": "https://www.alfredapp.com/",
        "mods": {
            "alt": {
                "valid": true,
                "arg": "alfredapp.com/powerpack",
                "subtitle": "https://www.alfredapp.com/powerpack/"
            },
            "cmd": {
                "valid": true,
                "arg": "alfredapp.com/powerpack/buy/",
                "subtitle": "https://www.alfredapp.com/powerpack/buy/"
            },
        },
        "text": {
            "copy": "https://www.alfredapp.com/ (text here to copy)",
            "largetype": "https://www.alfredapp.com/ (text here for large type)"
        }
    }

]}
EOB

詳細についてはここで https://www.alfredapp.com/help/workflows/inputs/script-filter/json/

既存の実装はどうなっているの？

次に、Chromeのブックマークを検索するWorkflowを参考にしてみます。 https://github.com/blainesch/alfred-chrome-bookmarks

Script Filter の部分をみると、こんなんでした。

PROFILE="~/Library/Application Support/Google/Chrome/**/Bookmarks" php bookmarks.php {query}

出力を見せてもらいましょう。

export PROFILE="~/Library/Application Support/Google/Chrome/**/Bookmarks"
php bookmarks.php {query} > ~/Desktop/result.json
php bookmarks.php {query}

<?xml version="1.0"?>
<items>
    <item arg="https://accounts.google.com/AccountChooser?service=mail" uid="61">
        <title>Gmail</title>
        <subtitle>https://accounts.google.com/AccountChooser?service=mail</subtitle>
    </item>
    <item arg="https://ipsj.ixsq.nii.ac.jp/ej/index.php?action=pages_view_main&amp;active_action=repository_view_main_item_snippet&amp;index_id=5305&amp;pn=1&amp;count=20&amp;order=16&amp;lang=japanese&amp;page_id=13&amp;block_id=8" uid="2210.92">
        <title>情報学広場：情報処理学会電子図書館</title>
        <subtitle>https://ipsj.ixsq.nii.ac.jp/ej/index.php?action=pages_view_main&amp;active_action=repository_view_main_item_snippet&amp;index_id=5305&amp;pn=1&amp;count=20&amp;order=16&amp;lang=japanese&amp;page_id=13&amp;block_id=8</subtitle>
    </item>

標準出力の行き先である Open URL の Object を眺めてみるに、 arg属性が、次の{query}になることが推測できます。

ところで、あなたはXMLを使うフレンズなんだね・・・。

出力を次の処理の入力にする

いよいよ、Script Filterをいじってみましょう。

まず、画面をポチポチして、Object を増やします。そして、2つの要素を繋ぎます。

jsonformatのスクリプトを改造します（なお、望むならkeywordの変更も、ここでやれます)

これで、記事冒頭の動画になりました。

まとめ

みなさんもAlfredでどしどしプラグインを作って便利になっていきましょう。

2017-08-08

Chrome拡張でついったーするやつ作った

何ができるの？

ツイッターができます

使いたい

Chromeブラウザ拡張版

ここからcrxファイルをダウンロードします
chrome://extensions/ に行って、crxファイルを投げ込みます

機能説明

ボタンを押すと、Twitterできる画面が開きます
以下のショートカットキーに対応しています
- n 新規に書く画面を開く
- ctrl or cmd + enter 投稿する
- esc投稿をやめる

ブックマークレット版もあるよ

javascript:(function(){window.open('https://mobile.twitter.com/home','win','directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=300,height=600');})();

ブラウザ拡張版にあるショートカット機能などがありません。

なぜ作ったか

PCでツイッターをやりたいのだけど、しかしツイッターをデカい画面に表示してやりたくありませんでした。そこで、Chrome 拡張機能ぐらいがちょうどいいやと思って、Chrome ウェブストアを探し回ったのですが、「リンクをツイートする」みたいな拡張ばかりで、そういうのは要らなくて、普通にTLを見て普通にツイートできるようなやつが欲しかったので、作りました。

きっと便利なので、ぜひ使ってみてください。