OmniAICreator/Qiita-1.07M huggingface dataset:
今からはじめるReact.js〜React ver0.14〜

前回→[今からはじめるReact.js〜スタイルの適用〜](http://qiita.com/kuniken/items/b06de893c22f33499a22)

# ReactDOM

0.14でReactDOMがReactから分離されました。
そのため、`render()`や`findDOMNode()`はReactDOMのメソッドを使用しなければなりません。

さっそく、`react-dom`をインストールします。

`index.js`は以下のように、インポートの追加と、最後の`React.render`の箇所を書き換えます。

`npm install react-dom --save` 

```js:index.js
var React = require('react');
var ReactDOM = require('react-dom');//react-domをインポート
var Header = require('./views/header.jsx');
var Body = require('./views/body.jsx');
var Footer = require('./views/footer.jsx');

//classNameでcssを指定
var Index = React.createClass({
  render:function(){
    return (
      <div>
        <Header/>
        <div className="main">
          <Body/>
        </div>
        <Footer/>
      </div>
    );
  }
});

//React.renderをReactDOM.renderに変更。
ReactDOM.render(
  <Index />,
  document.getElementById('content')
);
```

0.13からバージョンアップした際の注意事項ですが、今まで
`React.findDOMNode()`
と書いていたところも、
`ReactDOM.findDOMNode()`
と書く必要があります。
で、そもそも`getDOMNode()`は使わないでねと。

## サンプルソース
https://github.com/kunitak/react-tutorial/tree/day4

次回→[今からはじめるReact.js〜propsとstate、それからrefs〜](http://qiita.com/kuniken/items/a22adda392ccc30011b1)
今からはじめるReact.js〜コンポーネントをまとめる〜

前回→[今からはじめるReact.js〜初めてのコンポーネント〜](http://qiita.com/kuniken/items/963cb977dffd3e662e40)

[2016/05/18追記]
当記事のソースは執筆時点ではReact0.13をベースに書いていましたので、0.14以降では
[今からはじめるReact.js〜React ver0.14〜](http://qiita.com/kuniken/items/2fc5b782da5d302247ab)
で記載のように実装する必要があります。


# 複数のコンポーネントを一つにまとめる

前回でも述べましたが、コンポーネントは最終的に一つにまとめてあげる必要があります。

ヘッダ、ボディ、フッタとコンポーネントを作成した場合を例に、ソースを書いてみます。

index.jsを以下のように書き換えます。

```js:index.js
var React = require('react');

//ヘッダの定義
var Header = React.createClass({
  render: function(){
    return (
      <h1>ヘッダです</h1>
    );
  }
});

//ボディの定義
var Body = React.createClass({
  render: function(){
    return (
      <h1>ボディです</h1>
    );
  }
});

//フッタの定義
var Footer = React.createClass({
  render: function(){
    return (
      <h1>フッタです</h1>
    );
  }
});

//コンポーネントを一つにまとめる
var Index = React.createClass({
  render:function(){
    return (
      <div>
        <Header/>
        <hr/>
        <Body/>
        <hr/>
        <Footer/>
      </div>
    );
  }
});

React.render(
  <Index />,
  document.getElementById('content')
);
```
上記の例では、
ヘッダ、ボディ、フッタコンポーネントを定義し、Indexコンポーネントとして一つにまとめています。

作成したら、前回同様、コンパイルしてブラウザでindex.htmlを表示してみてください。

## サンプルソース
https://github.com/kunitak/react-tutorial/tree/day2-1

# コンポーネントごとにファイル分割する。
コンポーネントごとにファイル分割した場合もやることは同じです。

ヘッダ、ボディ、フッタをそれぞれ別のファイルに定義した場合、以下のようになります。
コンポーネント定義のみのファイルになるため、区別しやすくするため拡張子を.jsxとしときます。
ファイルはclient/scripts/views以下に置くことにします。

```js:header.jsx
var React = require('react');

//ヘッダの定義
var Header = React.createClass({
  render: function(){
    return (
      <h1>ヘッダです</h1>
    );
  }
});

module.exports = Header;
```
ボディ、フッターはヘッダと同様に書けばいいのでここでは割愛します。
他のファイルからHeaderコンポーネントを利用できるように、
`module.exports = Header;`
を忘れずに書きます。

それぞれファイルが作成できたら、index.jsでインポートします。
以下のようになります。

```js:index.js
var React = require('react');
var Header = require('./views/header.jsx');//ヘッダをインポート
var Body = require('./views/body.jsx');//ボディをインポート
var Footer = require('./views/footer.jsx');//フッタをインポート

//コンポーネントを一つにまとめる
var Index = React.createClass({
  render:function(){
    return (
      <div>
        <Header/>
        <hr/>
        <Body/>
        <hr/>
        <Footer/>
      </div>
    );
  }
});

React.render(
  <Index />,
  document.getElementById('content')
);
```

## サンプルソース
https://github.com/kunitak/react-tutorial/tree/day2-2

次回→[今からはじめるReact.js〜スタイルの適用〜](http://qiita.com/kuniken/items/b06de893c22f33499a22)
今からはじめるReact.js〜準備〜

仕事を進める上でReact.jsについて教える機会が増えてきました。

React.jsがなんなのかは、各自ググっていただくとして、基本的なところで
何をどうやったらReact.jsでサービスが実装できるのか？
という点について理解できるよう、チュートリアルを作っていきたいと思います。

#前提
・ES5ベースで実装。
・npmを利用して必要なライブラリを追加。
・JSXのコンパイルはreactifyで行う。
・サーバサイドはnode.jsで実装
・DBはpostgreSQL(Herokuにデプロイするため)
上記、各単語は必要になった時点で触れていきますが、よくわからなければ調べてください。

※React.jsの技術情報を調べていると、よくES6ベースで書かれたソースをよく見るのですが、現状はブラウザ自体が一部しか対応してなかったり、知識レベルがバラバラな複数の技術者とチームで開発するということもあって、現時点ではES5ベースで実装するのが現実的かなと。

#準備
###node.jsのインストール
・実装に必要なライブラリは、jsのライブラリを管理しているnpmモジュールを利用して作業フォルダ以下にインストールします。React.jsもnpmでインストールします。

npmはnode.jsで実行されるモジュールのため、
node.jsを下記からダウンロードしてインストールしておく必要があります。
https://nodejs.org/en/download/

node.jsのインストールが終わったら、
さっそく、React.jsをnpmとやらでインストールします。

が、

インストールの前段階として、
npmで何かのライブラリをインストールするためには、
作業フォルダ直下にpackage.jsonというファイルを作成しておく必要があります。

DOS窓もしくはターミナルを起動し、
作業フォルダで、下記のコマンドを実行します。

```
cd {作業ディレクトリ}
npm init
```

下記のようにいろいろ質問されるので、デフォルト値（()内で表示されているもの）でよければそのままEnterで進めます。

```
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See 'npm help json' for definitive documentation on these fields
and exactly what they do.

Use 'npm install <pkg> --save' afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (tutorial) 
```
最後に、この内容でpackage.jsonを作成するよ？と聞かれますので、良ければ「yes」とタイプします。

```
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to {作業ディレクトリ}/package.json:

{
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) 
```
作業ディレクトリにpackage.jsonが作成されているはずです。

###React.jsをインストール
前準備が長くなりましたが、下記のコマンドでReact.jsをインストールします。
`npm install react --save`

--saveオプションをつけると、package.jsonのdependenciesにreactが追記されます。
テスト用ライブラリなど本番環境では不要なライブラリをインストールする場合は、--save-devとして、devDependenciesに追記されるようにします。

これでReact.jsのソースが書けるようになりました。

次回から早速ソースを書いてみましょう。

次回→[今からはじめるReact.js〜初めてのコンポーネント〜](http://qiita.com/kuniken/items/963cb977dffd3e662e40)
SpineにPhotoshop上のデザインを取り込む（ルーラで原点指定編）

# はじめに
Spine公式のPhotoshop用データ書き出しプラグインを使う場合、Spine上での原点をルーラの原点で指定することができます。若干手間取ったので、単独記事で解説します。

※記事を書いた時点で使用しているバージョンはPhotoshop CC 2015およびSpine2.1.27 Essentialです。Mac上での作業での解説となるので、Windowsの人は画像キャプチャとパスを適当に読み替えてください。

![スクリーンショット 2015-10-12 16.25.11.png](https://qiita-image-store.s3.amazonaws.com/0/8302/7d378bf1-a55c-377e-62ad-93c8a8f7b2ac.png)
この機能を使う場合は、書き出し設定で'Use ruker origin as 0,0'をONにしておきましょう。

# ルーラで原点位置を指定する。
ルーラでの指定なしでSpineにphotoshop書き出しデータを読み込んだ場合、原点は下記のようにキャラクターの左下になります。
![スクリーンショット 2015-10-12 15.50.18.png](https://qiita-image-store.s3.amazonaws.com/0/8302/dec946b7-ef9d-16de-3b33-75d36caeaf81.png)

ルーラで位置指定した場合は、任意の位置に原点を持ってくることができます。Spine上で普通に編集もできますが、地味に便利です。
![スクリーンショット 2015-10-12 15.57.34.png](https://qiita-image-store.s3.amazonaws.com/0/8302/dd956090-6f9c-b631-5453-0065a1874603.png)

ルーラでの原点の指定方法は、まずPhotoshopメニュー→表示→定規、でルーラー(画像上と左の目盛り)を表示状態にした後に、
![スクリーンショット 2015-10-12 15.52.14（2）.png](https://qiita-image-store.s3.amazonaws.com/0/8302/96caf06a-a323-4bba-35f5-69027d908a6d.png)
ルーラーの左上の小さな四角のところからマウスをドラッグ、原点としたい位置でリリースします。
![スクリーンショット 2015-10-12 15.52.17.png](https://qiita-image-store.s3.amazonaws.com/0/8302/9a5c15b8-1279-51b1-11ad-5d6bef3af634.png)
操作後に目盛りの0の位置が移動しているのがわかると思います。

この状態でデータの書き出しを行えばOKです。
SpineにPhotoshop上のデザインを取り込む（書き出し設定詳細編）

# はじめに
前回の記事でSpineにPhotoshopからデータを取り込む基本的な事を開設しました。この投稿では書き出し設定を詳細まで解説してみようと思います。

※記事を書いた時点で使用しているバージョンはPhotoshop CC 2015およびSpine2.1.27 Essentialです。Mac上での作業での解説となるので、Windowsの人は画像キャプチャとパスを適当に読み替えてください。
![template.png](https://qiita-image-store.s3.amazonaws.com/0/8302/22f484e1-3177-0173-239c-096ab290f311.png)

# 書き出しオプションの解説

![スクリーンショット 2015-10-12 14.48.15.png](https://qiita-image-store.s3.amazonaws.com/0/8302/8397b91e-9196-92ae-3b2b-76cd33bb8389.png)

* Write layers as PNGs
各レイヤーをpng画像として書き出すか。基本チェックする。

* Ignore hidden layers
非表示レイヤーを書き出しに含めないか。お好みで。

* Write a template PNG
チェックするとレイヤーを統合した画像も一緒に書き出されます。Spine側でガイドとして使いたい時などに。

* Use groups as skins
レイヤーフォルダ(=グループ)をskin切り替え機能を利用する形式で書き出す為に使います。機能についてわからないうちはoffにします。詳細は後述。

* Write Spine JSON
Spine用にjsonファイルを書き出す。画像のみ書き出したい場合にoffにする。

* Use ruler origin as 0,0
ルーラの原点をSpine上で原点としてみなす。詳細は別記事で。

* PNG scale
書き出し画像サイズの倍率を設定します。

* Padding
各パーツの余白を設定します。不具合ない限りそのままで良さそう。
(メッシュ機能使う際など、大きめに取っておいたほうが良いかもしれません。）

* Output directories
imageフォルダとJSONの書き出しパスをPSDファイルからの相対パスで指定します。
spineファイルの横に書き出せば、前回の記事で解説した画像リンク切れは起こりません。

# SKIN機能について
Skin機能というのはアニメーションは共通で、キャラデザインを別のもの切り替える為に使う機能です。Skin名でレイヤーグループを作り、その中に各パーツを配置していきます。

![スクリーンショット 2015-10-12 16.04.18.png](https://qiita-image-store.s3.amazonaws.com/0/8302/c4066fee-6b77-8656-6930-0c1a5d5576dd.png)
skinの例。名前をskin2とし、カラー効果をグループにかけてある。

![スクリーンショット 2015-10-12 16.04.30.png](https://qiita-image-store.s3.amazonaws.com/0/8302/014f19ce-af73-cfdd-84a9-58d22290592a.png)
skinの例。名前をskin1とした。デザイン的には前回の記事と同じもの。

![スクリーンショット 2015-10-12 16.11.06.png](https://qiita-image-store.s3.amazonaws.com/0/8302/b4c52265-8bea-0262-f6f2-c5b8792d7fc3.png)
Skin設定ありでデータを書き出した場合、skinごとにサブフォルダが切られた状態で画像が配置されます。Spineに読み込んだ直後は、何も表示されないかもしれませんが、ツリービューのSkinsのところでskinを選択してあげることで、正常に表示されます。skinの切り替えもここです。一瞬でデザインが切り替わります。

# 同じパーツ画像を複数の場所に使いまわしたい
Photoshop側ではどうにもならないようです。ダミーのパーツ画像を配置して書き出し、Spine側で同じイメージを使うように編集し直しましょう。利用しない画像はスプライトシートに書き出されないので、ここでダミーを用意することに問題はありません。

# おわりに
Skin機能について、共通パーツをどうするか、などより細かい利用方法についてはまたそのうち。
解説している公式PhotoshopプラグインではSkin機能がレイヤーグループを利用してしまうため、Generator(Photoshopの画像自動書き出し機能)のように複数のレイヤーを一つの画像として扱うことができず。。各レイヤーに単独の画像を置くことしかできなくなっているんですよね。
この件について、のちの記事で軽く触れまうが、公式以外にもSpineにデータを書き出すプラグインはあるようですし、公式のjsxファイルも難しくなさそうなので、好きにカスタマイズしてみるのも良いかと思います。

〜 続く 〜
MySQLが少しうまく行かなかったポイント

# MySQLが少しうまく行かなかったポイント
今回、macでWordPressを使うことになったので、環境を整えようと思い、brewを使ってmysqlをインストールしたところ、

     mysql.server start

を実行しようとしてエラーが吐き出された。

内容は、以下のようだった。

     . ERROR! The server quit without updating PID file (/usr/local/var/mysql/"UserName".local.pid).
だった。

調べてみたところ、.pidファイルにアクセスできないためその先の処理を実行することができないといった意味らしかった。

そのため、以下のコマンドを実行することで、mysqlが.pidファイルにアクセスできるようになり実行することができた。

    sudo chown -R _mysql:_mysql /usr/local/var/mysql
インストールした Android アプリ

並び順は利用頻度、優先順位

# 必須
* 1password : パスワード管理
* Evernote
* Dropbox
* Gmail

# ブラウザ
- Chrome ☆
- Opera Mini ☆

# 電子書籍、テキストビューア、メモ
- Kinoppy ☆
- Amazon Kindle ☆
- Adobe Acrobat
- Pocket ☆
- Simplenote
- Keep
- WriteNote
- マガポケ
- 日経TRENDY
- FujisanReader

# ランチャー、スクリーンセーバー関連
- GO Launcher Z
- GO Weather EX
- DashClock Battery Extension
- DashClock Widget
- World Weather Clock widget

# メール、SNS、chat、連絡先
- SMARTalk ☆
- Facebook ☆
- Tuippuru ☆
- gContacts ☆
- Google+ ☆
- Hangouts ☆
- Instagram
- Meetup
- Skype

# カレンダー、ToDo
- Sunrise
- TickTick ☆
- Toodledo ☆

# ニュース等
* はてなブックマーク ☆
* 2chMate : 2ch ビューア ☆
- BBC News
- StumbleUpon

# クラウドストレージ
- Box ☆
- OneDrive ☆
- Google Drive ☆
- Qfile ☆
 
# ユーティリティ
- Volume Control+ ☆
- Battery Mix ☆: バッテリー消費記録
- Battery Guru : 消費電力最適化
- CCleaner

# 入力支援
* ATOK Pro ☆
* Google 日本語入力
* Swift keyboard
- Basic words

# 移動、旅行支援
- Transit UK ☆
- Citymapper ☆
- ReCoCa
- MAPS.ME ☆
- thetrainline
- TripAdvisor
- Booking.com
- Expedia
- SkyScanner
- Parkopedia
- RingGo
- HHonnors

# 画像、写真
- Google Photos ☆
- QuickPic
- Picasa Tool
- Reduce Photo Size
- Sketch
- SHOT DOCS

# 動画、TV、ラジオ、音楽
- Hulu
- WOWOWオンデマンド
- VLC ☆
- MX Player
- DMM動画
- テレBing
- TV SideView
- Tv24.co.uk
- radiko.jp
- Adobe Flash Player 11.1

# 辞書、英語
- Merriam-Webster Dictionary
- Weblio英和
- Weblio翻訳
- zuknow
- Translate

# ファイラー
- File Commander
- ASTRO File Manager

# 生活支援
- Zaim ☆
- Panecal
- Runkeeper
- FusionCalc
- KeePassDroid

# 通信
- Bluetooth Tethering On Off
- OpenVPN Connect
- Microsoft Remote Desktop
- PocketCloud
- FastConnect

# その他
- Adobe AIR
- Amazon
- Google App
SuperAgentでChatworkにつぶやく


[suparagent](https://visionmedia.github.io/superagent/)(+ES2015)で書いてみます。

`cwconf.js`にchatworkにアクセストークンを記述しています。

```chatwork.js

import request from 'superagent';
import cwtoken from './config';

const ROOMID = 19227831;
const TOKEN = cwtoken;
let url = 'https://api.chatwork.com/v1/rooms/'+ROOMID+'/messages';
let message = 'バルス';

request.post(url)
     .set('X-ChatWorkToken', TOKEN)
     .query({body:message})
     .end((err, res) => {
       if (res.ok) {
         console.log(JSON.stringify(res.body));
       } else {
         console.log(res.text);
       }
     });
```

Node.js v4でもまだimportは実装されてないっぽいのでbabel-nodeで

```
$ babel-node chatwork
{"message_id":857693021}
```

![](https://i.gyazo.com/675e47b5d05e43820acfb6536f24448d.png)

つぶやけました!
SpineにPhotoshop上のデザインを取り込む（基本編）


Photoshopデザイン上の構成をそのままSpineに取り込むやり方をくわしく説明します。パーツの位置と重ね合わせ順序をそのまま取り込むことができます。
# 事前準備

PhotoshopとSpineをインストールしてください。記事を書いた時点で使用しているバージョンはPhotoshop CC 2015およびSpine2.1.27 Essentialです。以下、Mac上での作業での解説となるので、Windowsの人はパスなど適当に読み替えてください。

# Photoshopプラグインのインストール
Spineをインストール済みであれば、/Applications/Spine/scripts/photoshop/ 以下にLayersToPNG.jsxという Photoshop用プラグインファイルがあります。これをコピーして、Photoshopのプラグインとしてインストールします。CC 2015の場合は、/Applications/Adobe\ Photoshop\ CC\ 2015/Presets/Scripts/ 以下に配置します。なお、ファイル名がそのままプラグイン名として表示されるので、わかりやすい名前に変えても良いでしょう。自分はSpine_LayersToPNG.jsxとしてみました。さらにショートカット設定なども行ってみました。メニュー→ファイル→スクリプト→で見つかります。
![スクリーンショット 2015-10-12 14.28.42.png](https://qiita-image-store.s3.amazonaws.com/0/8302/5feda915-6e79-eff5-5db3-0853ea4a4c2c.png)

なお、インストールせず、 Photoshopのプラグインメニューから上記jsxファイルを直接開いてもプラグインの実行はできます。

# Photoshop上のキャラクターデザインをexportする
![スクリーンショット 2015-10-12 14.46.48.png](https://qiita-image-store.s3.amazonaws.com/0/8302/0b38b271-1004-436a-03ba-6aac2ed4842e.png)
今回はこのようなデータを用意してみました。各レイヤーに画像が一つずつ配置されている事と書き出す必要のないレイヤーは非表示になっている事に注意してください。ここで、先ほどのプラグインを実行します。
![スクリーンショット 2015-10-12 14.48.15.png](https://qiita-image-store.s3.amazonaws.com/0/8302/fcfd39b2-09d7-dac6-92b1-6810ddc579a0.png)
このようなダイアログがでますので、特に設定は変更せずOKを押します。(細かい設定については次の記事で解説します。)jsonファイルが１つとimageフォルダ以下に各パーツの画像が掻き出されているのが確認できると思います。

# Spineにデータを読み込む

新規にSpineファイルを作成し、適当な名前で保存します。元からあるskeletonというスケルトンは削除しておきましょう。ツリービューで選択して右下の赤いxボタンを押すと削除できます。左上のSpineロゴをクリックするとメニューが(びよんと)飛び出てくるので、import Dataを選択します。
![スクリーンショット 2015-10-12 14.55.54.png](https://qiita-image-store.s3.amazonaws.com/0/8302/bdeb74e3-707d-22ef-ad66-f7da17d082aa.png)
ダイアログで先ほどexportしたjsonを選び、他の設定は変更せずにOKを押します。

成功すればこれだけでPhotoshopのデータが取り込めるのですが、、下記のような画面になってしまうことがあります。
![スクリーンショット 2015-10-12 14.58.07.png](https://qiita-image-store.s3.amazonaws.com/0/8302/c9b9ce44-c655-78fa-307f-c7ac9b56d8e8.png)
これは、json内に記述のある画像相対パスとspineファイルからの画像相対パスがずれており、読み込むべき画像が見つからない状態なので、Spineに正しいパスを教えてあげましょう。

![スクリーンショット 2015-10-12 15.06.40.png](https://qiita-image-store.s3.amazonaws.com/0/8302/c24573b1-5d67-5d06-5389-ef8ef0287aaf.png)
ツリービューからimageを選択すると、右下にBrouseというボタンを出現するので、これを押して先ほど出力した画像フォルダを選択し直してください。

![スクリーンショット 2015-10-12 15.12.57.png](https://qiita-image-store.s3.amazonaws.com/0/8302/d409ecf1-ff3e-f733-e794-e227b9f08b4c.png)
以上で、正しくSpineに Photoshopのデザインデータを取り込むことができたと思います。Boneの設定はPhotoshop上で行えないので、ここからSpineで行っていきましょう。

# パーツ画像を編集したくなった
元のPhotoshopファイルを開いて、同じようにexportしましょう。Spineは画像ファイル(のあるフォルダ)の変更を監視しているので、再度importせずとも画像編集後に、自動でSpine上の見た目が書き換わります。むしろ、Spine上でパーツの配置を変更していた場合は再度のimportでパーツの配置がおかしくなってしまうので、importしなおしてはいけません。また、元のPhotoshopファイルがもう必要ないのなら、書き出したパーツ画像を直接編集しても構いません。

# Photshop以外のデザインツールの対応など
公式にGIMP、Illustrator、AfterEffectsにもデータ書き出しのプラグインが用意されているようですが、 Photoshopの物が一番高機能なようです。またどうせSpine上でベジェのデータなどを扱うことはできないので、各ツールからは一度Photoshopデータに書き出してからそちらのプラグインを使ったほうがと良いかと思われます。なお、IllustratorのデータはPhotoshopの外部スマートオブジェクトとして読み込む事もできます。
詳しくはここに記載があります。http://ja.esotericsoftware.com/spine-images

# おわりに
SpineというツールはFlashPRO並みの可能性を秘めていると確信したので、基本的なところから掘り下げつつ、デザイナーさんが作業を終えるような作業メモをこのように残してみようと思います。

〜　続く 〜
獅子さん's メモ

#このメモの目的
このページは、自分用 **Markdown**記法のメモ＆投稿テストです。
強調表示は ** **で囲む。

##こんなことができる（見出しは#）
###コードブロックの引用
`３つと言語名でコードブロック（次に１行あけること↓）

```javascript
// 弾丸クラス
var Bullet = cc.Sprite.extend({
	power:1,
	HP:1,
	dir:0,		// 方向（とりあえず ０〜７の８方向）
	spd:1,
	zOrder:3000,
	// コンストラクタ
	ctor:function(arg, pos) {
		// 画像
		this._super(res.png_bullet);
		// 各種パラメータ
		this.arg = arg;
```
引用文は>記号
>Cで **文字列** としてデータを表示するには `printf()` を使います。次に水平線。

---
リンク [Q&A @IT](http://qa.atmarkit.co.jp/docs/markdown) を参考に書いてみた。

##見出しテスト
1. ひとつ
2. ふたつ
3. みっつ

- 項目１
- 項目２
Amazon LinuxでOverlayFSを試してみる

Amazon Linux AMI 2015.09にて、OverlayFSが使えるのか、試してみました。

① t2.microにてLaunch後、アップデート
>$ sudo yum clean all && sudo yum update

② /upper /lower /work /mergedディレクトリを作成
>$ sudo mkdir /upper /lower /work /merged

③ マウント
>$ sudo mount -t overlay overlay -olowerdir=/lower/,upperdir=/upper,workdir=/work /merged/

④ 確認
>$ sudo touch /lower/lower.txt
$ sudo ls -l /upper /merged /lower
lower:
total 0
-rw-r--r-- 1 root root 0 Oct 12 05:17 lower.txt
merged/:
total 0
-rw-r--r-- 1 root root 0 Oct 12 05:17 lower.txt
upper/:
total 0
$ sudo touch merged/merged.txt
$ ls -l upper/ merged/ lower
lower:
total 0
-rw-r--r-- 1 root root 0 Oct 12 05:17 lower.txt
merged/:
total 0
-rw-r--r-- 1 root root 0 Oct 12 05:17 lower.txt
-rw-r--r-- 1 root root 0 Oct 12 05:33 merged.txt
upper/:
total 0
-rw-r--r-- 1 root root 0 Oct 12 05:33 merged.txt
$ sudo touch upper/upper.txt
$ ls -l upper/ merged/ lower
lower:
total 0
-rw-r--r-- 1 root root 0 Oct 12 05:17 lower.txt
merged/:
total 0
-rw-r--r-- 1 root root 0 Oct 12 05:17 lower.txt
-rw-r--r-- 1 root root 0 Oct 12 05:33 merged.txt
-rw-r--r-- 1 root root 0 Oct 12 05:33 upper.txt
upper/:
total 0
-rw-r--r-- 1 root root 0 Oct 12 05:33 merged.txt
-rw-r--r-- 1 root root 0 Oct 12 05:33 upper.txt

という感じですが、もう少し調査が必要です

## 参考
OverlayFSとは
https://www.kernel.org/doc/Documentation/filesystems/overlayfs.txt
Amazon Linux AMI 2015.09公開
http://aws.typepad.com/aws_japan/2015/09/now-available-amazon-linux-ami-2015-09.html
Gantryを使って既存のコンテナイメージにそのままバックエンドを接続する

dockerを使ってシステムを構成する場合、孤立したコンテナを使うことはあまりなくて、複数のコンテナを連携させるのが普通だと思いますが、動的に構成が変動する場合など、なかなか考えることが多くて大変です。

あるフロントのコンテナから別なバックエンドのコンテナに接続する場合、フロント側にconsul-templateやconfdを組み込んだイメージを作成し、registratorなどでetcdやconsul上に登録されたバックエンドを見つけて接続を確立するのがどうやら主流のようです。

しかしこのやり方だと、せっかくポータブルに作成されたフロント側のコンテナを再度buildする必要があり、サービスの数だけフロントのコンテナイメージを用意する必要があって美しくないと思っていました。コンテナとコンテナの橋渡しは `docker run` のオプションだけで完結したほうが良いですよね。

ということで、[Gantry](https://github.com/genki/gantry)というものを作りました。
Gantryの機能は、基本的にはconsul-templateやconfdと同様、

* 指定した設定ファイルのテンプレートからetcdのサービス登録状況を参照して動的に設定ファイルを生成すること
* `-e GANTRY_CHECK`での設定ファイルのチェック
* `-e GANTRY_RELOAD`でのフロントプロセスのリロード
* それに加えて`CMD`で指定されたプロセスの起動も行います。

設定ファイルのテンプレートは `-v`でマウントすれば、基本的に全て `docker run` のオプションだけでコンテナ間の接続を確立できます。

Gantryの構成
-----

Gantryはetcdを監視してサービス登録状況を把握する`server`と、Gantry経由で起動されるフロントコンテナ側で`server`に接続する`client`に分かれています。

Gantryサーバーは各ホストに１つ起動しておきます。クライアントとの通信はホスト上のvolume (/var/lib/gantry/socket)に作られた UNIX domain socketを使います。そのため、通常のdockerコンテナのIPアドレスのように動的に変動せず、Gantryサーバーが停止した場合でも、クライアントは再び起動するのを待つことができます。これによってシステムを停止せずにGantryコンテナ自体をアップグレード (stop -> rm -> run) できるように作られています。

Gantryを使うためには、`sh`, `awk`, `nc -U` が入っている必要があります。`busybox`などの軽量コンテナにも入っているので大体大丈夫だとおもいますが、ない場合でも [busybox](http://www.busybox.net/)のバイナリ(1〜2MBぐらい)を `-v`でマウントして`-e NETCAT="/path/to/busybox nc -U"` のようにすればokです。

Gantryはetcdをバックエンドとして参照しますが、[普通のRegistrator](https://github.com/gliderlabs/registrator)が登録する情報`"IP:PORT"`だけでは情報が少なすぎて困るので、consulと同程度の情報をJSONで格納するように[少しカスタマイズしたもの](https://github.com/genki/registrator) ([docker hub](https://hub.docker.com/r/s21g/registrator/)) を使っています。
Processingでシミュレーション～放物運動

# はじめに
Processingを使って放物運動をシミュレーションします。

# 微分から差分へ
物理法則の多くは微分方程式で記述されています。
微分は無限小を扱うためコンピュータでは扱えません。
無限小はあきらめて許容できそうな小さな変化を使って微分を差分に変えます。

微分の定義

```math
\frac{d}{dt}r(t) = \lim_{Δt→0}\frac{r(t)-r(t-Δt)}{Δt}
```

1階差分
limをなくしただけです。Δtが十分小さければこれで十分だとします。

```math
\frac{d}{dt}r(t) \sim \frac{r(t)-r(t-Δt)}{Δt} = v(t)
```

2階差分
$v(t)$に対してさらに1階差分を計算します。

```math
\frac{d^2}{dt^2}r(t) \sim \frac{d}{dt}v(t) \\
\sim \frac{v(t)-v(t-Δt)}{Δt} \\
 = \frac{r(t)-r(t-Δt)-(r(t-Δt)-r(t-2Δt))}{Δt^2} \\
 = \frac{r(t)-2r(t-Δt)+r(t-2Δt)}{Δt^2} 
```

# 離散化
$r(t)$と$t$は連続量ですがコンピュータでは扱えません。
連続量を離散量に置き換えて考えます。

tは0,1,2,3, ... とします。Δtは1になります。
r(t)はr(0),r(1),r(2), ...となります。

# 運動方程式
物体の位置$\vec{r}$は時間とともに変化しますので時間の関数になります。
$\vec{r} = (r_x(t), r_y(t), r_z(t))$の3成分があります。
$\vec F$は力、$\vec a$は加速度、$\vec v$は速度、$\vec r$は位置、$m$は質量です。

ベクトル表記

```math
\vec{F} = m\vec{a} = m\frac{d}{dt}\vec{v} = m\frac{d^2}{dt^2}\vec{r}
```

成分表記

```math
F_x = ma_x = m\frac{d}{dt}v_x = m\frac{d^2}{dt^2}r_x \\
F_y = ma_y = m\frac{d}{dt}v_y = m\frac{d^2}{dt^2}r_y \\
F_z = ma_z = m\frac{d}{dt}v_z = m\frac{d^2}{dt^2}r_z \\
```

# 重力
鉛直下向きに一定の重力がかかるとすると次のようになります。
鉛直下向きをy軸、水平方向をx軸とします。z軸は省略します。m,gは定数とします。

```math
\vec{F} = (F_x, F_y) = (0, mg)
```

運動方程式は

```math
\frac{d^2}{dt^2}r_x(t) = 0 \\
\frac{d^2}{dt^2}r_y(t) = g \\
```

となります。

この式から$r_x,r_y$を求めます。次の方法が考えられます。

- 2回積分する
- 2階差分を計算する

ここでは2階差分を使って近似値を求めます。

# 運動方程式の差分化・離散化

差分化

```math
\frac{1}{Δt^2}(r_x(t)-2r_x(t-Δt)+r_x(t-2Δt)) = 0 \\
\frac{1}{Δt^2}(r_y(t)-2r_y(t-Δt)+r_y(t-2Δt)) = g \\
```

離散化
Δt=1, t=0,1,2,3...とします。
t=0のとき

```math
r_x(0)-2r_x(-1)+r_x(-2) = 0 \\
r_y(0)-2r_y(-1)+r_y(-2) = g \\
```

です。$r_x(-1),r_x(-2),r_y(-1),r_y(-2)$がでてきます。
これは初期条件になります。最初の位置、速度に応じて決める必要があります。
とりあえず0にします。

```math
r_x(0) = 0 \\
r_y(0) = g \\
```

t=1のとき

```math
r_x(1) = 0 \\
r_y(1) = 2r_y(0)-r_y(-1)+g = 3g \\
```

t=2のとき

```math
r_x(2) = 0 \\
r_y(2) = 2r_x(1)-r_x(0)+g  = 6g \\
```

t=3のとき

```math
r_x(3) = 0 \\
r_y(3) = 2r_x(2)-r_x(1)+g  = 10g \\
```

このように次々と時間発展を追っていけます。
gの前の数字の並びは1,3,6,10,15,..となっており、三角数として知られる数列になっています。

# Processingで可視化
現在の位置をrx2,ry2とします。
rx1,ry1,rx0,ry0はそれぞれ1時刻前、2時刻前のxy座標です。
フレーム更新が単位時間の更新にあたります。
フレームレートを小さくすれば時間が遅くなります。
初期位置(rx0, ry0)、初速度(vx0,vy0)、重力加速度(g)は調整値になります。

```java
float g = 1;
float vx0 = 10;
float vy0 = -30;
float rx0 = 0;
float rx1 = vx0 + rx0;
float ry0 = 480;
float ry1 = vy0 + ry0;
float rx2 = 2*rx1 - rx0;
float ry2 = 2*ry1 - ry0 + g;

void setup() {
  size(640,480);
  frameRate(30);
}

void draw() {
  ellipse(rx2, ry2, 10, 10);
  updateTime();
}

void updateTime()
{
  rx0 = rx1;
  ry0 = ry1;
  rx1 = rx2;
  ry1 = ry2;
  rx2 = 2*rx1 - rx0;
  ry2 = 2*ry1 - ry0 + g;
}
```

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/xeQeVUPB0nk/0.jpg)](http://www.youtube.com/watch?v=xeQeVUPB0nk)
Swift 2のguardはif letのようにOptional bindingを複数書いたり、whereを書いたりできる


タイトルの通りなのですが、Swift 2のguardではif letのようにOptional bindingを複数書いたりできます。

```swift
guard let text = self.ageTextField.text, age = Int(text) else {
    return
}

```

また、if letのようにwhereで条件を指定することもできます。

```swift
guard let name = self.nameTextField.text where !name.isEmpty else {
    return
}
```
この書き方ができることを知っていれば、コードをよりスッキリ書くことができそうです。
【備忘録】bake後、確認画面をサクッと作る

いつかbakeを改良してやろうと思うのですが、それまでは手で作る必要があり、備忘録として以下を作成しました

```add.ctp（必須）
// 次の行を追加
echo $this->Form->hidden('mode',array('value' => 'confirm'));
```

```add.ctp（任意）
// $this->Form->end(__('Submit'));
$this->Form->end(__('Next'));
```

```edit.ctp（必須）
// 次の行を追加
echo $this->Form->hidden('mode',array('value' => 'edit_confirm'));
```

```edit.ctp（任意）
// $this->Form->end(__('Submit'));
$this->Form->end(__('Next'));
```

```confirm.ctp（新規作成する）
<div class="単数モデル名 form">
<?php echo $this->Form->create('単数モデル名'); ?>
<fieldset>
  <legend><?php echo "入力内容をご確認ください"; ?></legend>
    <dl>
      <dt><?php echo __("Subject");                            ?>&nbsp;</dt>
      <dd><?php echo $this->Form->value("subject");            ?>&nbsp;</dd>
    </dl>
<?php
echo $this->Form->hidden('subject'             , array('value' => $this->Form->value("subject")           ) )."\n";
?>
</fieldset>
<?php echo $this->Form->end(__('Finish')); ?>
</div>
```

```edit_confirm.ctp
// confirm.ctpをコピーして作成し、次の行を追加する
echo $this->Form->hidden('id'                  , array('value' => $this->Form->value("id")                ) )."\n";
```

```controller.php
	public function add() {
                if ($this->request->is('post')) {
                        if ($this->request->data['単数モデル名']['mode'] == "confirm" ){
                                $this->render("confirm");
                        } else{
                                $this->単数モデル名->create();
                                if ($this->単数モデル名->save($this->request->data)) {
                                        $this->Session->setFlash(__('The 単数モデル名 has been saved.'));
                                        return $this->redirect(array('action' => 'index'));
                                } else {
                                        $this->Session->setFlash(__('The 単数モデル名 could not be saved. Please, try again.'));
                                }
                        }
                }
        }

        public function edit($id = null) {
                if (!$this->単数モデル名->exists($id)) {
                        throw new NotFoundException(__('Invalid 単数モデル名'));
                }
                if ($this->request->is(array('post', 'put'))) {
                        if ($this->request->data['単数モデル名']['mode'] == "edit_confirm" ){
                                $this->render("edit_confirm");
                        } else{
                                if ($this->単数モデル名->save($this->request->data)) {
                                        $this->Session->setFlash(__('The 単数モデル名 has been saved.'));
                                        return $this->redirect(array('action' => 'index'));
                                } else {
                                        $this->Session->setFlash(__('The 単数モデル名 could not be saved. Please, try again.'));
                                }
                        }
                } else {
                        $options = array('conditions' => array('単数モデル名.' . $this->単数モデル名->primaryKey => $id));
                        $this->request->data = $this->単数モデル名->find('first', $options);
                }
        }
```
Qiitaのydnjp（Yahoo Developer Network）さんの対応がすごい


# @ydnjp さんの対応がすごい
以下とかから参照

http://qiita.com/search?q=ydnjp&sort=created

とりあえず聞けば答えてくれるらしい。
コードを乗せると、具体的にここがおかしいとか教えてくれるみたい
ログインや認証など基本的なことができない場合も教えてくれます。

# すごいのはいいんだけど
差し出がましいとは思いますが、丁寧に説明しすぎではないでしょうか。
ドキュメントに書いてあることでも回答してくれるようですし
いくらユーザのためとははいえやりすぎなのでしょうか。

#回答がついている記事と回答がついてない記事
回答があり、なんどもやり取りがある記事と
回答が全くない記事が存在します。

記事に「ヤフーデベロッパーネットワーク様」
と書いてある記事がありますので
回答が来ると期待しているユーザの方が多いのではないかと思います。

#質問です

ヤフーデベロッパーネットワーク様 @ydnjp 


・質問を受け付けれる条件や、回答期限の保証などのガイドラインは存在しますか？
・回答が得られない場合はどうすればよろしいでしょうか？
・公式のフォーラムは存在しないのでしょうか？
・有償サポートプランなど、技術問題を専門に扱ったサポートサービスは存在しないのでしょうか？
c++ builder XE4, 10.2 Tokyo > TProgressBar > 処理中の表示 > MarqueeInterval: 100 / Style: pbstMarquee / Step: 10

```txt:動作確認
C++ Builder XE4
Rad Studio 10.2 Tokyo Update 2 (追記: 2017/12/27)
```

何かの処理中というのを表示する方法をTProgressBarを使って行う。

以下を設定する。

```
MarqueeInterval : 100
Style : pbstMarquee
Step : 10
```

![progressBar.png](https://qiita-image-store.s3.amazonaws.com/0/32870/92d2480e-5cbf-8959-3d19-ff8aa016fd80.png)

継続的な処理をしているイメージでの速度にしている。

進捗の状況を止める方法がよくわからないので、処理停止時にはVisible=false としている。

<hr>
(追記 2015/12/04)

停止するには Style : pbstNormal とすればよい。

```
// Stop
ProgressBar1->Style = pbstNormal;

// Start
ProgressBar1->Style = pbstMarquee;
```

<hr>
(追記 2016/01/15)

進捗具合の表示速度はMarqueeIntervalを変更する。

値が大きいほどゆっくりになる。
Laravel5のお勉強 -第四回 モデルの作成/tinker紹介-

# Laravel5のお勉強
[第一回 環境構築](http://qiita.com/yu_eguchi/items/0426ea0a41489e96dd33)
[第二回 ControllerとViewの追加](http://qiita.com/yu_eguchi/items/d6ac0fa3e0014db536c3)
[第三回 Database連携(Mysql)](http://qiita.com/yu_eguchi/items/e272a8d34e714f8249df)
[第四回 モデルの作成/tinker紹介](http://qiita.com/yu_eguchi/items/419a2a081ff142ecf67f)
[第五回 テストデータの挿入/Fakerの使用](http://qiita.com/yu_eguchi/items/9af6eed45e14505f6ecc)
[第六回 CRUDの作成](http://~)
[第七回 Herokuにdeploy](http://qiita.com/yu_eguchi/items/34fce39a07c79591f4af)

# 第四回 モデルの作成/tinker紹介
## 前提条件
Mac OS yosemite
PHP 5.5以上
Mysql 5.6以上

## 目的
Laravel5のお勉強。
[ここ](http://laravel.jp/)が公式の日本語翻訳サイト

今回は、テーブルを作成したので、そこにデータを流し込むためにModelを生成し、
MysqlにPHPからデータを流し込むところを学びます。
そしてついでに、対話型のtinkerを紹介し、tinkerを介して、Modelを生成 -> データ流し込みという流れでいきたいと思います。

## Modelの生成

Databaseテーブルを作成したのなら、そのテーブルとリンクするModelが必要となります。
LaravelではModelにロジックとEntityを記載する立場となります。

```
php artisan make:model Article
```

テーブルは複数の記事が入るので、「Articles」ですが、Modelは一件の記事が対象となるため、
「Article」Modelを作成します。
上記コマンドを実行すれば、Modelは作られます。

モデルファイルは app ディレクトリの直下に作成されます。
これ、気持ち悪いなーって感じなんですが、指定できるのかな??例えば

```
php artisan make:model Blog/database/model/Article
```

とか??
試してみます。また今度。

とりあえず、ここではApp直下で進めます。

```
$ cat -n Article.php 
     1	<?php
     2	
     3	namespace App;
     4	
     5	use Illuminate\Database\Eloquent\Model;
     6	
     7	class Article extends Model
     8	{
     9	}
```

この通り、空っぽのModelが作成されました。
これだけでArticlesテーブルを操作することが出来ます。

## Modelの利用

tinkerを使って、Laravelで対話的にプログラムを発行し、Modelを生成 -> Mysqlに注入していきます。

tinkerとはLaravelでプログラムを対話的に扱える、ちょっとした動作確認に使える便利なシステムです。
Railsの**「rails c」で起動するirb**と似たようなものです。

```
$ php artisan tinker
Psy Shell v0.5.2 (PHP 5.5.27 — cli) by Justin Hileman
>>> 
```

これで対話が始まります。
試しに

```
>>> $tmp = "aaa";
=> "aaa"
>>> strtoupper($tmp);
=> "AAA"
```

としてみよう。すると、$tmp変数にaaaが挿入され、$aaaにstrtoupper関数で「AAA」が取得されることがわかる。
このように、ちょっとしたAPI動作確認等にも使える便利な対話型プログラム、このようなものを<font color="red">**REPL (Read-Eval-Print Loop)**</font>と呼びます。

ではModelを作成していこう。

```
>>> $article = new App\Article();
=> App\Article {#682}
>>> $article->title = "テスト1";
=> "テスト1"
>>> $article->body = "テストボディ1";
=> "テストボディ1"
>>> $article->published_at = Carbon\Carbon::now();
=> Carbon\Carbon {#684
     +"date": "2015-10-12 01:52:54.000000",
     +"timezone_type": 3,
     +"timezone": "UTC",
   }
>>> $article->toArray();
=> [
     "title" => "テスト1",
     "body" => "テストボディ1",
     "published_at" => Carbon\Carbon {#684
       +"date": "2015-10-12 01:52:54.000000",
       +"timezone_type": 3,
       +"timezone": "UTC",
     },
   ]
>>> $article->save();
=> true
>>> App\Article::all();
```

saveで実際にMysqlにinsertが走ります。
Mysqlにloginして、selectしてみれば、データが入っているはずです。

以上。
Windows環境でHeroku toolbeltがエラーになる場合の対処方法

# 概要
Windows環境でHerokuをセットアップし、Herokuコマンドで何かとエラーに遭遇したときの解決方法を記録しておきます。
## "\x80" on Windows-31J (Encoding::InvalidByteSequenceError)
### 現象
Heroku toolbeltをインストールした後、何らかのHerokuコマンドを入力すると、自動的にHeroku Toolbelt v4のインストールが実行された後、
> Error:       "\x80" on Windows-31J (Encoding::InvalidByteSequenceError)
Command:     heroku version
Version:     heroku/toolbelt/3.42.16 (i386-mingw32) ruby/1.9.3
Error ID:    3710610a192a40a09aa1dea9caead6ff

のようなエラーメッセージで終了してしまう。
### 解決方法
1. Heroku toolbeltをインストールしたフォルダ（デフォルトだと、Program Files¥Heroku）の中に、binフォルダがあるので、その中のheroku.batを見つけます。
2. このファイルはこのままだと編集権限がないので、このファイルを右クリックしてプロパティを開き、セキュリティタブの編集ボタンを押します。
3. Usersに対してフルコントロール権限を許可してOKボタンを2回押して保存します。
4. メモ帳などで、heroku.batを開きます。
5. 最後の方に、 @ruby.exe "%~dpn0" %* という記述があるので、ここを @ruby.exe -Eutf-8 "%~dpn0" %* に変更して保存します。

参考URL：http://stackoverflow.com/questions/33029991/heroku-comannd-always-fails

## No such file or directory - "C:\Users\������ ������\AppData\Local/heroku/heroku-cli.exe"
### 現象
何度かHerokuコマンドを実行していると、 Updating Heroku CLI... done. という表示がされ、コマンドがバージョンアップされます。
このバージョンアップ後にHerokuコマンドを入力すると、
> No such file or directory - "C:\Users\������ ������\AppData\Local/heroku/heroku-cli.exe" version

のようなエラーが出るようになってしまいます。
### 解決方法
C:¥ユーザー¥自分のユーザ名¥の直下に、.herokuというフォルダが作成されているので、このフォルダの中にあるclientというフォルダを削除します。autoupdate.lastという空のファイルは残しておくと、しばらくはコマンドラインのアップデートがされないようです。

参考URL：http://stackoverflow.com/questions/32808930/updating-to-heroku-toolbelt-v4-gets-access-denied-error

## Do not authenticate with username and password using git.
### 現象
Herokuにデプロイをしようとすると、次のようにユーザ認証が入ってしまい、結果的に認証エラーとなってしまいます。
> c:\Heroku\aitwilio>git push heroku master
Username for 'https://git.heroku.com':
Password for 'https://git.heroku.com':
remote: !       WARNING:
remote: !       Do not authenticate with username and password using git.
remote: !       Run `heroku login` to update your credentials, then retry the git command.
remote: !       See documentation for details: https://devcenter.heroku.com/articles/http-git#authentication
fatal: Authentication failed for 'https://git.heroku.com/アプリ名.git/'

### 解決方法
`heroku auth:token`
と入力して、続けて表示された文字列をコピーします。
同じように`git push heroku master`とした時に、以下のように対応します。

```
Username for 'https://git.heroku.com': (空エンター）
Password for 'https://git.heroku.com': コピーした文字列
```

参考URL：http://stackoverflow.com/questions/27810419/git-push-heroku-master-is-still-asking-for-authentication

***
普段はMacユーザのため、Windowsで作業することはないのですが、たまたま勉強会用に資料を作っていてハマったので今後のために記録しておきます。
違っているところなどがあれば、ご指摘ください。
get-wmiobjectの使い方メモ


:::note warn
このコマンドレットは、現在は別の名前になっているそうです！
https://qiita.com/asterisk9101/items/8791dc0d4da77e09f505#comment-cbe8df18abc90db8b37d
:::

以下のコマンドで、取得できるクラスの一覧が表示できる。

```ps1
get-wmiobject -class meta_class | select name
```

欲しいクラスの絞り込み検索は以下のようにする。

```ps1
get-wmiobject -class meta_class | select name | where { $_.name -match "hoge"}
```

サンプルとして、ユーザアカウントの一覧は以下のように取得できる。

```ps1
Get-WmiObject -class win32_useraccount | select Name,FullName,Description,PasswordRequired,PasswordChangeable,PasswordExpires,Disabled,Lockout | ft -autosize
```
TextViewに表示されているURLをWebViewで開く

TextViewのURLを自動的にリンクにしてくれるのは簡単だった。

```xml
<TextView
    android:id="@+id/hoge"
    android:autoLink="web" />
```

こんな感じで`autoLink="web"`をつけたらリンクにしてくれた。

しかし、このままだとインストールされているブラウザで開こうとする。
これをwebviewで開く時にどうすればいいの？
というのがよくわからなかった。

いろいろググっていくと、以下のqiitaが見つかる。

[TextViewに埋め込んだUrlリンクをタップした時の動作を置き換える](http://qiita.com/le_skamba/items/cca74696095cbbb65cc3)

`LinkMovementMethod`を拡張している。
このページにあるような`MutableLinkMovementMethod`を作って、
以下のようにすればリンクをクリックしたらwebviewで見れるようになった。

```java
TextView hoge = (TextView) v.findViewById(R.id.hoge);
MutableLinkMovementMethod mutableLinkMovementMethod = new MutableLinkMovementMethod();
mutableLinkMovementMethod.setOnUrlClickListener(new MutableLinkMovementMethod.OnUrlClickListener() {
    @Override
    public void onUrlClick(TextView widget, Uri uri) {
        Intent intent = new Intent(widget.getContext(), MyWebViewActivity.class);
        intent.putExtra("WEBVIEW_URL", String.valueOf(uri));
        widget.getContext().startActivity(intent);
    }
});
hoge.setMovementMethod(mutableLinkMovementMethod);
```

※`MyWebViewActivity`というWebViewを表示するためのActivityは作っておきます

もっといい感じの方法はないのかなぁと思うけどないからこういうハックをしてるのかー。
と思った今日このごろ。
c++ builder XE4, 10.2 Tokyo > TControl > SetBounds(ALeft, ATop, AWidth, AHeight); > 4つの項目を一度にセット

```txt:動作確認
C++ Builder XE4
Rad Studio 10.2 Tokyo Update 2 (追記: 2017/12/27)
```

TLabel型かどうかのチェックの仕方を質問していて、SetBounds()関数もついでに教えていただいた。
[SO](http://stackoverflow.com/questions/33060775/how-to-know-the-control-is-tlabel/33068111#33068111)


ms-help://embarcadero.rs_xe4/libraries/Vcl.Controls.TControl.SetBounds.html
> virtual void __fastcall SetBounds(int ALeft, int ATop, int AWidth, int AHeight);

一度に４つの項目をセットできるのがいい。
http経由のgitを使うときユーザ名、パスワードの入力を省く

Macだと最初からパスワードの入力を省いてくれるので便利だったが、
ubuntuでは最初からは対応してなかったので調査した。

## 設定方法

```bash:設定
# 3600: 1時間
git config --global credential.helper 'cache --timeout=3600'
git config --global credential.helper cache
```

```bash:~/.gitconfig
[credential]
	helper = cache
```

なお、他の人がログインできる共用マシンには仕込まないほうが良い。
csharp > const / static readonly > static readonly: UserCodeクラス側の再コンパイルは不要

「即効入門 C#プログラミング すぐに現場で使える知識 by 中 博俊さんら」のChapter 2にconstとreadonlyの差についてまとまっている。

大きな違いと思うのは、値を変更した時の反映がどこでされるか。著者は「バージョニング問題」という用語で説明している。

- const : UserCodeクラス側の再コンパイルが必要
- static readonly : UserCodeクラスの側の再コンパイルは不要

<hr>
関連して以下のページを見つけた。

http://yutarotanaka.com/blog/csharp-const-vs-staticreadonly/

> const : コンパイル時定数の扱い
> readonly : 実行時定数の扱い
...
> 基本的に、static readonly を使用する。
constは、属性に指定するパラメータや列挙型の定義など、コンパイル時に値が必要な場合にのみ使用する。
Effective C# でも、const よりも readonly の使用が推奨されている。
HerokuのPHPチュートリアルのコマンドメモ

タイトルの通りで、チュートリアルで叩いたコマンドを忘れないようにメモしたいと思います。
それ以外は省略しているので、詳しくは、[チュートリアル](https://devcenter.heroku.com/articles/getting-started-with-php#introduction)を見ていただければと思います。

※1年以上前に使ったときと全然変わっていたので、そのうちこの内容も陳腐化するんじゃないかと思います・・。

# イントロダクション

まず、Herokuのアカウント作って、PHPとComposerをインストールしておきましょう。


# set up

いつの間にか、Herokuをterminalから操作できるようになってました（あ、自分の環境はMacです）。
そのためのToolをダウンロードしてインストールします。
すると、こんな感じでログインできるようになります。

```bash
heroku login
```

# appの準備

Herokuは、チュートリアル用のappを公開しているので、gitからcloneしてきます。

```bash
git clone https://github.com/heroku/php-getting-started.git
```


# deploy

appはすでにdeployできる状態にあるので、deployします。
まず、Herokuにappを作ります。

```bash
cd php-getting-started
heroku create
```

appの名前は適当に決まりますが、heroku createの後に指定することもできます。
次にdeployします。

```bash
git push heroku master
```

これだけです。スゴイです。
では、terminalからページを開いてみましょう。

```bash
heroku open
```

![heroku.png](https://qiita-image-store.s3.amazonaws.com/0/39090/8263e13a-b1fd-2ae1-3fd4-92e0ad29b67e.png)

おー。


# logを表示

下記のコマンドでlogを表示することができます。

```bash
heroku logs --tail
```

Ctrl+Cで止めるまで、延々と表示が続きます。


# スケールさせる

現在のappのdynos状態（どの料金プランで、何台稼働させてるか？）は、下記で確認することができます。

```bash
heroku ps
```

defaultは無料のやつなので、一安心です。
ただし、30分でアクティブでなくなってしまう上に、1日18時間までしか稼働できません（サイトに接続すると、勝手にアクティブになりますが、立ち上がるまでの時間だけ待たされます）。
まぁ、適当に遊んでみるレベルだと、特に問題ないと思います。

あとはガシガシ開発して、pushを繰り返していけば大丈夫そうです。


# add-onsの追加

add-onsもterminalから行えます。
例えば、papertrailというadd-onsを追加する場合は、こんな感じ。

```bash
heroku addons:create papertrail
```

下記で確認できます。

```bash
heroku addons
```

logも見れます。

```bash
heroku addons:open papertrail
```


# shellの実行

phpはこんな感じで、

```bash
heroku run "php -a"
```

bashはこんな感じで起動できます。

```bash
heroku run bash
```

ただ、レスポンスが遅いです。。


# 環境変数の設定

環境変数は、下記のようなコマンドで設定できます。

```bash
heroku config:set TIMES=20
```

確認もできます。

```bash
heroku config
```


# DBの追加

DBもadd-onsのように追加します。

```bash
heroku addons:create heroku-postgresql:hobby-dev
```

確認はこう。

```bash
heroku pg:psql
```

ちなみになんですけど、追加したadd-onsやappの詳細などは、Herokuにログインして確認することもできます。


# 終わりに

というわけで、チュートリアルに出てきたコマンドを並べてみました。
なんだかスゴイ簡単そうです！
csharp > Null許容型 / Nullable＜T＞構造体 > HasValue / Value


引用: 即効入門 C#プログラミング すぐに現場で使える知識 by 中 博俊さんら
11.1　Null許容型の利用

> HasValue : 有効な値を持っている (nullでない)場合にtrueを返す
> Value : 値を返す.

サンプルコードを作ってみた
http://ideone.com/vk38Qi

```csharp
using System;

public class Test
{
	public static void Main()
	{
		int? x = 1;
		int? y = null;
		
		Console.WriteLine(x.HasValue);
		Console.WriteLine(x.Value);
		Console.WriteLine(y.HasValue);
		Console.WriteLine(y.Value);
	}
}
```

```txt:結果
Runtime error	time: 0.06 memory: 26960 signal:-1
True
1
False
```

https://msdn.microsoft.com/ja-jp/library/1t3y8s4s.aspx
https://msdn.microsoft.com/en-us//library/1t3y8s4s.aspx
node-supervisor


https://github.com/petruisfan/node-supervisor

expressでの開発で、ソースを修正するたびに手動で再起動する不便を解消してくれるツール。
元々はIsaacさんが作ったようけど、今は別の人がメンテしているようです。
nodeの開発者にとってはこういうツールを使うの常識なんだろうけど、知らなかったので φ(..)メモメモ

- インストール

```
npm install supervisor -g
```

- 使い方

``` 
supervisor [options] <program>
supervisor [options] -- <program> [args ...]
```

- 主なオプション

`-w` 監視するフォルダ、ファイルを指定。デフォルトは`.`
`-i` 変更を無視する対象を指定。
`-e` 対象の拡張子指定。デフォルトは`node,js`


npm start と打っていたのを下記のコマンドを打つようにした。

```
supervisor -i node_modules ./bin/www
```

- その他

node-dev、nodemonなど、類似のものは色々あるみたい。
自分の使い方だと、どれ使っても変わらない気がするけど、しばらくnode-supervisorを使ってみようと思います。

https://github.com/fgnass/node-dev
https://github.com/remy/nodemon
技術英語 > 5 times saltier than seawater / yで多い > branchy tree / mountainy fields

@ Living on Earth > January 6, 2012
http://loe.org/shows/shows.html?programID=12-P13-00001

なんとなく、LOEのリスニング再開。ここは2005年くらいからお世話になっている。

> 5 times saltier than seawater.

5倍しょっぱい、というのが「salty」の比較級でそのまま「saltier」となっていた。

<hr>
salty で思い出したのが、「y」をつけた時に、「多い」意味となると随分前に取り組んだ資料に記載されていた。

例として
http://ejje.weblio.jp/content/branchy
> branchy tree (枝の多い木)

http://ejje.weblio.jp/content/mountainy
> The mountainy fields rose quietly outside it towards gorse and heather.

mountainyで「隆起が多い」。

yの代わりに 「ish」を付けたものがどうたらこうたら、というのを思い出したが、今回は未調査。
RspecでENVをどうstubするのがよいのか

# TL;DR

### :one: `and_call_original`使う

```rb
allow(ENV).to receive(:[]).and_call_original
allow(ENV).to receive(:[]).with('HOGE').and_return('1')
```

これがシンプルな対応策

### :two: spec実行前にENVを上書き

参照 -> https://github.com/rspec/rspec-rails/issues/1279#issuecomment-70275896

### :three: そもそもENVをstubしなければいけない状況を改善する

```rb
def hoge?
  ENV['HOGE'] == '1'
end
# または
config.hoge = ENV['HOGE']
```
として
`#hoge`や`config.hoge`をstubする

# ENVをstubするときの問題点


```rb
# hoge.rb
def hoge
  ENV['HUGA'] ||= 1
  ENV['HOGE']
end

# hoge_spec.rb
before do
  allow(ENV).to receive(:[]).with('HOGE').and_return('1')
end
```
という実装(すごく適当)になってたとき

```rb 
Failure/Error: expect(instance.hoge).to eq '1'
  ENV received :[] with unexpected arguments
    expected: ("HOGE")
         got: ("HUGA")
   Please stub a default value first if message might be received with other args as well.
```

のようにspecが落ちる
stubしている`ENV['HOGE']`以外に`ENV.[]`にアクセスしているものがあるとspecが落ちてしまう。これが問題
今回の例では`ENV['HUGA']`を意図的に呼ぶようにしてるのでいくらでも対処のしようはありそうだけど、
gemやフレームワークの中で`ENV.[]`を呼び出していることもるので対処はしづらい

もちろんENVに限った問題では無いのだけど、環境変数という性質上ENVがこの問題に陥りやすい

# 横道 `ENV.fetch` について

### `ENV.fetch`のすすめ

詳しくは -> http://saiya-moebius.hatenablog.com/entry/2014/12/26/135041

```rb
[1] pry(main)> ENV['HOGE']
=> nil
[2] pry(main)> ENV.fetch('HOGE')
KeyError: key not found: "HOGE"
from (pry):2:in `fetch`
[3] pry(main)> ENV.fetch('HOGE', '1')
=> "1"
```
`.[]`よりは`.fecth`のほうが便利なことが多い

### <A NAME=stubは適切? />`.[]`をstubするのは適切？

詳しくは -> https://github.com/rspec/rspec-rails/issues/1279#issuecomment-70275896

```rb
allow(ENV).to receive(:[]).with('HOGE').and_return('1')
```
では`.[]`をstubしてるけど、specが実装に密接に関係しすぎてる

```diff
- ENV['HOGE']
+ ENV.fetch('HOGE')
```
と修正したらspecは落ちてしまう
`.[]`が呼ばれていることをテストしたいわけではないはずなので、
この修正しただけ落ちてしまうspecはあまり良いspecではない

# 対応策


### :one: `and_call_original`使う

```rb
allow(ENV).to receive(:[]).and_call_original
allow(ENV).to receive(:[]).with('HOGE').and_return('1')
```

一行追加するだけで済むしとてもシンプルな対応策
対応としては少しダサいが、ほとんど場合これでうまくいく
(<A HREF=#stubは適切?>`.[]`をstubするのは適切？</A>の問題は残ったままだけど)

### :two: spec実行前にENVを上書き

helperを用意する方法
詳しくは -> https://github.com/rspec/rspec-rails/issues/1279#issuecomment-70275896
(以下コピペ)

```rb
module EnvHelpers
  def with_env_vars(vars)
    original = ENV.to_hash
    vars.each { |k, v| ENV[k] = v }

    begin
      yield
    ensure
      ENV.replace(original)
    end
  end
end

RSpec.configure do |c|
  c.include EnvHelpers
end
```

```rb
it 'does something with the FOO environment variable' do
  with_env_vars 'FOO' => 'bar' do
    # logic that depends upon ENV['FOO'] goes here
  end
end
```

すこし仰々しい気がするが、うまく動く(はず)
gemとして実装されているやつ(動作は未確認) -> https://github.com/ScrappyAcademy/rock_candy/blob/5695c7b231a44ef97a1be7293197130e8b553931/lib/rock_candy/helpers.rb


### :three: そもそもENVをstubしなければいけない状況を改善する

```rb
def hoge?
  ENV['HOGE'] == '1'
end
# または
config.hoge = ENV['HOGE']
```
というような感じにして`#hoge?`や`config.hoge`をstubする
コードも読みやすくなるはずし、この対応ができるとベストだと思う
Swift2.0でQRコードを出力する

iOS7からQRコードを出力出来るようになりました。
**iOS9になった今、WebViewが使えないiOSなんて無いと思いますが**Swift2.0でもこの機能が使えるので、ちょっとおさらいです。

```swift
        let ciFilter = CIFilter(name: "CIQRCodeGenerator")
        ciFilter?.setDefaults()
        let qrString = "http://google.com"
        let data = qrString.dataUsingEncoding(NSUTF8StringEncoding)
        ciFilter?.setValue(data, forKey: "inputMessage")
        ciFilter?.setValue("L", forKey: "inputCorrectionLevel")
        let ciContext = CIContext()
        let cgimg = ciContext.createCGImage((ciFilter?.outputImage)!, fromRect: (ciFilter?.outputImage?.extent)!)
        let image = UIImage(CGImage: cgimg, scale: UIScreen.mainScreen().scale, orientation: UIImageOrientation.Up)
        imageView.image = image
```

いじょ！
golangでnestしたstructの初期化がツライ

以前作った[Slackに勉強会情報を飛ばすツール](https://github.com/daikikohara/enotify-slack)のテストを書いてて、nestしたstructをコード内で初期化するのがあまりにもツラかったのでメモを残します。
結局は避けたんですが、どうしてもやらなきゃいけない場合に参考になればということで。
あと、もっと良い方法がある気もするので、誰かから愛という名のマサカリが飛んでくることもちょっと期待しつつ。

# ツライ

ということでツライです。

## 1nestしてるだけでツライ

まずこんなstructがあったとして、

```go:nestしたstruct
type foo struct {
	bar struct {
		val1 int
		val2 int
	}
}
```

これをコード内で初期化するにはこうします。

```go:初期化
var f = &foo{
	bar: struct {
		val1 int
		val2 int
	}{
		val1: 1,
		val2: 2,
	},
}
```

最後の

```
val1: 1,
val2: 2,
```

は

```
1,
2,
```

と省略して書くこともできます。
以下同様です。

## nestのnestだともっとツライ

次に以下のようなnestのnestなstructがあったとします。

```go:nestのnest
type foo struct {
	bar struct {
		boo struct {
			val1 int
			val2 int
		}
	}
}
```

これを初期化するにはこうします。

```go:初期化
var f = &foo{
	bar: struct {
		boo struct {
			val1 int
			val2 int
		}
	}{
		boo: struct {
			val1 int
			val2 int
		}{
			val1: 1,
			val2: 2,
		},
	},
}
```

ツライ。

## さらにnestが深くなるとこんなにツライ

さらにnestを深くした上で複雑にしてみます。

```go:複雑なstruct
type foo struct {
	bar struct {
		val int
		boo []struct {
			far struct {
				val1 int
				val2 int
			}
		}
	}
}
```

これを初期化するにはこうします。

```go:初期化
var f = &foo{
	bar: struct {
		val int
		boo []struct {
			far struct {
				val1 int
				val2 int
			}
		}
	}{
		val: 0,
		boo: []struct {
			far struct {
				val1 int
				val2 int
			}
		}{
			{
				far: struct {
					val1 int
					val2 int
				}{
					val1: 1,
					val2: 2,
				},
			},
		},
	},
}
```

つらたん(死語)ですね。

## 解決策1

nestしたstructを外だしのstructにすると割とすっきりします。
とりあえず最初のnestが一つのものを書くとこうなります。

```go:structを外だし
type foo struct {
	bar
}

type bar struct {
	val1 int
	val2 int
}
```

初期化するときはこうなります。

```go:初期化
var f = foo{
	bar: bar{
		val1: 1,
		val2: 2,
	},
}
```

だいぶ直感的に書けますね。

### 解決策が使えなくてツライ

でも例えば何らかの制約があって、複数のstructが同じ名前で構造が異なるstructをnestしなきゃいけないときとかは使えません。

```go:解決策1が使えない
type foo struct {
	bar struct {
		val1 int
		val2 int
	}
}
type far struct {
	bar struct {
		val3 string
		val4 string
	}
}
```

foo内のbarとfar内のbarの型をそれぞれ別名のstructで割り当てられれば問題はないですが冗長な感は否めません。

## 解決策2

そもそもコードで初期化しないでファイルから読むなら普通にjsonで書けば良いので楽です。
が、ファイル増やすのもアレかもしれません。

# ということで

結局使わなかったんですが、どうやるのか気になって時間をかけてしまったので、同じ道を辿った誰かの参考になれば幸いです。
まー、そんな変なstruct作んねーよ、とか、そんな変な制約ねーよ、とか、普通にファイルから読めば良いじゃん、みたいな感じですよねｗ
てゆーか、JSON書いて[これ](https://mholt.github.io/json-to-go/)使えばいいんじゃないか説がありますねｗ

でももっと良い解決策があったら、希望という名のマサカリでご指摘頂ければと思います。
rakeタスクを定義するときのおまじない :environment がやっていること

# おまじない

```rb
task test: :environment do
  # task
end
```

railsでDBアクセスしたりするrakeタスクを定義するときに↑の様な感じで`:environment`を指定する必要があるが、
その`:environment`が何をしているのか不思議だったので調べた


# コードを追ってみた(要所だけ)

```rb
# https://github.com/rails/rails/blob/master/railties/lib/rails/application.rb#L432-L441
def run_tasks_blocks(app) #:nodoc:
  railties.each { |r| r.run_tasks_blocks(app) }
  super
  require "rails/tasks"
  task :environment do
    ActiveSupport.on_load(:before_initialize) { config.eager_load = false }

    require_environment!
  end
end
```

railsのコード内に定義されている、
`:environment`という名のrakeタスクが呼ばれる

```rb
# https://github.com/rails/rails/blob/master/railties/lib/rails/application.rb#L317-L320
def require_environment! #:nodoc:
  environment = paths["config/environment"].existent.first
  require environment if environment
end
```

`Rails.root`にある`config/environment`が`require`される

```rb
# config/environment.rb

# Load the Rails application.
require File.expand_path('../application', __FILE__)

# Initialize the Rails application.
Rails.application.initialize!
```

`Rails.application.initialize!`が呼ばれる


# まとめ

三行で書くと

`:enviroment`というrakeタスクを実行して
`config/environment.rb`を`require`して
`Rails.application.initialize!`してた

なので、DBやモデルにアクセスするとき以外にも使える
ES2015のMapとSetから配列を生成する

ES5.1 以前では key-value の集合である連想配列（ハッシュテーブル）はオブジェクトで表現できて、そのキー全てを配列で得たいときには `Object.keys()` を使ってきた。同じことをしたいときに ES2015 の機能を使うとどうやって書き直せるかなと考えた話。

## ECMAScript 5.1 で連想配列を表現する

オブジェクトリテラルでオブジェクトを生成して、 `foo` ・ `bar` ・ `baz` と対になる値を文字列で指定している。キー全てを取得するには、お馴染み `Object.keys()` を使うとオブジェクトのキーを配列で取得できる。

```js
var map = {
  foo: 'value for foo',
  bar: 'value for bar',
  baz: 'value for baz'
};

Object.keys(map);
// => ["foo", "bar", "baz"]
```

`for + in` と `Object.prototype.hasOwnProperty()` でも目的を達成出来そうだが、 `Object.keys()` のほうが簡潔だしスタンダードなやり方かもしれない。

## ES2015 で追加された `Map` で連想配列を表現する

ES2015 からはグローバルオブジェクトには、連想配列形式のデータを表現するための `Map` が追加されているので、それを使うと良い。

```js
let map = new Map([
  ['foo', 'value for foo'],
  ['bar', 'value for bar'],
  ['baz', 'value for baz']
]);
```

`Map` には便利な関数が備わっている他、文字列以外をキーに指定できたり、 `Iterable` だったりする。詳しくは [Map - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を見てもらうと良さそう。

## `Map` インスタンスのキーを配列で取得する

`Map`のインスタンスからキー全てを参照するために、`Map.prototype.keys()`という関数が備わっている。しかし、 `Map.prototype.keys()` が返すのは `Iterable` なオブジェクトなので、 `for of` などで列挙したいときには問題ないが配列は得られない。調べてみたところ、こちらも ES2015 から追加された [`Array.from()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from) という関数を使うのが一番シンプルっぽい。

```js
Array.from(map);
// => ["foo", "bar", "baz"]
```

自作ながら [Array.ofのポリフィル](https://github.com/1000ch/array-of) もある。

## `Array.from()` に `Iterable` なオブジェクトを渡す

`Array.from()` は与えられた引数から配列を生成する関数だが、引数には arrayLike なオブジェクト（ NodeList とか）の他にも `Map.prototype.keys()` が返すような `Iterable` なオブジェクトも受け付けている。ので、他の `Iterable` なオブジェクト（ `Set.prototype.entries()` の返り値など）にも応用できる。

```js
let map = new Map();
map.add('key', 'value');
map.add(1, {});

let set = new Set();
set.add(1);
set.add('value');

Array.from(document.querySelectorAll('div'));
Array.from(map.entries());
Array.from(set.values());
```

## Spread オペレータで展開する

Iteration Protocol は Spread オペレータをサポートしているので、 `Array.from()` よりシンプルに記述できる。が、先程の例の `document.querySelectorAll('div')` の返り値（ `NodeList` ）のような arrayLike なオブジェクトには対応していない。

```js
// Iterable なものは Spread Operator で展開できる
[...map.entries()];
[...set.values()];

// NodeList は展開できない
[...document.querySelectorAll('div')];
```