ためすう

ブログシステムを Github Pages で構築する

 2018-10-13

目的

ブログシステムを Github Pages を使い構築しました。

メモがてら、概要と運用してみた感想について書きます。

（具体的な構築手順は、この記事では書きません）

システム構成

シンプルな構成です。

図1.

システム構成-Github Pages

デプロイについて

作業用PC から Jekyll で作成したブログを Github へ Push します。

運用してみて

実際に運用してみました。 作業用 PC (ローカル)でビルドしなくて良いです。

※ 表示確認でビルドすることにはなりますが。

所感

よかったこと

ホスティングするサーバーを借りなく良いので、気軽に始められます。

よくなかったこと

Jekyll のプラグインがセキュリティの観点から Github Pages で動かないものがありました。

作業用 PC (ローカル)でビルド済みのソースコードもバージョン管理すれば、できると思います。

Laravel のサービスプロバイダ、サービスコンテナについて

 2018-10-09

目的

Laravel を利用するとき、サービスプロバイダ、サービスコンテナについて、あまり理解していなかったので調べてみました

サービスプロバイダとは

サービスプロバイダは、Laravelアプリケーション全体の起動処理における、初めの心臓部です。

インスタンス化方法を登録します

サービスコンテナとは

Laravelのサービスコンテナは、クラス間の依存を管理する強力な管理ツールです。

インスタンス化の方法が定義されます

ほとんどのサービスコンテナの結合は、サービスプロバイダで行います

DI コンテナみたいなものです

ここで管理することにより、呼び出し元が多数あった場合も

ここを修正すれば良くなりました。

参考

JavaScript の shift と unshift を試す

 2018-10-08

目的

JavaScriptのshiftとunshiftの挙動を試しました。

配列の操作(shift unshift)

var numbers = ["one", "two", "three"];
console.log(numbers);

var shifted = numbers.shift(); // 配列の最初の要素を取り除く
console.log(numbers);
console.log(shifted);

numbers.unshift("four"); // 配列の先頭に追加
console.log(numbers);

結果

["one", "two", "three"]
["two", "three"]
one
["four", "two", "three"]

参考URL

Google Chrome 拡張機能のソースコードを見る方法

 2018-10-08

目的

Google Chrome 拡張機能のソースコードを解析します

やってみる

拡張機能が保存されているディレクトリ

Mac で保存されている場所

~/Library/Application Support/Google/Chrome/Default/Extensions

拡張機能の ID を調べる

Chrome Web Store で調べます

調べたい拡張機能のページに遷移して URL を確認します

https://chrome.google.com/webstore/detail/adblock/xxxxx?hl=ja

上記の xxxxx の部分が 拡張機能のパスです

参考

unix で自作コマンドの設定をする方法

 2018-10-08

目的

unix で自作コマンドを使えるようにしてみます

やってみる

# vim hello

ファイルを作成します

#!/bin/sh

echo "Hello!"

権限を与えます

# chmod a+x hello

# cp hello /usr/bin/hello

コマンドを実行します

# hello

実行結果

Hello

参考URL

jQuery の map を試す

 2018-10-07

目的

jQuery の map の挙動を試しました。

やってみる

var list = [
    {id: 't1', name: "abc"},
    {id: 't2', name: "def"},
    {id: 't3', name: "ghi"},
    {id: 't4', name: "jkl"},
    {id: 't5', name: "mn"},
    {id: 't6', name: "xyz"}
];

var t = $.map(list, function(val, i) {
    // console.log(i, val);
    return val.name.toUpperCase();
});
console.log(t);

// 結果
["ABC", "DEF", "GHI", "JKL", "MN", "XYZ"]

オブジェクトの name を大文字にして配列にします

参考URL

jQuery の grep を試す

 2018-10-06

目的

jQuery の grep の挙動を試しました。

やってみる

var list = [
    {id: 't1', name: "ABC"},
    {id: 't2', name: "DEF"},
    {id: 't3', name: "GHI"},
    {id: 't4', name: "JKL"},
    {id: 't5', name: "MN"},
    {id: 't6', name: "XYZ"}
];

var t = $.grep(list, function(val, i) {
    return i > 3;
});

console.log(t);

// 結果
[
    {id: 't5', name: "MN"},
    {id: 't6', name: "XYZ"}
];

grep の第 2 引数に渡した関数で、インデックスが 3 より大きい要素を取り出します。

参考URL

memcached でアクセス回数を調べる

 2018-09-30

目的

Web アプリ経由で memcached を利用している箇所があり、memcached に対して不要なアクセスをしていそうな処理がありました。

実際に memcached へのアクセスがどうなっているのかを調べることになりました。

方法

telnet で接続

$ telnet localhost 11211
Trying 127.0.0.1...
Connected to localhost.
Escape character is '^]'.

stats コマンドで確認

stats
STAT pid 2734
STAT uptime 19319
STAT time 1529845762
STAT version 1.4.15
STAT libevent 2.0.21-stable
STAT pointer_size 64
STAT rusage_user 0.000000
STAT rusage_system 0.476000
STAT curr_connections 10
STAT total_connections 72
STAT connection_structures 13
STAT reserved_fds 20
STAT cmd_get 145
STAT cmd_set 40
STAT cmd_flush 0
STAT cmd_touch 0
STAT get_hits 85
STAT get_misses 60
STAT delete_misses 0
STAT delete_hits 0
STAT incr_misses 0
STAT incr_hits 0
STAT decr_misses 0
STAT decr_hits 0
STAT cas_misses 0
STAT cas_hits 0
STAT cas_badval 0
... 省略
END

リクエスト数に関係ありそうな項目を抜き出してみました。

  • get_hits: Cumulative number of retrieval reqs
  • cmd_get: Number of keys that have been requested and found present

ここでは、get コマンドを発行した回数の cmd_get の増減を調査しました。

stats の結果の各項目について

下記に記載されていました。

確認後、memcached を終了する

quit
Connection closed by foreign host.

参考

Mac のスクリーンショットの保存場所を変更する方法

 2018-09-30

目的

Mac で撮影したスクリーンショットの保存場所を変更します。

方法

$ defaults write com.apple.screencapture location ~/Pictures/


SystemUIserver について

> SystemUIserverとは、メニューバーの通知アイコンを制御してるプロセス

SystemUIserver を再起動します。

$ killall SystemUIServer ```

参考

PHP でデザインパターン (Template Method)

 2018-09-29

Template Method パターンとは

スーパークラスで処理の枠組みを定め、サブクラスでその具体的内容を定めるようなデザインパターン

クラスの振る舞いに注目したパターンで、サブクラスで具体的な振る舞いを決定させることを目的としています。

Template Method パターンのメリット

  • スーパークラスのテンプレートメソッドでアルゴリズムが記述されており、サブクラス側では アルゴリズムを記述する必要がなくなる

  • 親クラス視点で見ると、「抽象メソッドとして定義したメソッドの実装が「保証される」

  • 子クラス視点で見ると、クライアント側のコードを変更することなく、利用する処理を切り替えることができる。

実装例

<?php
abstract class AbstractDisplay
{
    private $data;

    public function __construct($data)
    {
        if (!is_array($data)) {
            $data = [$data];
        }
        $this->data = $data;
    }

    public function getData()
    {
        return $this->data;
    }

    /**
     * 処理のアルゴリズムがまとまっている
     *
     */
    public function display()
    {
        $this->displayHeader();
        $this->displayBody();
        $this->displayFooter();
    }

    protected abstract function displayHeader();
    protected abstract function displayBody();
    protected abstract function displayFooter();
}

class ListDisplay extends AbstractDisplay
{
    protected function displayHeader()
    {
        echo 'ListDisplay.displayHeader()' . "\n";
    }

    protected function displayBody()
    {
        echo 'ListDisplay.displayBody()' . "\n";
        foreach ($this->getData() as $key => $val) {
            echo $val . "\n";
        }
    }

    protected function displayFooter()
    {
        echo 'ListDisplay.displayFooter()' . "\n";
    }
}

class TableDisplay extends AbstractDisplay
{
    protected function displayHeader()
    {
        echo 'TableDisplay.displayHeader()' . "\n";
    }

    protected function displayBody()
    {
        echo 'TableDisplay.displayBody()' . "\n";
        foreach ($this->getData() as $key => $val) {
            echo sprintf("***%s***\n", $val);
        }
    }

    protected function displayFooter()
    {
        echo 'TableDisplay.displayFooter()' . "\n";
    }
}

$data = [
    'Design Pattern',
    'Gang of Four',
    'Template Method Sample1',
    'Template Method Sample2',
];

$display1 = new ListDisplay($data);
$display2 = new TableDisplay($data);

$display1->display();
echo "------\n";
$display2->display();

おまけ

リスコフの置換原則（LSP：The Liskov Substituion Principle）: 「サブクラスの型はその親クラスの型と置換可能」

ハリウッドの原則（The Hollywood Principle：「Don’t call us. We’ll call you.」「我々を呼び出すな。必要なときは、我々が君を呼び出す」

参考