2016-10-17

Atomエディタでコマンドプロンプト（PowerShell）を実行する（Windows）

atom

Windows環境での開発でAtomエディタを使っている場合、コマンドプロンプトをAtom上で実行したい場合があります。
Atom上でコマンドプロンプトを実行するパッケージとしてはplatformio-ide-terminalがあります。

platformio-ide-terminalとは
まとめ

platformio-ide-terminalとは

Atomエディタ用のターミナルパッケージで、terminal-plusからフォークして作られています。 atom.io

platformio-ide-terminalをインストールする

[ファイル]-[環境設定]-[Install]を開き、platformio-ide-terminalと入力してパッケージを検索します。
パッケージが見つかるのでインストールします。

コマンドプロンプトの起動方法

Atomの左下の＋ボタンをクリックするとコマンドプロンプト（PowerShell）が新規で開きます。既に開いている場合はターミナルのアイコンが表示されるのでそれをクリックします。Cntl+`（バッククォート）のショートカットでも同じように操作できます。

コマンドプロンプトの使用例

Windows7環境で実行すると以下のように表示されます。デフォルトでプロジェクトのルートで開きます。

Windows PowerShell
Copyright (C) 2009 Microsoft Corporation. All rights reserved.

PS C:\(プロジェクトのディレクトリ)>

gulpのバージョンを表示してみると以下のように表示されます。

PS C:\(プロジェクトのディレクトリ)> gulp -v
[12:13:27] CLI version 3.9.1
PS C:\(プロジェクトのディレクトリ)>

まとめ

最近はnpmを使用してインストールすることが多いので、これは必須だと思います。

2016-10-15

Atomエディタでtypescriptを書くときの設定

atom javascript

Atomエディタでtypescriptを書くときのメモ。

atom-typescriptを設定する
まとめ

atom-typescriptを設定する

Atomでtypescriptを書く場合、atom-typescriptパッケージを使用します。 github.com

atom-typescriptをインストールする

パッケージマネージャーからatom-typescriptを検索しインストールします。
（インストールには結構時間がかかります。）

tsconfig.jsonファイルを作成

プロジェクトのルートにtsconfig.jsonファイルを作成するため、Atomエディタ上でcmd(cntl)+shift+pでコマンドパレットを表示します。
tsconfigと入力し Typescript: Create Tsconfig.json Project Fileを選択して実行します。
tsconfig.jsonが作成されるのでプロジェクトのルート以外に作成された場合はファイルをルートに移動します。

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "isolatedModules": false,
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "declaration": false,
        "noImplicitAny": false,
        "noImplicitUseStrict": false,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true
    },
    "exclude": [
        "node_modules",
        "typings/browser",
        "typings/browser.d.ts"
    ],
    "compileOnSave": true,
    "buildOnSave": false,
    "atom": {
        "rewriteTsconfig": false
    }
}

自動コンパイルの設定

初期設定では保存時に自動コンパイルする設定になっているため、もし自分でコンパイルしたい場合はtsconfig.jsonの"compileOnSave": true,をfalseに設定します。

.tsファイルを作成する

拡張子が.tsのファイルを作成します。ここでは以下のようなファイルを作成します。

var foo = 123;
class Bar {
    static bar: number;
    bar: number;
}
var bar = new Bar();

ファイルを保存すると以下の様にjsファイルが自動で作成されます。

var foo = 123;
var Bar = (function () {
    function Bar() {
    }
    return Bar;
}());
var bar = new Bar();

まとめ

atom-typescriptを使用することで、Atomエディタで簡単にtypescriptファイルをコンパイルすることが出来るようになります。

2016-10-14

PHPからActive DirectoryへLDAPで接続する

php

PHPからActive Directoryへ接続するときのメモ。

LDAP関数を利用して接続する(LDAP認証)
ユーザー名でエントリを取得する

LDAP関数を利用して接続する(LDAP認証)

PHPからActive Directoryへ接続する場合LDAP関数を利用して接続します。
ldap_connect関数は指定されたホスト名やポートの妥当性をチェックしパラメータの初期化を行ないます。 ldap_bind関数により実際に接続されます。

$host = 'ldap://192.168.0.1';
$port = 3268;
$rdn = 'CN=test,CN=Users,DC=example,DC=local';
$pass = 'password';

$cnn = ldap_connect($host, $port);
if ($cnn) {
  $bind = ldap_bind($cnn, $rdn, $pass);
  if ($bind) {
    // バインド成功
  } else {
    // バインド失敗
  }
}

ユーザー名でエントリを取得する

ベースDN内のtestというユーザのmemberof属性を取得します。属性を指定しない場合、全ての属性と値を取得するため効率が悪くなります。

(省略)
$user_name = 'test';
$base_dn = 'CN=Users,DC=example,DC=local';
$filter = "(sAMAccountName=$user_name)";
$attributes = array('memberof');

$search = ldap_search($cnn, $base_dn, $filter, $attributes);
$entries = ldap_get_entries($cnn, $search);

2016-10-12

CodeIgniter3でCAPTCHAを表示する

codeigniter php

CodeIgniter3でCAPTCHAを表示するときのメモ。

CAPTCHAとは
- captchaの使用例
CodeIgniter3でCAPTCHAを使用する
まとめ

CAPTCHAとは

CAPTCHA（キャプチャ）はチャレンジ/レスポンス型テストの一種で、応答者がコンピュータでないことを確認するために使われる。 CAPTCHA - Wikipedia

基本的にはコンピュータが認識できないような文字などを表示して、その内容を入力させることで入力者が人間であることを確認します。画像認識の技術が向上してる現在では単純な文字のみのCAPTCHAは破られる可能性があります。

captchaの使用例

ブルートフォースアタック（Brute force attack）と呼ばれる総当りの攻撃を防ぐために利用されます。

CodeIgniter3でCAPTCHAを使用する

CodeIgniter3にはCAPTCHAヘルパーが存在し、単純なCAPTCHAならすぐに実装することが出来ます。

画像を生成する

ヘルパーを読み込み、create_captcha()関数を実行して画像を生成します。
生成する画像の情報は引数に設定します。

$this->load->helper('captcha');
$captcha = create_captcha([
  'img_path' => APPPATH.'/captcha/',
  'img_url' => '/captcha/img/',
  'font_path' => APPPATH.'/fonts/kiki.ttf',
  'img_width' => "150",
  'img_height' => 30,
  'expiration' => 7200,
  'word_length' => 8,
  'font_size' => 16,
  'colors' => [
    'background' => [255, 255, 255],
    'border' => [255, 255, 255],
    'text' => [0,0,0],
    'grid' => [255,40,40],
  ]
]);

上で作成した画像の戻り値は以下のようになります。

array(4) { ["word"]=> string(8) "0gCOHRf1" ["time"]=> float(1476259560.6607) ["image"]=> string(98) "<img src="/captcha/img/1476259560.6607.jpg" style="width: 150; height: 30; border: 0;" alt=" " />" ["filename"]=> string(19) "1476259560.6607.jpg" }

戻り値の中のwordが今回生成された文字列、imageが生成された画像のタグ、filenameがファイル名となります。

文字列をセッションに保存する

入力された文字列とのチェックのため、wordをセッションに保存しておきます。

$this->load->driver('session');
$this->session->set_userdata('captcha', $captcha['word']);

画像を表示する

imageをhtmlに出力します。
Twigテンプレートを使用して出力しています。 mikawatan.hatenablog.com

$this->load->library('twig');
$this->twig->display('index.twig', ['captcha' => $captcha['image']);

imgタグをそのまま出力するためrawを指定して出力します。

<p>{{captcha|raw}}</p>

これで画像が表示されるので、後は入力された値とセッションに保存された値をチェックする処理をいれれば完了です。

まとめ

CodeIgniter3を利用すれば単純なCAPTCHA画像であればすぐに作成できます。

2016-10-10

CodeIgniterで設定ファイルにYAMLを利用する

codeigniter php

CodeIgniterで設定ファイルにYAML形式のファイルを利用する場合のメモ。

PHPでYAMLファイルを読み込む方法
- Spycを利用する
CodeIgniterでの使用方法
まとめ

PHPでYAMLファイルを読み込む方法

PHPでYAML形式を扱う場合、Spycというライブラリを利用すれば簡単にYAMLファイルの読み込みが出来ます。

Spycを利用する

Spyc自体はPHPで書かれたシンプルなクラスのため、ファイルを読み込むだけで利用することが出来ます。

github.com

CodeIgniterでの使用方法

CodeIgniterでもSpycを利用してYAMLファイルを読み込みます。

Spyc.phpファイルをコピーする

Spyc.phpファイルを適当なフォルダにコピーします。今回はlibrariesフォルダの中にコピーします。

application
  |-- libraries
        |-- Spyc.php

YAMLファイルを用意する

test.yamlというファイルを適当なフォルダに作成します。今回はconfigフォルダ内に以下の内容のファイルを作成します。

application
  |-- config
        |-- test.yaml

test.yaml

id: 1
name: hogehoge

YAMLファイルの読み込み

Spyc.phpを読み込み、その後Spyc::YAMLLoad()でYAMLファイルを読み込みます。戻り値は配列です。

require_once APPPATH.'libraries\Spyc.php';
$data = Spyc::YAMLLoad(APPPATH.'config\test.yaml');

var_dump($data);
// array(2) { ["id"]=> int(1) ["name"]=> string(8) "hogehoge" }

まとめ

Spycを利用するとYAML形式のファイルを簡単に読み込むことが出来るのでおすすめです。

2016-10-09

データをチャート形式で表示するためにamChartsを利用してみる

javascript

あるデータをチャートで表示するのにamChartsを利用したときの覚え書き。

amChartsとは
amChartsの簡単な使用方法
まとめ

amChartsとは

javascriptでチャートを描画するためのフレームワークです。棒、エリア、列、バー、パイ、XY、散布、ローソク足のようなチャートを描画することが出来ます。

amChartsの簡単な使用方法

amcharts.jsの読み込み

CDNを利用してamcharts.jsを読み込みます。

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>

表示するチャートのjsを読み込む

表示したいチャートの種類のjsを読み込みます。ここではpie.jsを読み込みます。

<script src="//www.amcharts.com/lib/3/pie.js"></script>

チャートを表示する領域を設定する

htmlにチャートを表示する領域を設定します。idは適当に設定します。

<div id="chart"></div>

上で指定したidにスタイルを設定します。
チャートの色等はjavascriptで指定するためチャートを描画する領域の幅と高さを指定しています。

#chart {
  width: 100%;
  height: 300px;
}

チャートを設定する

単純なパイチャートを作成します。ここではphpが60%、javascriptが20%、htmlが20%のチャートを作成しています。

<script>
var chart = AmCharts.makeChart("chart", {
  "type": "pie",
  "dataProvider": [
    {
      "lang": "php",
      "val": 60
    },
    {
      "lang": "javascript",
      "val": 20
    },
    {
      "lang": "html",
      "val": 20
    }
  ],
  "valueField": "val",
  "titleField": "lang"
});
</script>

表示例

まとめ

ロゴが表示される以外は無料で利用できるので、データをチャートにして確認したいときなどはamChartsを利用することでさくっとチャートができ、とても便利だと思います。

2016-10-06

CodeIgniter + wkhtmltopdf + snappyでWebページをPDFに変換する

codeigniter php

あまり利用することがないかもしれませんが、自分で生成したWebページをPDFに変換して出力したいときがあります。その場合wkhtmltopdfとsnappyを使用すると、さくっとPDFを作成することができます。

環境作成
- wkhtmltopdfをインストールする
- knp-snappyをインストールする
PDFの作成
- 生成したPDFをダウンロードする場合
- 生成したPDFをファイルに保存する場合
まとめ

環境作成

CodeIgniterは以前の記事で作成したものを使用します。 mikawatan.hatenablog.com

wkhtmltopdfをインストールする

今回はwindows環境で作成したため、インストーラーをhttp://wkhtmltopdf.org/downloads.htmlよりダウンロードしてインストールします。

knp-snappyをインストールする

composerを使用してインストールします。

$ composer require knplabs/knp-snappy

PDFの作成

Twigを使用してhtmlを変数に出力します。

$this->load->library('twig');
$html = $this->twig->render('pdf/index.html');

この場合、cssはインラインで記述していないとうまく表示がされません。

<!-- NG -->
<link href="css/index.css" rel="stylesheet" type="text/css">
  
<!-- OK -->
<style>
  p {
    font-size: 16px;
  }
</style>

Pdfクラスの初期化時にwkhtmltopdfへのパスを設定します。内部的にcommandを実行するためパスはダブルクォーテーションで囲います。

$pdf = new Knp\Snappy\Pdf('"C:\Program Files (x86)\wkhtmltopdf\bin\wkhtmltopdf.exe"');

生成したPDFをダウンロードする場合

headerを出力した後にpdfを出力します。

public function index()
{
  $this->load->library('twig');
  $html = $this->twig->render('pdf/index.html');

  $pdf = new Knp\Snappy\Pdf('"C:\Program Files (x86)\wkhtmltopdf\bin\wkhtmltopdf.exe"');
  // 出力
  header('Content-Type: application/pdf');
  header('Content-Disposition: attachment; filename="test.pdf"');
  echo $pdf->getOutputFromHtml($html);
}

生成したPDFをファイルに保存する場合

generateFromHtmlの引数に出力するファイルのパスを指定します。

public function index()
{
  $this->load->library('twig');
  $html = $this->twig->render('pdf/index.html');

  $pdf = new Knp\Snappy\Pdf('"C:\Program Files (x86)\wkhtmltopdf\bin\wkhtmltopdf.exe"');
  // ファイルに保存
  $pdf->generateFromHtml($html, APPPATH.'tmp\test.pdf');
}

まとめ

wkhtmltopdfとsnappyを使用すればさくっとWebページをPDFに変換できます。