ためすう

jekyll で検索を実装する方法- lunr を使う

2018-07-16

目的

jekyll で検索機能を実装するため、全文検索エンジンの lunr.js を導入する方法を調べました。

確認バージョン

  • jekyll (3.5.2)
  • lunr.js (2.2.1)

導入

チュートリアルサイトを参考に lunr を使おうとしたのですが 検索 - Jekyll Tipsに書いてあるコードそのままでは動きませんでした。

search_data.json ファイルの作成

ここはチュートリアル通りです。

---
layout: null
---
{
  {% raw >}}
  {% for post in site.posts >}}

    "{{ post.url | slugify }}": {
      "title": "{{ post.title | xml_escape }}",
      "url": " {{ post.url | xml_escape }}",
      "author": "{{ post.author | xml_escape }}",
      "category": "{{ post.category | xml_escape }}"
    }
    {% unless forloop.last >}},{% endunless >}}
  {% endfor >}}
  {% endraw >}}
}

search.html ファイルの作成

ここはチュートリアル通りです。

---
layout: default
---

<form action="get" id="site_search">
  <label for="search_box">Search</label><input type="text" id="search_box">
  <input type="submit" value="search">
</form>

<ul id="results"></ul>
<script src="https://unpkg.com/lunr/lunr.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/search.js"></script>

/js/search.js ファイルの作成

lurn.js で検索の元となるデータを lunr に渡すところと

検索結果を表示するところを修正しました。

全体は下記のようになります。

jQuery(function() {
  // Download the data from the JSON file we generated
  var data = $.getJSON('/search_data.json');
  var result = [];
  data.then(function(response) {
    result = response;

    window.idx = lunr(function () {
      this.field('id');
      this.field('title', { boost: 10 });
      this.field('author');
      this.field('category');

      var that = this;
      $.each(result, function(i, value) {
        var row = $.extend({ "id": i }, value)
        that.add(row);
      });
    });
  });


  // Event when the form is submitted
  $("#site_search").on('submit', function(event){
      event.preventDefault();
      var query = $("#search_box").val(); // Get the value for the text field
      var results = idx.search(query); // Get lunr to perform a search

      // 検索結果の表示
      display_search_results(results); // Hand the results off to be displayed
  });

  function display_search_results(results) {
    var $search_results = $("#search_results");

    // Are there any results?
    if (results.length) {
      $search_results.empty(); // Clear any old results

      // Iterate over the results
      results.forEach(function(value) {
        var item = result[value.ref];

        // Build a snippet of HTML for this result
        var appendString = '<li><a href="' + item.url + '">' + item.title + '</a></li>';

        // Add it to the results
        $search_results.append(appendString);
      });
    } else {
      $search_results.html('<li>No results found</li>');
    }
  }
});

これから

検索の質を高める

日本語での検索、本文の検索について対応していきたいと思います。

下記を使えばできそうです。

データ量が増えるとパフォーマンスが落ちそう

検索の元となっている json データは jekyll に投稿している全記事となるため

当然、記事の投稿数が増えれば json のデータも増えます。

初期読み込み時に json ファイルのデータをダウンロードしているので

パフォーマンスが悪くなる可能性があります。

Web API 化はどうだろうか

パフォーマンスに対応するため、Web API 化する方法を思いつきましたが

検索結果をサーバー側で生成して、表示という作りになりそうでした。

それだと、 lunr.js を使う意味があまりないかもしれません。

参考

yum のリポジトリについて

2018-07-15

背景

yum について知りたかったので調べてみました。

yum とは

パッケージのインストール・アップグレード・検索・管理を行うコマンドです。

remi リポジトリ使いたい

$ wget http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
# rpm -Uvh remi-release-6.rpm

remi リポジトリの設定ファイルは下記です。

/etc/yum.repos.d/remi.repo

yum コマンドの実行時に remi のリポジトリのインストールは下記で行います。

$ yum --enablerepo=remi list

参考URL

jekyll で検索機能を実装する方法

2018-07-14

目的

jekyll で検索機能を実装する方法を調べました。

方法1.

  • Google カスタム検索を利用

下記のページから簡単に導入することができます。

カスタム検索 - カスタム検索エンジンの作成

jekyll で運用しているブログの url を変更したのですが、Google の検索結果に反映されるまでに時間がかかりました。

方法2. (※ 2018/06/09 時点: できませんでした)

  • 全文検索エンジンの lunr.js を利用

$ gem install jekyll-lunr-js-search


しかし、エラーが発生しました。

Fetching libv8 3.16.14.19 Installing libv8 3.16.14.19 with native extensions Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

/Users/hogehoge/.rbenv/versions/2.2.2/bin/ruby -r ./siteconf20180609-87351-bupw5i.rb extconf.rb

creating Makefile /Users/hogehoge/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/libv8-3.16.14.19/ext/libv8/builder.rb:86:in setup_python!': libv8 requires python 2 to be installed in order to build, but it is currently 3.6.2 (RuntimeError) from /Users/hogehoge/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/libv8-3.16.14.19/ext/libv8/builder.rb:53:inbuild_libv8!’ from /Users/hogehoge/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/libv8-3.16.14.19/ext/libv8/location.rb:24:in install!' from extconf.rb:7:in

extconf failed, exit code 1

Gem files will remain installed in /Users/hogehoge/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/libv8-3.16.14.19 for inspection. Results logged to /Users/hogehoge/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/extensions/x86_64-darwin-142.2.0-static/libv8-3.16.14.19/gem_make.out

An error occurred while installing libv8 (3.16.14.19), and Bundler cannot continue. Make sure that gem install libv8 -v '3.16.14.19' succeeds before bundling.

In Gemfile: jekyll-lunr-js-search was resolved to 3.3.0, which depends on therubyracer was resolved to 0.12.3, which depends on libv8


エラーが示す通り、therubyracer、libv8 のインストールを試みたりしたのですが

解決には時間がかかりそうなのでここでストップすることにします。

下記が github のリポジトリなのですが、今はサポートされてないのかもしれません。

- [slashdotdash/jekyll-lunr-js-search: [UNSUPPORTED] Jekyll + lunr.js = static websites with powerful full-text search using JavaScript](https://github.com/slashdotdash/jekyll-lunr-js-search)

```jekyll-lunr-js-search``` を利用せずに lunr を利用する方法を今度試してみます。

#### 以降、未実施

```_config.yml``` に ```jekyll-lunr-js-search``` を追記します

plugins: - jekyll-lunr-js-search ```

参考

jekyll で url 設定

2018-07-11

目的

jekyll で url を設定する方法を調べた時のメモになります。

URL のルールを設定する

下記の 2 箇所で設定することができます。

  1. _config.yml に記載する
  2. 投稿ごとの Front Matter に記載する

今回は、全部の記事に反映させたかったので、 _config.yml に記載する方法でいきます。

下記を追加します。

permalink: /:year/:month/:day/:title

以上となります。

参考

bundler について

2018-07-08

目的

静的サイトジェネレータの jeykll を利用するときに

bundler が出てきましたが理解できていないので今回調べました。

Bundler とは

アプリケーション単位で依存する gem パッケージを管理します。

Gem ファイルを作成

$ bundle init

Gem ファイルを元にインストール

$ bundle install

Gem ファイルを元にアップデート

$ bundle update

参考

jekyll でタイムゾーンの設定

2018-07-02

目的

GitHub Pages で表示される投稿時間が意図通りになっていなかったため

タイムゾーンを設定します。

Front Matter に下記のように指定すると、ローカルサーバーでは意図通りの時間と

なっていましたが、GitHub Pages にアップロードすると、時間が9時間前のものとなっていました。

date:   2017-10-29 22:50:38 +0900

方法


timezone: Asia/Tokyo ```

GitHub Pages にアップロードされた後も時間が意図通りとなりました。

参考

gem を使ってインストールされた場所

2018-07-01

目的

gem を使ってインストールしたファイルがどこにあるのかを調べます。

方法

$ gem environment
RubyGems Environment:
  - RUBYGEMS VERSION: 2.4.5
  - RUBY VERSION: 2.2.2 (2015-04-13 patchlevel 95) [x86_64-darwin14]
  - INSTALLATION DIRECTORY: /Users/hogehoge/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0
  - RUBY EXECUTABLE: /Users/hogehoge/.rbenv/versions/2.2.2/bin/ruby
  - EXECUTABLE DIRECTORY: /Users/hogehoge/.rbenv/versions/2.2.2/bin
  - SPEC CACHE DIRECTORY: /Users/hogehoge/.gem/specs
  - SYSTEM CONFIGURATION DIRECTORY: /Users/hogehoge/.rbenv/versions/2.2.2/etc
  - RUBYGEMS PLATFORMS:
    - ruby
    - x86_64-darwin-14
  - GEM PATHS:
     - /Users/hogehoge/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0
     - /Users/hogehoge/.gem/ruby/2.2.0
  - GEM CONFIGURATION:
     - :update_sources => true
     - :verbose => true
     - :backtrace => false
     - :bulk_threshold => 1000
  - REMOTE SOURCES:
     - https://rubygems.org/
  - SHELL PATH:
     - /Users/hogehoge/.rbenv/versions/2.2.2/bin
     - /usr/local/Cellar/rbenv/0.4.0/libexec
     - /anaconda3/bin
     - /Users/hogehoge/.rbenv/shims
     - /Users/hogehoge/.rbenv/bin
     - /Users/hogehoge/cocos2d-x-3.2/tools/cocos2d-console/bin
     - /usr/local/bin
     - /usr/bin
     - /bin
     - /usr/sbin
     - /sbin
     - /Users/hogehoge/play-2.2.1

※ ユーザー名を hogehoge としました。

下記の箇所が、インストールされている場所です。

INSTALLATION DIRECTORY: /Users/hogehoge/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0

参考

vim で EditorConfig を使う

2018-07-01

使ってみる

NeoBundle でインストールします

~/.vimrc で追記します

NeoBundle 'editorconfig/editorconfig-vim'

~/.editorconfig

[*]
trim_trailing_whitespace = true

[*.php]
tab_width = 4

参考

jekyll でページネーション

2018-06-30

目的

jekyll でページネーションの実現方法について調べました。

方法

jekyll のバージョン確認

$ bundle list | grep jekyll
  * jekyll (3.5.2)
  * jekyll-feed (0.9.2)
  * jekyll-paginate (1.1.0)
  * jekyll-sass-converter (1.5.0)
  * jekyll-watch (1.5.0)

上記にあるように jekyll のバージョンは 3.5.2 です。

Gem ファイルに追記

$ vim Gemfile

gem "jekyll-paginate"

_config.yml に追記

$ vim _config.yml

paginate: 5
paginate_path: "page/:num"

ここまでで、反映されるか試してみます

$ bundle exec jekyll s

  Dependency Error: Yikes! It looks like you don't have jekyll-paginate or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- jekyll-paginate' If you run into trouble, you can find helpful resources at https://jekyllrb.com/help/!

Gem ファイルに記載している jekyll-paginate が見つからないと言われているようです。

jekyll-paginate をインストールします。

jekyll-paginate のインストール

$ gem install jekyll-paginate

ローカルサーバーを立ち上げ直してみます。

$ bundle exec jekyll s

...
      Generating...
        Pagination: Pagination is enabled, but I couldn't find an index.html page to use as the pagination template. Skipping pagination.

エラーは出なくなりましたが、index.html を作成する必要があるようです。

index.htmlの用意

コードは、公式にあったものです。

---
layout: default
title: My Blog
---

<!-- ページ分割されたpostsに対してループ -->
{% for post in paginator.posts >}}
  <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
  <p class="author">
    <span class="date">{{ post.date }}</span>
  </p>
  <div class="content">
    {{ post.content }}
  </div>
{% endfor >}}

<!-- ページネーションリンク -->
<div class="pagination">
  {% if paginator.previous_page >}}
    <a href="/page{{ paginator.previous_page }}" class="previous">Previous</a>
  {% else >}}
    <span class="previous">Previous</span>
  {% endif >}}
  <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
  {% if paginator.next_page >}}
    <a href="/page{{ paginator.next_page }}" class="next">Next</a>
  {% else >}}
    <span class="next ">Next</span>
  {% endif >}}
</div>

これでページングが実装されました。

しかし、このままだと 2ページ目に遷移しようとするとページが存在しないと言われてしまいます。

リンク先を _config.yml で設定したものに合わせます。

ページングの修正

index.html 内のページングのリンク先を下記のように置き換えます。

<a href="/page/{{ paginator.previous_page }}" class="previous">Previous</a>

さらに 2 ページ目から 1ページ目に戻るとき、ページが存在しないと言われてしまいました。

ここでは、条件分岐を書いて回避することにします。

最終的に、index.html のページング部分は下記のようになります。

<!-- ページ分割されたpostsに対してループ -->
{% for post in paginator.posts >}}
  <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
  <p class="author">
    <span class="date">{{ post.date }}</span>
  </p>
  <div class="content">
    {{ post.content }}
  </div>
{% endfor >}}

<!-- ページネーションリンク -->
<div class="pagination">
  {% if paginator.previous_page >}}
    {% if paginator.previous_page == 1 >}}
        <a href="/" class="previous">Previous</a>
    {% else >}}
        <a href="/page/{{ paginator.previous_page }}" class="previous">Previous</a>
    {% endif >}}
  {% else >}}
    <span class="previous">Previous</span>
  {% endif >}}
  <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
  {% if paginator.next_page >}}
    <a href="/page/{{ paginator.next_page }}" class="next">Next</a>
  {% else >}}
    <span class="next ">Next</span>
  {% endif >}}
</div>

参考

scp でファイルのアップロード、ダウンロード

2018-06-24

目的

手元の PC とリモートサーバーとの間でファイルをやりとりするために使用しました。

使う度に調べ直しているので、まとめてみます。

方法

(以下 man コマンドより引用)

scp [-12346BCEpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [-o ssh_option] [-P port] [-S program] [[user@]host1:]file1 ... [[user@]host2:]file2

アップロード @ローカルホスト

index.htmlをアップロードする

$ scp -P 22 -i identity_file index.html admin@domain.com:/home/admin/

ダウンロード @ローカルホスト

$ scp -P 22 -i identity_file admin@domain.com:/home/admin/index.html ./

最後に

下記のようなイメージです

$ scp [移動したいファイルパス] [移動先のファイルパス]