Windows開発PCのセットアップ手順メモ

choco.exeのインストール


  • admin権限で実行が必要

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

chocoから各種ツールのインストール


choco install lauchey -y
choco insaall cmder -y
choco install visualstudiocode -y

choco install pandoc
choco install php
choco install sourcetree
choco install tortoisegit
choco install virtualbox
choco install awscli
choco install mp3tag
rem choco install chrome

VisualStudio Codeの設定変更


configの設定変更


{
    "window.zoomLevel": 1,
    "editor.renderIndentGuides": true
}

extensionのインストール


ext install html-snippets
ext install html-css-class-completion



JavaScript: The Good Parts読書メモ

オライリーのJavaScript: The Good Partsを読んで新しく身についた知識のメモです。

プリミティブ型


プリミティブ型は下記の5つのみで、残りはオブジェクトになる

  • 数値
  • 文字列
  • true/false
  • undefined

プリミティブ型はimmutableなので値を変えられない(もちろん変数の再代入は可能)
オブジェクトは単なるハッシュで、valueにはundefined以外の値がセットできる

オブジェクトの基本


  • オブジェクトはハッシュなので{}で、簡単にオブジェクト生成できる

var emptyObj = {};
var testObj = {
    "key1":"value1",
};
console.log(emptyObj);
console.log(testObj);

出力

Object {}

Object {key1: “value1”}


  • キーは、予約語じゃなければ"で括らなくて良い。

var testObj = {
    "key1":"value1",
    key2:"value2",
    item: {
        name:"apple",
        price:200, 
    }
};

  • オブジェクトからは、[]または、.で値を取得できる。

     シンタックスシュガーなので、どちらも振る舞いは同じ

var testObj = {
    "key1":"value1",
    item: {
        name:"apple",
        price:200, 
    }
};

// 以下の二つは同じ意味
console.log(testObj.item.name);
console.log(testObj["item"]["name"]);

// でも、下記のコードはNG(エラーになる)
console.log(testObj[item][name]);

  • キーがないときの対策がしたいなら、||を使うと良い

name = testObj.item.name || "noname";
cate = testObj.item.category || "nocate";
console.log(name);  // apple
console.log(cate);  // nocate

  • ネストしたオブジェクトから値をとるときは、&&が使える

// itemがあって、item.nameがあるときのみ値を取得
name = testObj.item && testObj.item.name;

  • 下記のコードは、すでにキーがある場合は上書きで、なければkeyが作成される。

testObj["key_new"] = "new-value1";  // プロパティの追加
testObj["key_new"] = "new-value2";  // プロパティの更新

  • オブジェクトがコピーされるときは参照渡しになる

プロトタイプ


  • すべてのオブジェクトはObject.prototypeとリンクしている。

  • なので、下記の処理で、すべてのオブジェクトにメソッドを追加できる


if ( typeof Object.sayHello !== 'function' ) {
    Object.prototype.sayHello = function( msg ) {
        console.log( "hello " + msg );
    }
}

var obj1 = {"key1":"value1"}; 
var obj2 = {"key2":"value2"};

obj1.sayHello("aaa"); // hello aaa
obj2.sayHello("bbb"); // hello bbb

  • 参照を持っているだけなので、プロトタイプはさかのぼって適用される

if ( typeof Object.sayHello !== 'function' ) {
    Object.prototype.sayHello = function( msg ) {
        console.log( "hello " + msg );
    }
}

var obj1 = {"key1":"value1"}; 
var obj2 = {"key2":"value2"};
obj1.sayHello("aaa"); // hello aaa
obj2.sayHello("bbb"); // hello bbb

Object.prototype.sayHello = function( msg ) {
    console.log( "こんにちは " + msg );
}
obj1.sayHello("aaa"); // こんにちは aaa
obj2.sayHello("bbb"); // こんにちは bbb



リフレクション


  • typeof演算子で変数の型をチェックできる
  • typeof演算子の戻り値は、文字列??

var testObj = {
    "key1":"value1",
    item: {
        name:"apple",
        price:200, 
    }
};


console.log(typeof testObj);      // object
console.log(typeof testObj.key1); // string
console.log(typeof testObj.key2); // undefined

if ( typeof testObj.key1 != "undefined" ) {
    console.log("find1"); // これは出力される
}
if ( typeof testObj.key2 != "undefined" ) {
    console.log("find2"); // これは出力されない
} 

  • typeofプロトタイプ元の情報も取ってしまう。

    これが望ましくない場合は、hasOwnProperty()を使う

var obj1 = { "key1":"value1"};
console.log(typeof obj1.toString);            // "function" が返ってしまう
console.log(obj1.hasOwnProperty('toString')); // こっちだと、未定義(false)が返ってくれる



[WordPress]ダッシュボードへリンク集を出すプラグインを自作する

WordPressを使っているとダッシュボードにちょっとした情報を表示したくなる場合があります。

そこで、WordPressにログインした直後に表示される管理画面へリンク集を設置できるプラグインを作成しました。実際は、指定されたHtmlを表示しているだけなので、リンク集に限らず好きな情報を出力できます。

「プラグインの自作」と書くと敷居が高そうですが、function.phpに2つ処理を書くだけなので割と簡単に作成できます。phpのプログラムを書いた人であればすぐわかるレベルですし、プログラムの経験がなくてもhtmlさえ分かれば本記事を元に好きな内容を表示させるようなカスタマイズも簡単です。

Widgetプラグインの作成方法


プラグインのプログラムを準備する


まずは下記の内容でfunction.phpを作成します。

プログラム中にある、$htmlStr = <<<EOTの後に出てくるHtmlがダッシュボードに出力されます。
サンプルで用意したHtmlはGoogleアナリティクスや、アフィリエイトサイトへのリンク集になっています。

<?php
/*
Plugin Name: 0001_nano-admin-dashboardWidget
Copyright: nano
Description: ダッシュボードにリンク集を出力します
Version: 1.0.0
*/

// プラグインを登録
add_action('wp_dashboard_setup', 'nano_dashboard_widgets');
function nano_dashboard_widgets() {
    wp_add_dashboard_widget('nano_dashboard_widgets', 'リンク集',  'nano_dashboard_widget_linkList');
}

// リンク集を表示するウィジット
function nano_dashboard_widget_linkList() {
    $htmlStr = <<<EOT
        <ul style="line-height:1.5rem">
            <li>
                <a href="https://www.google.com/analytics/web">Googleアナリティクス</a>
            </li><li>
                <a href="https://affiliate.amazon.co.jp/">Amazonアソシエイト</a>
            </li><li>
                <a href="https://affiliate.rakuten.co.jp/reports/">楽天アフィリエイト</a>
            </li><li>
                <a href="http://pub.a8.net/a8v2/asResultReportAction.do?action=ud">A8.net</a>
            </li><li>
                <a href="https://www.valuecommerce.ne.jp/">バリューコマース</a>
            </li><li>
                <a href="http://admax.shinobi.jp/">忍者AdMax</a>
            </li>
        </ul>
EOT;

    echo $htmlStr;
}

これをWordPressをインストールしたフォルダの、wp-content\plugins\0001_nano-admin-dashboardWidgetにコピーします。

作ったプラグインを有効化する


WordPressログインし、プラグインページに移動します。一覧にプラグイン0001_nano-admin-dashboardWidgetが追加されているので、これを有効化します。
プラグインの有効化 ここで表示されるプラグイン名や、説明文、バージョン番号は先ほど作ったfunction.phpの先頭にコメントとして記載されています。

<?php
/*
Plugin Name: 0001_nano-admin-dashboardWidget
Copyright: nano
Description: ダッシュボードにリンク集を出力します
Version: 1.0.0
*/

ダッシュボードに表示されていることを確認する


有効化が完了したらダッシュボードページに遷移します。以下のように作成したプラグインが表示されていれば成功です。
プラグインの有効化
単なるリンク集ですが、これでも正式なプラグインですので表示オプションでウィジットの表示ON/OFF制御なども行えます。
表示オプション

ダッシュボードに複数のウィジットを表示させたい時は?


以下のような形でfunction.phpを書き換えると、1つのプラグインに複数のウィジット定義を行えます。
これで、ダッシュボードに表示させるウィジットの数をいくつでも増やせます。

<?php
/*
Plugin Name: 0001_nano-admin-dashboardWidget
Copyright: nano
Description: ダッシュボードにリンク集を出力します
Version: 1.0.0
*/

// プラグインを登録
add_action('wp_dashboard_setup', 'nano_dashboard_widgets');
function nano_dashboard_widgets() {
    wp_add_dashboard_widget('nano_dashboard_widgets',  'リンク集(分析系)',   'nano_dashboard_widget_linkList');
    wp_add_dashboard_widget('nano_dashboard_widgets2', 'リンク集(アフィリエイト系)',  'nano_dashboard_widget_linkList2');
}

// 分析系リンク集を表示するウィジット
function nano_dashboard_widget_linkList() {
    $htmlStr = <<<EOT
        <ul style="line-height:1.5rem">
            <li>
                <a href="https://www.google.com/analytics/web">Googleアナリティクス</a>
            </li>
        </ul>
EOT;

    echo $htmlStr;
}

// アフィリエイト系リンク集を表示するウィジット2
function nano_dashboard_widget_linkList2() {
    $htmlStr = <<<EOT
        <ul style="line-height:1.5rem">
            <li>
                <a href="https://affiliate.amazon.co.jp/">Amazonアソシエイト</a>
            </li><li>
                <a href="https://affiliate.rakuten.co.jp/reports/">楽天アフィリエイト</a>
            </li><li>
                <a href="http://pub.a8.net/a8v2/asResultReportAction.do?action=ud">A8.net</a>
            </li><li>
                <a href="https://www.valuecommerce.ne.jp/">バリューコマース</a>
            </li><li>
                <a href="http://admax.shinobi.jp/">忍者AdMax</a>
            </li>
        </ul>
EOT;

    echo $htmlStr;
}

参考リンク


今回のプログラムでは、WordPressに用意されているAPIの中で、wp_add_dashboard_widget()メソッドを利用しています。wp_add_dashboard_widgetの仕様は下記のページを参考にしてください。



Markdown中級者を目指す人が知っておくべき27の知識

工学社から出ている書籍、はじめてのMarkdown―軽量マークアップ言語の記法と使い方を読了しました。


正直Markdownの書式くらいならネットで十分だと思っていたのですが、改めて知識を整理でき意外と良い本でした。「Markdownを普段何となく使っているけど、時々、改行などが思ったように反映されない…」みたいな人は一度読んでみると色々気づきがあるかと思います。

markdownエディタについて


本書では、エディタとしてMarkdown#Editorというソフトがお勧めしている。

…この本はちょっと前の出版なので、現在ならVisual Studio Codeが便利。
Visual Studio Codeだと、拡張子を*.mdでファイルを作り、”Ctrl+K V”でプレビュー画面を表示できる。ショートカットキーを忘れたときは、F1キーを押して”markdown”と入力すればリストとショートカットキーが表示される。

本文の段落分けについて


  • 本文は通常pタグで囲まれる
  • 文章を別の段落にしたい(2つのpタグに分けたい)場合は、markdownファイル内で改行を2連続で入れ、空行をはさむ
  • brタグを入れたい場合は、行末に半角スペースを2つ入れて改行する
    複数回改行したい場合は、”半角スペース”2つ+改行文字”の行を作る

引用文について(blockquoteタグ)


  • インデントをつけるか、行頭に”>”文字を入れる
  • blockquoteの中で改行したい場合は、”半角スペース”2つ+改行文字”
  • “>>”でblockquoteをネストできる

  • 二重にネストしたblockquoteから戻るには、”>”だけの行が必要


以下のようにすれば…

> 1行目
>> 1.1行目
>> 1.2行目
>
> 2行目

こう表示される

1行目

1.1行目
1.2行目


2行目


箇条書きについて(liタグ)


  • 行頭に”* “を入れればリストを作れる
  • “*”記号の後ろには半角スペースが必要
  • 本文とリストの間(リストを始める手前)には空行が必要
    (本文のすぐ下の行に “* xxxx”を書いてもリストとみなされない)

箇条書きについて(olタグ)


  • 数字+ピリオド+半角スペース”で、連番付きの箇条書きを作ることができる
  • 一覧の列挙中に空行を入れると、連番が最初に戻る
  • 一覧の途中で改行したいときは、行末に半角スペースを2つ入れる
  • 箇条書き以外で行頭に、”1. “を持ってきたい場合は、”1\. “でエスケープできる
  • さらに、”\”マーク自体を表示させたいときは、”\\”と2回重ねる
  • 箇条書きに見出しと本文を書く際に、見出しだけ装飾したい場合は下記のように書く

1. **見出しの1つ目**  
    1つ目の内容説明  
    1つ目の内容説明2行目

1. **見出しの2つ目**  
    2つ目の内容説明  
        
    2つ目の内容説明2行目  

1. **見出しの3つ目**  


1. 見出しの1つ目

1つ目の内容説明

1つ目の内容説明2行目

  1. 見出しの2つ目

    2つ目の内容説明

    2つ目の内容説明2行目

  2. 見出しの3つ目


強調、イタリック、下線について


  • 2段落またいで、強調させることはmarkdown上ではできない
    行いたい場合はhtmlタグを直接書くしかない

  • “1*2*3=6″など、数式で掛け算記号を使いたいときに、誤って強調のマークとみなされる場合がある
    このような場合は、アスタリスクの前に円マークを入れて”\*”とすればよい


画像について(imgタグ)


  • ![altのタイトル](image_url_filename) の形式で、画像を埋め込める
  • !,[,],(,)の各記号の前後に空白を入れると正しく認識しないので注意
  • “altのタイトル”の部分は省略してもよい
  • 手前に文章があると、同じ行に表示される。改行したい場合は、文章の最後に半角スペース2個を入れるとよい

ソースコードの埋め込みについて(codeタグ)


  • 埋め込むコードブロック全体をインデントするのが最も簡単
  • インデントする際に、タブとスペース4つを混ぜないように注意
  • コードブロックを終わらせるには、インデントのない改行を入れる
  • 文章中へecho "hello<br />";のような形でコードを埋め込む場合は、逆クォートで囲む
  • 逆クォートで囲んだコード中に、export STIME=``date``のような形で逆クォートを出したい場合は、逆クォートを2回書く


はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)