OmniAICreator/Qiita-1.07M huggingface dataset:
初心者がMacにSunabaをインストールしてプログラミングの勉強をしてみる

##筆者プロフィール

- 30代文系, Macユーザー
    - 学習メモおよびアウトプット練習がてらのQiita初投稿
- プログラミング未経験
    - マークアップ：HTML, CSSであればちょっと書ける
    - プログラミング言語は[Progate](https://prog-8.com/)とか[Codecademy](https://www.codecademy.com/)でちょっと勉強した程度
    - [ドットインストール](https://dotinstall.com/)の課金も検討中
    - 今までいろいろな方法でプログラミングの勉強をしては挫折を繰り返すなど
- キャリアとしてはテクニカルではなくデザイン寄りのディレクター
    - 海外事業を担当していたが英語はそこまで得意ではない
- プログラミングやってみたい
    - モノを作ることや、PCを使った作業は好き
    - 実際に動くアプリやサービスを作りたい
- 今の業務に生かしたい
    - どうやってそれが動いているのか、何故エラーが発生するのか理解したい
    - エンジニアともっと良いコミュニケーションが取れるようになりたい
    - 分からないことを分からないまま捌かなければいけないのはツライ
- それならいっそエンジニアになりたい 
    - そして最終的にはフルスタックエンジニア/ディレクターになりたい
    - フロントエンドもバックエンドも一通り抑えたい
    - デザインもエンジニアリングも両方ディレクションできるようになりたい
    - （何ならネットワークやインフラにも興味がある）
- 長くなりましたが基本的にはテクノロジー好きで、色々な事を知りたい・やりたいと思っています
    - ただし自分が挫折しやすいことも知っているので、ステップアップする際の段差はあえて小さいめでもよいです
    - 無理なく続けられること・途中で挫折しないことを何より重要視しています


##Sunabaとは
https://hirasho.github.io/Sunaba/

プログラマになりたい初心者がプログラマ人生の最初の100時間を過ごすための言語。日本語でプログラミングできるが、100時間経ったら他の言語に行く前提なので低機能とのこと。また「既存の言語、書籍等で上達できない人」のほか、「何もかもを自作せねばならない状況に置いて自分のスキルを再確認したい人」にとっても有用な言語ということだった。
元・株式会社セガ、現・面白法人カヤックの平山さんが独自に作られており、[『プログラムはこうして作られる〜プログラマの頭の中をのぞいてみよう〜』](https://amzn.to/2JkhVko)という書籍での教材にもなっている。自分はこの書籍によってSunabaの存在を知り、Windows版しかないと思い込んでいたがよくよく見たらMac版もあったので歓喜した。
（SunabaのトップからMac版のリンクを辿ったらリンク切れだったので、過去バージョンかもしれないが[gitHubのリリースページ](https://github.com/hirasho/Sunaba/releases/)からMac版をダウンロードした。）
あとPCがないと勉強できないかと思いきや[iOS用のアプリ](https://itunes.apple.com/jp/app/sunaba/id896086001?mt=8)もあったので携帯にもインストールしてみた、Androidは未確認。本を読みコードを書きながら挙動を確認して...となるので学習シーンはPC版での方が捗るとは思う。


##『プログラムはこうして作られる〜プログラマの頭の中をのぞいてみよう〜』という書籍について
自分の学習はこの書籍をベースに進める。
今までいろいろな方法でプログラミングの勉強をしようとしたが、難易度や基本的な知識の問題か、始めた途端に挫折することばかりだった。そのような人間はたくさんいるのだろう、挫折の理由について本書では3つの問題が挙げられていた。

1. 個々の要素がバラバラに教えられ、組み立て方が教えられない
2. いきなりプロ向けの道具を使うために、初期に挫折しやすい
3. できない人がいても仕方ないと思われている

特に1の項目に共感した。関数や変数や引数といったことを学んでも、それが実際のサービスとしてどう動くのかまったくイメージできなかったし、そこを繋いでくれる比較的平易な教材や情報にも（今のところは）出会えていない。
また考え方として、なぜそれを使うのか、どうやったら解に辿り着けるのか、そもそもXXXとは何か、これらをどう組み合わせれば目的が果たせるのか、およびそれらのメリットやデメリットについて...といったことを端折らずに、くどいくらい懇切丁寧に書いてくれているのがとても良心的だと感じた。
各章ごとのステップアップの段差は低めに、平易に書かれているので、本という一方通行な媒体であっても「理解し損ねる」「置いてけぼりにされる」といったことがほとんどない。何より少しずつでも、知りたかったことを知り、実際に動くアプリを作り、確実に段差を昇っているという実感が持てる＝楽しい。

##学習の進捗とまとめ

2018年6月現在、約500ページある書籍の100ページほどを消化して未だアプリ内の画面へ複数の点を描画することについて費やしているが、導入が一番大事な部分でもあるのでペースには納得している。読了後には、簡易版テ◯リスのようなちょっとしたゲームを作れることになっているようだ。
書籍においてはまだ途中かついまいま躓いたり悩んだりした箇所はなく、「具体的課題に対する詳細な解決方法」のような結論めいた話ではないのでQiitaにおける知識の共有というには程遠いかもしれないが、自分のような挫折しやすい人には是非一度試してみてほしい言語および書籍だと思う。

（一通りを完了したらまた追記なり新規記事なり書くかもしれません。）
ひつじコレクション - 8. ミニマップを表示

[ミニゲームを作ってUnityを学ぶ！[ひつじコレクション編]](https://qiita.com/YzRoid/items/8dfd6c168b916ac82a0d)
###**第8回目: ミニマップを表示**

チェイサーとの当たり判定を実装したことでひつじコレクションは開始から終了までひと通りプレイできるようになりました。
しかし実際にプレイしてみると視界の狭さからチェイサーの位置が把握できず、プレイヤーにとってはストレスを感じてしまう状態です。

今回はこの問題を解決するためにゲーム画面にミニマップを表示して、プレイヤーがより楽しく遊べるようにひつじコレクションを改善していきます。

尚、今回はとても短いです。


#ミニマップ用のカメラオブジェクト
ゲーム内にミニマップを表示させるためにはミニマップ用のカメラを用意するのが最も簡単な方法です。
現在プレイヤーを斜め上から見下ろす形で追従しているMainCameraとは別に新しいカメラオブジェクトMinimapCameraを作成してシーンに配置します。

+ 「Create → Camera」を選択してMinimapCameraをゼロポジションに配置
+ 初めからアタッチされている以下のコンポーネントを除去

<pre>
1.GUI Layer
2.Flare Layer
3.Audio Listener
</Pre>

+ 下記を参考にCameraコンポーネントのフィールドを変更

<pre>
Projection: Orthographic
Size: 8
ViewportRect: X=0.02, Y=0.03, W=0.25, H=0.4
Depth: 0
</pre>

![action_sheep_ss_8_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/5c8f1997-ac44-83c7-11f5-aab652c243cc.jpeg)

これによって画面左下にMinimapCameraの映し出す映像が表示されるようになりました。


#ミニマップカメラの追従設定
続いて、作成したMinimapCameraに対して常にプレイヤーを中心とした一定範囲を表示する機能を実装します。

+ MinimapCameraにFollowCameraをアタッチ
+ StageConstructorを修正

```cs:StageConstructor.cs

        //-------------------
        // カメラの追従設定 //
        //---------------------------------------------------------------------------------
        
        [SerializeField]
        private FollowCamera mFollowCameraMain;
        [SerializeField]
追加    private FollowCamera mFollowCameraMinimap;　// MinimapCameraを指定
        
        private void SetCameraTarget()
        {
            mFollowCameraMain.SetTarget(Player.transform, new Vector3(0.0f, 4.0f, -5.0f), Quaternion.Euler(new Vector3(37.0f, 0.0f, 0.0f)));
追加        mFollowCameraMinimap.SetTarget(Player.transform, new Vector3(0.0f, 12.0f, 0.0f), Quaternion.Euler(new Vector3(90.0f, 0.0f, 0.0f)));
        }

```

MinimapCameraにアタッチしたFollowCameraに対して、プレイヤーを真上から見下ろした状態で追従するよう初期化を行っています。

![action_sheep_ss_8_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/e4783e60-eaea-b33f-99c3-d1369c690366.jpeg)


プロジェクトを実行して、ミニマップが実際に機能しているか確認してください。


#ミニマップの完成！だけど……
以上のように、Unityではただ単純にミニマップを表示するだけならば複数カメラを設置することで簡単に実装することができます。

ですか今回作成したミニマップにはパフォーマンスの観点から大きな問題があり、開発環境によってはミニマップ非表示状態と表示状態で明らかにゲームの動作が重くなるのを確認できるかもしれません。

この問題については後程パフォーマンスチューニングの項目内で解決しますので、それまでプロジェクト実行時の動作がどうしても重い場合はミニマップの表示機能を一旦取り外しておいてください。










---
[次のページに進む](https://qiita.com/YzRoid/items/ffffffb5f1511e846cbd)
[イントロダクションに戻る](https://qiita.com/YzRoid/items/8dfd6c168b916ac82a0d)
<BR>
<div><img src="http://unity-chan.com/images/imageLicenseLogo.png" alt="ユニティちゃんライセンス"><p>この作品は<a href="http://unity-chan.com/contents/license_jp/" target="_blank">ユニティちゃんライセンス条項</a>の元に提供されています</p></div>
<Br><Br>
Pro Builderでステージを作る！

#概要
ステージ作りを楽にすることで有名なPro Builderで実際にステージを作っていきましよう！
ステージ作りがメインなので色をつける。画像を貼り付けるなどの基本操作は割愛させていただきます。

#Cubeでステージを作ろう！
Cubeでステージを作る場合flip Object normalsでオブジェクトを反転→Connect Edgesで辺を増やす→Extrude Facesで伸ばす。が基本になってきます。

まずはProbuilderのtool barを出しましょう。
tool　→ Probuilder　→Probuilder　Windowを選択してください。
<img width="830" alt="スクリーンショット 2018-06-08 23.07.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/251218/b57ed1d8-bf57-0d13-4898-8c18a8421278.png">
文字のツールバーでもいいのですがアイコンの方が見やすいし分かりやすい（個人の意見）ので
バーの空いている部分で右クリックUse IconUse Icon Modeを選択してください。
<img width="506" alt="スクリーンショット 2018-06-08 23.10.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/251218/d100502b-bd4b-9ba4-b67c-0324e4b1009c.png">
それでは早速ステージを作っていきましょう

左上のNew shape Toolを選択。
cubeを１０x１０x１０で作成してください。
<img width="788" alt="スクリーンショット 2018-06-08 23.15.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/251218/1edd834e-6cd6-8573-3a89-01f23e96edda.png">

オブジェクトを選択してflip Object normalsでcubeを反転させてください
<img width="406" alt="スクリーンショット 2018-06-08 23.23.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/251218/084be82a-0215-d6a2-73c5-8f0bd797107c.png">

ここからステージ作りを始めていきます。このままだと暗くて見にくいのでLight等をお好みで設置して挙げてください。<img width="422" alt="スクリーンショット 2018-06-08 23.28.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/251218/a4096c87-c8a7-cc3d-f614-ae31628fa8a9.png">

まず次の部屋に続く通路を作りましょう。
上のバーから辺選択モードにしてこの２つの辺を選択しましょう。Shiftを押しながら選択すると複数の辺を選択できます。<img width="435" alt="スクリーンショット 2018-06-08 23.33.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/251218/93857064-de98-0aba-f187-28d7bc92c361.png">

２つの辺を選択したらConect Edgesを選択してください。
<img width="427" alt="スクリーンショット 2018-06-08 23.39.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/251218/c07ace6f-73e1-eb69-ce91-cb541714e652.png">
真ん中に辺ができたでしょうか？このようにして辺を増やしていきます。このような作業を少し繰り返して面を作りましょう。
<img width="480" alt="スクリーンショット 2018-06-08 23.45.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/251218/03a209c5-ad80-4fbf-a61b-e001d4840865.png">

面ができたら面選択モードにしてShiftを押しながら面を移動させてみてください<img width="622" alt="スクリーンショット 2018-06-08 23.49.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/251218/4d69d588-9b40-ad2a-6888-6f5eefd39d69.png">
このようにして道を作っていきます。さらに少し伸ばして挙げてください。こうすることで面を作り簡単に道を曲げていくことができます。
<img width="474" alt="スクリーンショット 2018-06-08 23.51.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/251218/74fc5c97-86fb-c6eb-6bb3-676093920204.png">

<img width="492" alt="スクリーンショット 2018-06-08 23.52.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/251218/d43a3247-2ff0-ab41-5c3a-7fdfacfecade.png">

同じやり方で面を作り部屋を拡張していくことで様々な部屋を作っていきます。
今回はCubeでの作成でしたが次回はPlaneでの作成について書こうと思います。
またいづれ〜。

<img width="729" alt="スクリーンショット 2018-06-09 0.02.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/251218/d78d1c1d-01ca-2efe-0889-7db2e668509c.png">
[UE4.20]録音機能について

#初めに
最近発表された [Unreal Engine 4.20 Preview](http://https://forums.unrealengine.com/unreal-engine/announcements-and-releases/1485599-unreal-engine-4-20-preview)を見ると、このような内容が書かれてあった。
>Audio Updates:
>Sub Audio Recording [New Audio Engine Only] Added the ability to record the engine output or any submix’s output to a .wav file or a soundwave asset.
>（翻訳：サウンド出力・サウンドサブミックスの音声を、wavファイル・soundwaveアセットに録音できるようになった。）

[4.19のリリースノート](https://www.unrealengine.com/ja/blog/unreal-engine-4-19-released)には、このような内容が書かれてあった。
>新しい Microphone Capture コンポーネント (新しい Audio Engine のみ) (Windows のみ)
>（中略）
>現時点では、マイクロフォンの出力をアセットに直接記録する機能はサポートされていませんが、サードパーティのプラグイン デベロッパーがマイクロフォン入力>からのデータを活用することはできます。

つまり、
***4.19 -> 4.20 のアップデートで、今まで出来なかった録音が可能になったのだ。***



#方法
##録音開始
![r1.png](https://qiita-image-store.s3.amazonaws.com/0/239082/682707aa-aba5-026e-b1a4-15a1e2ac9f7c.png)
録音を開始するときは、『Audio』カテゴリー -> 『Start Recording Output』を呼び出す。

###パラメータについて
####Expected Duration
<dl>
  <dt>指定していない場合</dt>
  <dd>別に指定しなくても、録音は可能。</dd>
  <dt>float（秒数）を指定した場合</dt>
  <dd><code>指定した秒数 × AudioMixerSampleRate</code>のメモリー領域を確保。（ソースコードより）</dd>
</dl>
####Submix to Record
<dl>
  <dt>指定していない場合</dt>
  <dd>エンジンの音声出力が録音される。</dd>
  <dt>reference（SoundSubmix）を指定した場合</dt>
  <dd>指定したSoundSubmixの音声出力が録音される。（サブミックスエフェクトプリセットは適用される）</dd>
  <dd>SoundSubmixに送ることで、送った音源だけを録音することができる。</dd>
</dl>
##録音終了
![r3.png](https://qiita-image-store.s3.amazonaws.com/0/239082/64e84a39-394b-b0b9-880a-a14cde3678f8.png)
録音を開始するときは、『Audio』カテゴリー -> 『Finish Recording Output』を呼び出す。
###パラメータについて
####Export Type
<dl>
  <dt>Sownd Wave</dt>
  <dd>SowndWaveとして、<code>コンテンツブラウザ\</code>に追加される。</dd>
  <dt>Wav File</dt>
  <dd>Wavファイルとして、<code>(プロジェクトのフォルダ)\Saved\BouncedWavFiles</code>に追加される。</dd>
</dl>
####Name
<dl>
  <dt>Sownd Wave</dt>
  <dd><code>XXX(指定したName)</code>と命名される。</dd>
  <dt>Wav File</dt>
  <dd><code>XXX(指定したName).wav</code>と命名される。</dd>
</dl>
####Path
相対パスで保存場所を指定可能。
####Submix to Record
『Start Recording Output』と同様である。
####Existing Sound Wave to Overwrite
現時点では何も起きない。（ソースコードより）

#ちなみに
現時点では、出力は16bit2chのみとなっている。
~~24bitも32bitもいつか対応してくれるだろう。~~
coroutineを使って順番に描画する

これから、以下のように順番に描画されていくような実装をする方法を、私のオリジナルゲームを使って紹介します。

![往復jif.gif](https://qiita-image-store.s3.amazonaws.com/0/252557/d2387d3a-a66a-f25e-c4ca-c9c431f143b9.gif)


この実装には、coroutineを使っています。
coroutineについてまとめた記事はこちらをご覧ください。
[coroutineの使い方](https://qiita.com/dabeper/items/77f24c0d7df148c5ae03)

では、実際に手順を紹介していきます。

まず、私のゲームでは駒を配列で管理していました。
具体的には、駒の数と同じ数の要素をもつ配列を用意し、それぞれの要素の数字にしたがって駒を描画していました。
たとえば、ある駒に対応する配列内の要素が0だったらその駒は透明に、1なら白に、2なら黒に描画されます。

実際のコードが以下です。

```c#:PieceView
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PieceView : MonoBehaviour {

	private PieceInfo _pieceInfo;
	private SpriteRenderer _spriteRenderer;

	void Awake(){
		_pieceInfo = GetComponent<PieceInfo> ();
		_spriteRenderer = GetComponent<SpriteRenderer> ();
	}

	//色付けをしている。
	public void UpdateView(){
		switch (_pieceInfo.color) {
		case 0:
			_spriteRenderer.enabled = false;
			break;
		case 1:
			_spriteRenderer.enabled = true;
			_spriteRenderer.color = Color.white;
			break;
		case 2:
			_spriteRenderer.enabled = true;
			_spriteRenderer.color = Color.black;
			break;
		}
	}
}
```

これをもとに、配列の数字を順に変更するスクリプトを書いていきます。

```C#:StageManager
//前半部略

public IEnumerator Sway(){
		for(int flag = 1; flag <= 10000; flag ++){
			if (flag % 2 == 0) {
				for (int k = 1; k <= 11; k++) {
					board [11 - k + 1, 10].UpdateView(0);
					board [11 - k, 10].UpdateView(theTurn);
					yield return new WaitForSeconds (0.04f);
				}
			}
			if (flag % 2 != 0){
				for (int m = 1; m <= 11; m++) {
					board [0 + m - 1, 10].UpdateView(0);
					board [0 + m, 10].TurnPiece (theTurn);
					yield return new WaitForSeconds (0.04f);
					}
			}
		}
}

//後半も略
```

上のポイントについて解説していきます。
まず、メソッドを作る際に　`IEnumerator`を入れる必要があります。
これは、そのスクリプト内で
`yield return new WaitForSeconds();`
を使うためです。
この1行を入れることで、for文を実行する中でもflagが1上昇するごとに0.04秒処理をまつことができています。
これがないと、通常for文はかなりの速さで実行されるため、どの駒に色がついたのかを見ることはできないでしょう。

また、今回作ったのは
「ある駒から左に順に駒の色がついてい」というものではなく、「左から右に色がついて行ったのち、右から左にも順に駒の色がついていく、というものです。

これを実現するために、私はfor文で使うflagという変数を奇数と偶数で場合分けし、偶数の時には右から左へ、奇数の時には左から右へ順に描画されていくようにしました。

以上で私の作ったゲームを使った説明は終わります。

今回紹介したのは駒を順に白くしていくという大変地味な機能ですが、これは駒を光らせるのみならず様々な分野でいきそうです。
皆さんも自分の作りたい機能に使えそうであったら使っててください。

ここまでお読みいただきありがとうございました！
Wireless Packet Capture Memo

#無線LAN パケットのキャプチャについてまとめてみます。

AirPcapやOmniPeekなど購入すれば観測可能ですが、できる限りコストを抑えたい方向けです。
AirPcapでは11n Aggregationや11ac対応が困難だということで、そちらも調査。
iOS、Androidなどでもパケットがとれますが、色々な方法を用意しておくのは基本と言うことで。
Macなら手軽に11n Aggregationパケットがキャプチャできますがリアルタイム観測が難しい。

* 用意するモノ
 * PC
 * USB 無線LAN アダプタ
 * Wireshark
 * USB延長ケーブル
 * モバイル端末
 

1. PC設定準備
PCはLinuxの両方あると捗ります。LinuxはVMでも可
まずはLinuxに無線LANアダプタを認識させるところから。

1. USB無線LAN アダプタ
  試したモノ
  * Netgear A6210(MeditaTek MT7662u)
  * Buffalo DM-U2-433D(Realtek RT8811)
  * TP-LINK T2UH(MediaTek MT7610u)

1. Wireshark
 Versionは1系でも2系でもOK。2系の方が無線LANツールバーが使いやすいかも。
 ツールバー設定
 Column設定

1. 観測物の間にアダプタを配置しましょう

1. iOS、Androidなど色々
Nexus7、SHT22は11nには対応しているものの、Aggregationには未対応

1. 観測開始
Sierra 10.12.4 以前の古い Mac で2ファクタ認証をする

古いMacを再利用しようと思い、パーティションを消去して、OS X Mountain Lion を再インストールしてから macOS High Sierra にバージョンアップが……、App Store で Apple ID の認証ができなくて出来ない。

よく考えてみたら、2ファクタ認証は Sierra 10.12.4 以降で対応なので、2ファクタ認証を設定していると普通に ID とパスワードの入力しかない Mountain Lion では何とも進みようがない。

どうしたものかと悩んだら、Apple のサポートでちゃんとフォローされていて「パスワードの末尾に6桁の確認コードを追加する」というまさかの方法が。

https://support.apple.com/ja-jp/HT204915

- Apple ID で ID とパスワードを入力する
- 2ファクタ認証が設定されているので認証で失敗する
- 少し待って認証しているデバイスのほうで確認コードを受け取る
- 認証に失敗している Apple ID とパスワードの入力で、パスワードの末尾に確認コードを追加入力する

成功した……。
ありがたいけど、こんなの分かるか。
日付の処理

#はじめに
日付データの処理は良く使います。そのフォーマット方法についてです。

#Java
Javaで私の良く使うformatです。

```java:java
private SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String date = format.format(new Date());
try {
	Date now = format.parse(date);
} catch (ParseException e) {
	e.printStackTrace();
}
```

#JavaScript
yyyy-MM-ddのフォーマットで渡したかったので以下の方法で取得しました。

```javascript:javascript
// day 日後の日付を設定
function addDay(date, day) {
	date.setDate(date.getDate()+day);
	return date;
}

// フォーマットした文字を取得
function getFormatDateString(date) { 
	date.setDate(date.getDate());
	var year  = date.getFullYear();
	var month = date.getMonth() + 1;
	month = ("00" + month).slice(-2);
	var day   = date.getDate();
	day = ("00" + day).slice(-2);
	return String(year) + "-" + String(month) + "-" + String(day);
}

function getFormatTimeString(date) {
	return date.toTimeString().substring(0,8);
}
```

#JavaScriptのDate function出力例

使えそうな関数の出力を実行して確認しました。date.toLocaleTimeString(); が上の getFormatTimeString と同じですね。。

```js:console
date = new Date();
date.toDateString();
"Mon Jun 11 2018"
date.toGMTString();
"Mon, 11 Jun 2018 11:20:26 GMT"
date.toISOString();
"2018-06-11T11:20:26.537Z"
date.toJSON();
"2018-06-11T11:20:26.537Z"
date.toLocaleDateString();
"2018/6/11"
date.toLocaleString();
"2018/6/11 20:20:26"
date.toLocaleTimeString();
"20:20:26"
date.toSource();
"(new Date(1528716026537))"
date.toString();
"Mon Jun 11 2018 20:20:26 GMT+0900"
date.toTimeString();
"20:20:26 GMT+0900"
date.toUTCString();
"Mon, 11 Jun 2018 11:20:26 GMT"
```

#参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date
[日付フォーマットなど 日付系処理 - Qiita](https://qiita.com/osakanafish/items/c64fe8a34e7221e811d0)
Headless Chromeでファイルをダウンロード

# 概要
ChromeをHeadlessで動かすと、ファイルをダウンロードしてくれません。
こちらで議論されていますが、セキュリティの観点からのようです。
https://bugs.chromium.org/p/chromium/issues/detail?id=696481

しかしながらLinuxのコンソールで動かしたいという需要があります。
ここに答えが書いてありますが、ChromeDriver のコマンドを発行することでそれが可能になります。
[Downloading with chrome headless and selenium
](https://stackoverflow.com/questions/45631715/downloading-with-chrome-headless-and-selenium/47366981#47366981)

* Python 3.6.5
* Google Chrome バージョン: 67.0.3396.79（Official Build） （64 ビット）
* ChromeDriver 2.40.565383

```python
driver.command_executor._commands["send_command"] = (
    "POST",
    '/session/$sessionId/chromium/send_command'
)
params = {
    'cmd': 'Page.setDownloadBehavior',
    'params': {
        'behavior': 'allow',
        'downloadPath': download_path
    }
}
driver.execute("send_command", params=params)
```
一定の高さで永遠にオブジェクトをバウンドさせる方法

Unityを扱っている人なら、オブジェクトをバウンドさせるというのは、誰もが最初ににチャレンジする実装だと思います。ここではただバウンドさせるだけでなく、同じ高さで永遠にバウンドさせる方法を紹介します。

#　Physics Materialを使ってバウンドさせてみる
まず、バウンドさせるといったらPhysicsMaterialを使うイメージですよね。復習もかねてとりあえずPhysicsMaterialでバウンドさせてみましょう！

1.Hieralchy＞Create＞３DObjectでCubeとSphereを作り、土台とバウンドさせる球を用意する。
2.Project＞Create＞Physics Materialを選択し、名前をBouncyに変える。ここの名前は自分がわかりやすいものにしましょう。そしてBouncyを選択し、InspectorからBouncinessの値を１にする。

![2018-06-08 (8)_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/253332/2d8bb72b-d5bb-1ff0-fdee-84e87cbbd288.jpeg)

ここで補足！BouncyのInspectorの中のそれぞれの値を簡単に説明します。
　Dynamic Friction：動摩擦係数
　Static Friction：静摩擦係数
　Bounciness：反発係数
　Friction Combine：摩擦係数の計算方法
　Bounce Combine：反発係数の計算方法
また、計算方法は、２つのオブジェクトが接した場合に各係数をどのように算出するかを以下の４つから選択できます。
　Average：２つのオブジェクトの係数の平均の値
　Multiply：２つのオブジェクトの係数を乗算した値
　Minimum：２つのオブジェクトの係数のうちで小さいほうの値
　Maximum：２つのオブジェクトの係数のうちで大きいほうの値

ちなみに、私が以前個人的につまずいたことなのですが、、
算出方法がAverageのままBouncinessの値を１にして再生しても少ししかバウンドしませんでした。そこで調べたところ、算出方法に問題がありました。CubeのBouncinessは０にしていたので、AverageのままだとBouncinessが0.5になっていたのです。そこで、Maximumに変更するとBouncinessは１になり、解決しました。

3.BouncyをSphereのInspector＞SphereCollider＞Materialのところに**関連付ける**。
![2018-06-08 (15)_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/253332/cda2527d-8631-edc6-d628-16f5b470d022.jpeg)

4.ゲームがスタートした時にSphereが下に落ちてバウンドするようにする。
HieralchyでSphereを選択し、InspectorのAddComponentからRidgidbodyを選択し、重力をつける。
![2018-06-08 (10)_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/253332/5c38e52c-2821-1e07-2440-d1a66e827577.jpeg)

さあ！これで準備完了！再生してみましょう！


でもあれ、、、よく見ると少しずつ高くバウンドしちゃう、、。

常に同じ高さでバウンドさせるにはどうしたらよいでしょうか

#バウンドさせずに打ち返してみよう
常に同じ高さまで飛び上がってくれればいいので、Add Forceを使用して常に同じ力でY軸方向に打ちかえすようにすれば、Physics Materialを使用しなくても実装できます！

Project＞Create＞C#から新しく以下のスクリプトを作成しましょう。

```cs:BoundScript.cs
public class BoundScript : MonoBehaviour {

	private Rigidbody sphere;//バウンドさせたいオブジェクトを宣言
　  
    //sphereに触れた時のメソッド
	private void OnCollisionEnter(Collision collision){
		//Y軸方向に常に同じ力を与える
		sphere.AddForce(Vector3.up*10f,ForceMode.Impulse);
	}
```
このスクリプトをステージであるCubeに関連付けしましょう。

さあここまで出来たら再生してみてください！どうでしょう。同じ高さで永遠にバウンドするようになりましたか？
cakephp1.2からcakephp2.10に上げた時のモデルでの違いでエラー２

モデルのquery関数でのエラーです。

## bool型がエラーになる

パラメータで渡しているbool型でエラーになりました。

ステートメントのexecute関数で実行しているので、マニュアルを確認し、この辺りが原因ではないかと。

http://php.net/manual/ja/pdostatement.execute.php

> 実行される SQL 文の中のバインドパラメータと同数の要素からなる、 値の配列。すべての値は PDO::PARAM_STR として扱われます。

通常ならbindParamで型を指定するはずですが、あまりbool型を使用していなかったので、今回はソースでの対処ではなくクエリを見直す形にしました。
【備忘録】今更だがNyarukoに驚いた。

# はじめに
友人がCTF好きなので、私もとりあえずCTFというものをやってみた。
そもそもCTFとは、
>コンピュータセキュリティの分野におけるキャプチャー・ザ・フラッグ（CTF）は、コンピュータセキュリティ技術の競技である。 - wikipedia引用 -

今回私が挑戦した問題はこちらの初心者向けの問題です。
http://ksnctf.sweetduet.info/problem/3

# いざトライ
以下のようなWebページが表示され、FLAGを入力して解答するようだ。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184521/489654c0-7af1-eb0f-c14a-06b8eb626cd3.png)

## ん⁈なんだこれは。
ページのソースを見るとスクリプトタグの中に見慣れないコードが…
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184521/eea84443-3818-b1a3-a3be-d172a1b18367.png)
みなさまお分かりいただけだろうか…。（初見でしたので、びっくりしました。）
このコードはJavaScriptが（這いよる混沌化）難読化されたものらしいです。うーにゃースクリプト、Nyarukoなんて呼ぶらしいです。
とりあえず、調べてみると結構情報が出てきたので有名だったのかもしれません…orz
興味がある方はぜひ、以下のリンクをご参照ください。
http://d.hatena.ne.jp/kusano_k/20120421/1335006525

## FLAGゲット
JavaScriptということで、コピペしてファイルに保存してNodejsから実行しました。
すると、jQueryが読みこめないエラーと共にうーにゃースクリプトがよめるコードとして出力されます。
うーにゃースクリプトさえ攻略できれば、かなり簡単にFLAGがGETできました。気になる方はぜひ挑戦してください。


#　参考サイトリンク
- https://blog.leko.jp/post/ksnctf-crawling-chaos/
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
- https://blog.leko.jp/post/ksnctf-crawling-chaos/
Python初心者向けサイトの備忘録（Pythonはじめました）

https://qiita.com/Morio/items/0d6c30b63547af6e9cc2
すごく参考になりました

Python入門（チュートリアル）
https://www.pythonweb.jp/tutorial/
簡易文法をひととおり

https://note.nkmk.me/python/
簡易リファレンスとして便利そうです。

Python入門
http://www.tohoho-web.com/python/
こちらは公式ドキュメントでしょうか。

Dive into Python
http://diveintopython3-ja.rdy.jp/
海外文書の翻訳らしい気配がただよう文体。
記述が豊かな点が気に入ったのでしばらくはこれで勉強しようと思う。

番外編
コードガールこれくしょん
https://paiza.jp/cgc/game/4

追記2018/08/11
PyQドキュメント
http://docs.pyq.jp/index.html
用語集、エラー解説、プログラミング学習Tipsなど、幅広くPython学習の助けになる情報が載っていました。
「Kali-linux」を導入してユーザー設定するまで/文字列検索コマンド

#前説
ハッカーに憧れて突然Linuxとネットワーク、セキュリティの勉強をしたくなったので、記事を書きました。

#Kali-linuxとは
Linuxのディストリビューション。OllydbgやWiresharkといったネットワークやセキュリティ関連のアプリケーションがデフォルトで導入されている。

<img width="1043" alt="スクリーンショット 2018-06-08 22.29.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/253129/11f1ea42-f041-f472-a0ab-7e788079b776.png">

もうなんかめちゃくちゃかっこいい。デフォルトでこの美しさ。

#導入
- Virtualbox

[この記事](https://medium.com/ethical-hacking-%E3%83%9B%E3%83%AF%E3%82%A4%E3%83%88%E3%83%8F%E3%83%83%E3%82%AB%E3%83%BC/kali-linux%E3%82%92pc-mac%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B-6318e7fe2d47)を参照にした。ダウンロードは40分ほどかかりました。

以下、行った設定
- GuestOS type - Debian 64bit
- RAM 2048MB
- CPU 2 or 4
- ネットワークのMACアドレスを再初期化


[USBブート](http://www.htmllifehack.xyz/entry/2017/01/23/233354)版も試したい！

#キーボードの設定
http://gate.hatenablog.jp/entry/2018/02/06/kali-keyboard

上の記事にて乗っていますが、「:」「;」[~」などが通常の位置には無いです。ラズパイと同じように設定から変えましょう。

#ターミナルの不具合
http://www.bird-soft.net/mt/2008/06/linux_1.html

「tab」のコマンド補完や上矢印でコマンド履歴が適用できないので、ここは変更を変えます。

```:Terminal
set -o emacs
set -o vi
```

#ユーザー追加

```:Terminal
# passwd
```

上のコマンドにてパスワードを変更。rootのままだとさすがにまずいので、ユーザーを作成します。

```:Terminal
# useradd -g users -u 1001 [username]
# grep [username] /etc/passwd
# passwd [username]
```

```:Terminal
# su [username] -
sh: can't access tty; job control turned off
```

怒られた。ttyがダメみたい。
/bin/bashを指定してやると、一応userには入れた。
/bin/shを指定しているとダメでした。

```:Terminal
# su -s /bin/bash [username]
$ whoami
[username]
```

もう少し根本的な改善策を提示して、SSHでユーザーログインしていきたいと思います。
https://blog.goo.ne.jp/isojipapercut/e/99a5e93d3fb150f5458f4119c4d11908
この記事がおすすめ

#sudoできない問題

http://akuwano.hatenablog.jp/entry/20120302/1330656001

#おまけ

```:Terminal
$ find ./ -type f -print | xargs grep 'hoge'
```

文字列検索コマンドがかなり便利だったので、以下のサイトを参照に。

find : 捜索
./ : 指定ディレクトリ範囲
-type f : ファイル指定
-print : 表示

xargs : 前のコマンドよりで取得したファイル・フォルダを引数として渡す
grep : 文字列検索


##参考文献
http://kawatama.net/web/1141
PowerShellで Rubyでいう__FILE__ == $0、Pythonでいう__name__ == '__main__': をするには

スクリプトファイルが直接実行されたときに動かしたいコードがあるときの書き方。
デバッグでよく使う人も多いはず。

```ruby
# Rubyの場合
if __FILE__ == $0
    # pass
end
```

```python
# Pythonの場合
if __name__ == '__main__':
    pass
```

```powershell
# PowerShellの場合
If ((Resolve-Path -Path $MyInvocation.InvocationName).ProviderPath -eq $MyInvocation.MyCommand.Path) {
  # pass
}
```

ながい。

なお、PowerShellのスクリプトはいろいろな呼び出し方があるので、
それぞれに対応する方法も書いておく。

```powershell
# PowerShellの場合
If ($MyInvocation.InvocationName -eq '&') {
  # & CmdletName で実行されたとき
  "Called using operator: '$($MyInvocation.InvocationName)'"
} ElseIf ($MyInvocation.InvocationName -eq '.') {
 # 別のスクリプトから「. <Full Path To Script>」 として実行されたとき
  "Dot sourced: '$($MyInvocation.InvocationName)'"
} ElseIf ((Resolve-Path -Path $MyInvocation.InvocationName).ProviderPath -eq $MyInvocation.MyCommand.Path) {
  # 直接実行された場合
  "Called using path: '$($MyInvocation.InvocationName)'"
}
```
【A Tour of Go】 Methods and interfaces/Exercise: Readers (22/26)

A Tour of Go の Exercise を実施したときのメモ。

* 最初 `for i := 0; i < cap(b); i++ {` と、実装したら
    <font color="Red">panic: runtime error: index out of range</font>
    になったので、`for i := 0; i < len(b); i++ {`に修正した。
* len()、cap()の値は、それぞれ以下のようになった。 Array を分割してRead()を呼び出しているようだ。
    * `len(b)` は 1024
    * `cap(b)` は 2048

```exercise-readers.go
package main

import "golang.org/x/tour/reader"

type MyReader struct{}

// TODO: Add a Read([]byte) (int, error) method to MyReader.
func (r MyReader) Read(b []byte) (int, error) {
	for i := 0; i < len(b); i++ {
		b[i] = 'A'
	}
	return len(b), nil
}

func main() {
	reader.Validate(MyReader{})
}
```
ワードがなければHTMLで書けばいいじゃない

# 概要

ワードで帳票作りたい、でもワードって高いよね。
15000円くらいする。そんなときはHTMLで書いてみるのも1つの手ではないかなと思い、
帳票（今回、見積書）をHTML＆CSSで作成する方法を記載する。

# 完成形

こんな感じの見積書（帳票）作ってみました。

<p data-height="1200" data-theme-id="0" data-slug-hash="gKLjGZ" data-default-tab="html,result" data-user="haikyoiko" data-embed-version="2" data-pen-title="見積書" class="codepen">See the Pen <a href="https://codepen.io/haikyoiko/pen/gKLjGZ/">見積書</a> by haikyoiko (<a href="https://codepen.io/haikyoiko">@haikyoiko</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 以下のテンプレートを使用

paper-css
https://github.com/cognitom/paper-css

使うのは以下のCSS。日本人が作成した帳票用のCSS。作成者がQiitaにも登録されている。

▼著者の記事：そろそろ真面目に、HTMLで帳票を描く話をしようか
https://qiita.com/cognitom/items/d39d5f19054c8c8fd592

# HTMLで書いてみた

bodyのクラスに用紙のサイズを指定（A3、A4、A5など）
**sectionタグ**ごとにページができる。

```html:見積書.html
<html lang="jp">
<head>
  <meta charset="utf-8">
  <title>見積書</title>
  <!-- Normalize or reset CSS with your favorite library -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">

  <!-- Load paper.css for happy printing -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">

  <link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">

  <!-- Set page size here: A5, A4 or A3 -->
  <!-- Set also "landscape" if you need -->
  <style>@page { size: A4 }</style>

  <!-- Custom styles for this document -->
  <link href='https://fonts.googleapis.com/css?family=Tangerine:700' rel='stylesheet' type='text/css'>
  <style>
    body   { font-family: Noto Sans Japanese }
    h1     { font-family: Noto Sans Japanese, cursive; font-size: 40pt; line-height: 18mm}
    h2, h3 { font-family: Noto Sans Japanese, cursive; font-size: 24pt; line-height: 7mm }
    h4     { font-size: 32pt; line-height: 14mm }
    h2 + p { font-size: 18pt; line-height: 7mm }
    h3 + p { font-size: 14pt; line-height: 7mm }
    li     { font-size: 11pt; line-height: 5mm }
    h1      { margin: 0 }
    h1 + ul { margin: 2mm 0 5mm }
    h2, h3  { margin: 0 3mm 3mm 0; float: left }
    h2 + p,
    h3 + p  { margin: 0 0 3mm 50mm }
    h4      { margin: 2mm 0 0 50mm; border-bottom: 2px solid black }
    h4 + ul { margin: 5mm 0 0 50mm }
    article { border: 4px double black; padding: 5mm 10mm; border-radius: 3mm }
  </style>
</head>

<body class="A4">

  <!-- Each sheet element should have the class "sheet" -->
  <!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
  <section class="sheet padding-20mm">
    <h1>見積書</h1>
    <ul>
      <li>住所：東京都千代田区千代田1－1－1</li>
      <li>TEL: 03-0000-0000</li>
      <li>http://www.xxxx.net</li>
    </ul>
    <article>
      <h2>差出人:</h2>
      <p>株式会社　ばつばつばつ</p>
      <h3>宛名:</h3>
      <p>株式会社　まるまるまる</p>
      <h4>&yen; 9,999-</h4>
    </article>
  </section>
</body>
</html>
```

#困ったらのテンプレート

以下のページにサンプルがある

https://github.com/cognitom/paper-css/tree/master/examples
Docker で Jupyter Lab を使う

*docker-stacks* の `start-notebook.sh` では環境変数 `JUPYTER_ENABLE_LAB` がサポートされていますので、コンテナ起動時に環境変数を渡してあげることで `jupyter notebook` ではなく `jupyter lab` コマンドが実行されます。

```bash
$ docker run -d -p 8888:8888 -e JUPYTER_ENABLE_LAB=true jupyter/base-notebook
```

認証用のトークンはコンテナで `jupyter notebook list` コマンドを実行すると確認できます。
*hub* コマンドではなく *notebook* コマンドで確認するのがややこしいですが、コンテナを介してアクセスする分には大きな問題でもないでしょう。

参考：

- [docker-stacks/start-notebook.sh at master · jupyter/docker-stacks](https://github.com/jupyter/docker-stacks/blob/master/base-notebook/start-notebook.sh)
- [Selecting an Image — docker-stacks latest documentation](http://jupyter-docker-stacks.readthedocs.io/en/latest/using/selecting.html)
- [JupyterのDockerイメージまとめ - Qiita](https://qiita.com/kshigeru/items/ea174d6bcacc474f2a51)
FlutterでColumnのコンテンツを画面中央に配置する

`Column`は縦にウィジェットを配置することのできるウィジェットです。
画面中央にウィジェットを配置できる `Center` と組み合わせて2つのテキストを次のようなコードで画面中央に配置しようとしたところ、画面上部に表示されてしまいました。
ちなみに`Column`でラップしないときは中央に表示されます。

```dart
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Text("Hoge"),
            Text("Fuga"),
          ],
        ),
      ),
    );
  }
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/18273/b6c2c735-d8b9-c65d-ebec-51761c63abe5.png" width="300px">

調べてみたところ[StackOverflow](https://stackoverflow.com/questions/41845693/how-can-i-tightly-wrap-a-column-of-widgets-inside-a-card)によると、`Column`はデフォルトで画面の最大の高さまで広がってしまうようです。
意図したように表示するためには次の例のように`mainAxisSize`を`MainAxisSize.min`にして軸方向のサイズを最小に指定すればよいです。

```dart
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("hoge",style: TextStyle(fontSize: 40.0),),
            Text("fuga",style: TextStyle(fontSize: 40.0),),
          ],
        ),
      ),
    );
  }
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/18273/cef1eecf-2244-d53a-23de-3d9b884a39a0.png" width="300px">

無事Columnのコンテンツが中央に表示されました。
DockerのVolumeが削除できない時の対応

## DockerのVolumeが削除できない時の対応

#### 出たエラー

```
Error response from daemon: unable to remove volume: remove XXX: volume is in use - [XXX]
```

#### 対処方

```
$ docker system prune
```

#### 再度削除

```
$ docker volume rm XXX
```
アプリケーション共通基盤のモデル考案

※記載内容はメモとして作成しているため、修正が必要な部分があるかもしれません。
また、考案中のモデルのため、ご意見があればコメント求めます。
２０１８年６月０８日初回作成
使用や改造は善意ある個人主義の人のみ自由とします。

####**アプリケーション共通基盤の考案**

**【要約】**
共通トランザクションモジュールの一元化と一つの項目のデータベース化により、以下の特徴を持つシステムを提供する。

１.資源コスト削減
２.運用コスト削減
３.構築コスト削減
４.設計の簡易化による設計コスト削減
５.運用の簡易化によるアプリケーション管理の容易さの実現
６.隠ぺい化によるセキュリティ性の向上

**【課題】**
最低限の技術者で気軽なシステム開発・運用を提供する。

**【解決手段】**
共通トランザクションモジュールの一元化と一つの項目のデータベース化による全リレーショナルDBを作成し、最低限の開発とユーザビリティの高い設計を実現。

![image053.png](https://qiita-image-store.s3.amazonaws.com/0/83621/1001de9d-0ac8-1c82-3e15-20a9904c252e.png)

**【説明１】**
従来におけるテーブルは列の連続であるが、一列のみをテーブルとしすべてをリレーショナルDBで作成する。
※DB設計の単純化を目的とするがここはいろいろ考えられる。とりあえず極端な案とする。

**【説明２】**
トランザクション用のモジュールを共通化する。

**【説明３】**
言語が異なるAP・DBサーバを使用する場合は共通変換モジュールを利用する。

**【説明４】**
従来型サーバと混合環境となる場合、従来の環境はそのままで追加項目のみが新DB
の作成対象となり、新DBのHTMLの処理は共通モジュールを使用するものとする。

**【説明５】**
新しいページの設計と古いページの変更をする場合は画面のデザインと必要なデータとその
データの処理方法（計算方法など）を記述した設計書のみで開発可能とする。

**【説明６】**
以下のセキュリティモデルを対応とし、アクセスレベルの階層化によるデータの堅牢性を
一元化する。

■想定されるデータ操作
①お客さまのインターネット通信
②物理的に離れた支店からの接続
　１．社内セグメントからの接続
　２．インターネットによる接続　→　①と同様とする
③システム運用者セグメントの接続

■データのアクセスの全パターン
①、②、③が単独で接続する場合
①と②の接続
①と③の接続　→運用上存在してはおかしいため無視
②と③の接続
①と②と③の接続

上記パターンをアクセスレベルに置き換える

| 環境                           |アクセスレベルの階層モデル化        |  
|:--------------------------------|:-------------------|
| インターネットからの接続         | 指定トランザクションからの接続のみ |
| 社内セグメントからの接続         |指定トランザクションからの接続のみ | 
| システムセグメントからの接続     |一般のシステム用の設定と変わらず | 


**【まとめ】**
言語・DBによる違いを吸収する共通モジュールを開発することによって劇的に
いろんなサーバをまとめて管理することを可能とする。
差分を吸収するコンポーネントはいろいろあります。

※考案中のため未実験です。
【コードで分かるUMLシリーズ】属性とプロパティ

#.NETのプロパティ
.NETで開発している人は、**プロパティ**って知っていますよね。
これです↓。

```csharp:Sample1.cs
class Sample {
    // フィールド
    private string property1;
    // プロパティ
    public string Property1
    {
        set{
           this.property1 = value;
        }
        get{
           return this.property1;
        }
    }
}
```

これは、

```csharp:Sample4.cs
class Sample {
    // プロパティ
    public string Attribute1 { set; get; }
}
```

なんて書くこともできます。

マイクロソフトの
『プログラミング .NET Framework 第4版』
第10章　プロパティ　P254に、

>型のフィールドを外部に公開すると、オブジェクトのステートを破壊してしまうような方法でフィールドを不正に使用するコードを記述してしまう危険性が高くなる

>型のデータフィールドへのアクセスをカプセル化する

>プロパティ(property)と呼ばれる仕組みを提供しています。

と書いてあります。

つまり、プロパティは、データフィールドへのアクセスをカプセル化するための仕組みです。

上のSample3.csコードにコメントしましたが、privateの部分は**フィールド**です。
publicの部分が**プロパティ**です。

Sample4.cs の例なんて、そもそも、主役であるはずの**フィールド**を実装せずに、
サポート役のプロパティだけを実装しています。
なんか、違和感ありませんか？

#UMLのプロパティ
UMLで**プロパティ**というと、クラスの**属性を表している型の名前**です。
属性＝attribute
属性の型は、propertyです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/197297/fbf09f77-94a5-820a-dadd-fd7417976256.png)
この図の関係です。
「クラスは、プロパティ型の属性を持っている」です。

#.NETのプロパティとUMLのプロパティの違い
つまり、.NETのプロパティは、.NET上用意された**データフィールドをカプセル化する仕組み**であり、
UMLのプロパティは、**属性の型**ということで、全く違うものだと分かります。

#UMLの属性をコードで表現すると
では、改めて、UMLの属性をコードで表現してみましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/197297/afb8d36c-2f5e-1643-b857-8c24b232aefb.png)

C#のカプセル化する仕組みを使わない場合

```csharp:Sample2.cs
class Sample {
    // フィールド
    public string attribute1;
}
```
C#のカプセル化する仕組みを使う場合

```csharp:Sample3.cs
class Sample {
    // フィールド
    private string attribute1;
    // プロパティ
    public string Attribute1
    {
        set{
           this.attribute1 = value;
        }
        get{
           return this.attribute1;
        }
    }
}
```
上のサンプルコード(Sample1.cs)では、
フィールドに、「プロパティの名前の先頭を小文字にした名前」を付けていました。
また、上のサンプルコード(Sample4.cs)では、
フィールド自体が登場しません。

本来は、プロパティは属性をカプセル化する仕組みなだけですから、
フィールドが主役である方が自然です。

プロパティは、メソッドの一種であって、フィールドの一種ではありませんから、
属性がメソッド主体で実装されるのには、違和感が伴います。

些細なことかも知れませんが、UMLモデリングと実装コードの関係を考えるときは、
こういった元々の考え方を大切にしたいです。

#まとめ
**C#のプロパティ**って、
UMLの属性のことだと思っていたり、
C#で属性の実装方法だと思っていたる人がよくいますが、
どちらでもありません。

UMLの属性は、C#コードでは、
・フィールドか、
・フィールド＋カプセル化する仕組み
で表現できます。
競プロ 2変数でループを回す愚直解ではTLEになる時

#はじめに
AtCoderBeginnerContest?のD問題辺りではよく、例えば0~Nをbで割った時余りがK以上である数の総数を求めるなど、
**2変数を用いてループでしらみつぶしに数えていく**(俗にいう愚直解)**解法では時間がかかりすぎて正解にならない**ことが往々にしてある(ていうかそういう時にどうするかを考えるのが競技プログラミングなんやけど)。
昨日解いてた問題がちょうどそんな感じだったんで考えをまとめます！
#問題
AtCoderBeginnerContest090のD問題(https://beta.atcoder.jp/contests/abc090/tasks/arc091_b)
>N以下の正の整数の2つ組(a,b)の内,a%b>=Kとなるものの総数を求めよ。
>【制約】 1 ≤ N ≤ 10^5 , 0 ≤ K ≤ N−1

ざっくり書くとこんな問題

#愚直解
時間無視で解こうとすると

```C++:gutyoku.cpp
int main(){
	long long N,K,a,b,count=0;
	cin >> N >> K;
	for(a=0;a<=N;a++){
		for(b=0;b<=N;b++){
			if(a%b>=K)count++
		}
	}
	cout << count << endl;
	return 0;
}
```

みたいな感じになるのかな(適当に書いたしコンパイルもしてないけど)。
Nが5乗だからこれだと２回ループ回したらタイムアウトすると思う。大体２秒制限だと8乗とか9乗ぐらいが限界だと思います。

で、ずーっと計算を簡単にしたり、まとめて計算できるところはまとめてしたり、ループの範囲とか色々工夫してみたけどどーーーもダメ。
みたいな感じやったけど、気付くと意外と単純だった！

#解説
ではどうするか、こういう２変数の問題では片方を固定して一方を回すのがいい(のかな？)。

今回の問題、0~Nの数一つ一つをbで割った余りは、0~b-1の数を繰り返す。分からなかったら紙に書いて考えてみて。

その繰り返し単位を一つのグループとして、そのグループ一つの内、余りがK以上のものを数え上げればいい。

#コード

```C++:RemainderReminder.cpp
#import <iostream>
using namespace std;
int main(){
	long long N,K,a,b,group,sum=0;
	cin>>N>>K;
	//Kが0の時だけ分ける
	if(K==0)sum=N*N;
	//a,b両方動かすとあれなのでbだけ動かす
	//あるbについて0~Nの数をそれぞれbで割った値は0~b-1を繰り返す
	//そのグループ一つに関して条件を満たすのが何個あるか考える
	else{
		for(b=K;b<=N;b++){
		//グループが何個できるか計算。
		group=(N-N%b)/b;
		//そのグループ一つで条件を満たすのは何個か数え、グループ倍
		sum+=(b-K)*group;
		//グループに入らんかった分計算して足す
		if(N%b>=K)sum+=N%b-K+1;
		}
	}
	cout<<sum<<endl;
	return 0;
}
```

見辛かったらごめんなさい〜
最初のうちは、途中計算の一瞬でもint型越えるかもしれんなって思ったらlong long使った方がいいと思います。今回はどうなんだろ、intでいけたかも。

#感想
今回の考えって汎用性あるんだろうか、面白かったからいいけど。
記事書き慣れてないしプログラミングも初心者なんで変なとこあったら教えてください！
よくわかんなかった人はまた聞いてください。
VS Code1.24の新機能 - 同一キーバインドのチェック

# Visual Studio Code 1.24の新機能
## 同一キーバインドのチェック
https://code.visualstudio.com/updates/v1_24#_notable-changes

キーボードショートカット設定の画面で、定義しようとしたショートカットキーがすでに定義済みの場合にその旨を教えてくれて、さらにそのショートカットキーが現在定義されているコマンドを一覧表示してくれるようになった。

![keybind.gif](https://qiita-image-store.s3.amazonaws.com/0/181011/7fd81a09-a021-faec-81ba-147731974998.gif)

親切！

で、よく見ると、入力フィールドにショートカットキーの文字列が表示されている。こういう検索もできるんだねー（これは以前からできてたみたい）。
PowerShellメモ　InputBox

# 概要
GUIのInputBox(インプットボックス)を表示するサンプル。

# 実行例
![PsInputBox1.png](https://qiita-image-store.s3.amazonaws.com/0/142879/499e3bf9-5687-fe21-a7e5-606ecbc26ce2.png)

![PsInputBox2.png](https://qiita-image-store.s3.amazonaws.com/0/142879/ec381a7f-87c5-29e5-5173-851aef74f694.png)


# コード

```PowerShell
Add-Type -AssemblyName PresentationFramework
[xml]$xaml = @'
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Height="150" Width="600"
  ResizeMode="CanResizeWithGrip" Title="InputBox">
<Window.Resources>
  <Style TargetType="Button">
    <Setter Property="Width" Value="150" />
    <Setter Property="Margin" Value="10,5" />
  </Style>
</Window.Resources>
<StackPanel FocusManager.FocusedElement="{Binding ElementName=inputText}">
  <TextBlock Text="入力してください。" Margin="10,10,10,5" />
  <TextBox Name="inputText" Text="" Margin="10,0,10,10" />
  <StackPanel Orientation="Horizontal">
    <Button Name="okButton" Content="OK" IsDefault="True" />
    <Button Name="cancelButton" Content="Cancel" IsCancel="True" />
  </StackPanel>
</StackPanel>
</Window>
'@
$reader = (New-Object System.Xml.XmlNodeReader $xaml)
$window = [Windows.Markup.XamlReader]::Load($reader)

$txt1 = $window.FindName("inputText")
$okBtn = $window.FindName("okButton")
$cancelBtn = $window.FindName("cancelButton")

# 入力内容保存用
[string]$Script:InText = ""

# OKボタン押下時の処理
$okBtn_clicked = $okBtn.add_Click
$okBtn_clicked.Invoke({
  Write-Host "OK押された" -ForegroundColor Green
  $Script:InText = $txt1.Text
  $window.Close()
})

# Cancelボタン押下時の処理
$cancelBtn_clicked = $cancelBtn.add_Click
$cancelBtn_clicked.Invoke({
  Write-Host "Cancel押された" -ForegroundColor Green
  $window.Close()
})

# InputBox表示
$window.ShowDialog() > $null

# 入力結果表示
if ($Script:InText) {
    Write-Output ("入力された内容は、" + $Script:InText + "です。")
} else {
    Write-Output "何も入力されなかったかキャンセルされました。"
}
```

# 動作確認した環境

* PowerShell V5.1 (Windows 10)
【解決方法】`rails generate react:install`実行時にCould not find generator  'react:install'エラーが表示される

# 問題点
`rails generate react:install`実行時に**Could not find generator 'react:install'**エラーが発生する


```shell-session
$ rails generate react:install
            or
$ rails g react:install

Could not find generator 'react:install'. Maybe you meant 'test_unit:job' or 'test_unit:model' or 'generator'
Run `rails generate --help` for more options.
```

# 解決方法

**spring**を停止させる

```shell-session
$ spring stop

Spring stopped.
```

再度、`rails generate react:install`を実行する。

```shell-session
$ rails generate react:install
            or
$ rails g react:install

Running via Spring preloader in process 39975
      create  app/assets/javascripts/components
      create  app/assets/javascripts/components/.gitkeep
      insert  app/assets/javascripts/application.js
      create  app/assets/javascripts/components.js
      create  app/assets/javascripts/server_rendering.js
      create  config/initializers/react_server_rendering.rb

```

# 参考
[Rails 4 \+ react\-rails gem: Could not find generator 'react:install' \- Stack Overflow](https://stackoverflow.com/questions/33600745/rails-4-react-rails-gem-could-not-find-generator-reactinstall)
Pythonでアルファベット文字列中の大文字を小文字に変換する

コーディング＆ビルド環境：[Paiza.io](https://paiza.io/)

大学のゼミで出た問題で、「文字列の標準メソッドやstringモジュールを使わない」という制約のもと書いてみました

大文字を線形探索法で探し出して変換していく方法

```python:lower.py
def lower(inputdata) :
    arr = list(inputdata)
    data = ""
    for i in range(len(arr)) :
        data = data + (arr[i] if ord(arr[i]) + 0x20 > 0x7A else chr(ord(arr[i]) + 0x20))
    return data
```

大文字を二分探索法で探し出して変換していく方法

```python:lower.py
class Letter:
    def __init__(self, count, data) :
        self.index = count
        self.num = ord(data)
    def largestr(self) : 
        return 0x41 <= self.num and self.num <= 0x5A
    def smallstr(self) : 
        return 0x61 <= self.num and self.num <= 0x7A
    def getstring(self) :
        return chr(self.num)
    def changeSmall(self) :
        if self.largestr() : self.num += 0x20

def sort(keystr, arr) :
    import operator
    p = arr
    p.sort(key=operator.attrgetter(keystr))
    return p

def getEndPoint(arr) :
    t = int(len(arr) / 2)
    if arr[t].largestr() :
        while(t < len(arr)) :
            if arr[t].smallstr() : break
            t += 1
    else :
        while(t > 0) :
            if arr[t].largestr() : break 
            t -= 1
    return t
    
def createLetterList(arr) :
    data = []
    for i in range(len(arr)) : 
        data.append(Letter(i, arr[i]))
    return data
    
def lower(inputstr) : 
    import datetime
    data = sort('num', createLetterList(list(inputstr)))
    if data[0].smallstr() : return inputstr
    t = getEndPoint(data)
    for i in range(t) : data[i].changeSmall()
    data = sort('index', data)
    retdata = ""
    for i in range(len(data)) : retdata = retdata + data[i].getstring()
    return retdata

if __name__=='__main__' :
    import sys
    print(lower(sys.stdin.readline()))
```

時間測定をpaiza.ioでそれぞれやってみたんですけど、後者のほうが４倍くらい早いことが分かりました。
まだコード色々問題あると思うので少しずつ直していきます

時間測定まで書いてあるコードは
[線形探索法](https://paiza.io/projects/cSf4fGRb5bXwD_wUqoMnFQ)
[二分探索法](https://paiza.io/projects/UxnYdaaf16Ceq3UF93OVNA)
正式リリースされたMaterial-UI v1でThemeを変更したいんだがよろしいか？

つい先日、今までbeta版だった[Material-UI v1](https://material-ui.com/)が正式リリースされました！
おめでとうございます！

今までの`v0`系統の`Material-UI`にはベースのテーマを`light`か`dark`にするかや`primary`や`secondary`の色をデフォルトから変更する機能がありました。
`v1`系統の`Material-UI`にも同じ機能が存在します。

## テーマの設定
### Material-UIのcolorsを使用した例
もっともお手軽なのは`Material-UI`が用意しているColorPaletteを使用することです。

```javascript:theme.js
import { createMuiTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';
import yellow from '@material-ui/core/colors/yellow';

export const theme = createMuiTheme({
  palette: {
    type: 'dark', // ベースのテーマ lightかdarkか
    primary: blue, // primaryのカラー
    secondary: yellow, // secondaryのカラー
  },
});
```

### 個別の設定
自分で細かく設定することもできます

```javascript:theme.js
import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  type: 'light'
  palette: {
    primary: {
      light: '#757ce8', // 基本の色よりも明るい色
      main: '#3f50b5', // 基本の色
      dark: '#002884', // 基本の色よりも暗い色
      contrastText: '#fff', // テキストの色
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
  },
});
```

## テーマの反映
ではいよいよ自分で作成したお気に入りのテーマ反映させましょう！

```react:app.jsx
// node_modules
import React from 'react';
import { MuiThemeProvider } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';

// 自分で用意したTheme
// ファイルパスは私の環境のものです。
import { theme } from '../../assets/theme';

class App extends React.Component {
  render() {
    return (
      <MuiThemeProvider theme={theme} > {/* <- ここが大事*/}
        <AppBar color="primary">
          <Toolbar>
            <Typography variant="title" color="inherit">
              Material-UI
            </Typography>
          </Toolbar>
        </AppBar>
      </MuiThemeProvider>
    );
  }
}
```

これで上手く変更されたはずです。
チェックボックスの色も`secondary`の色に変更されます。
地味に嬉しいですよね（笑）

色を自由に設定できるとはいえ、**マテリアルデザイン**には色の使い方にもルールが存在します。
なので、最後にイケてるマテリアルデザインにしてあげるにはライブラリ使用者の技量が問われます。
なので、そこは意識を持っておきましょう。

それと上の例のようにThemeの設定もそれ用のファイルを作って書いた方が管理しやすいでしょう。

## 最後に
お前の説明よりも本家の方を見たいんだが？
という人のために本家の方の[Themeカスタマイズのドキュメント](https://material-ui.com/customization/themes/)へのリンクも置いておきます。

皆さんも**Let'sマテリアルデザイン！！**
高速VBAの作成のヒント、プロ以上の社内アプリを造ろう

※記載内容はメモとして作成しているため、修正が必要な部分があるかもしれません。

####**VBA高速化のポイント**
VBAの手作りのアプリを使っている会社は多いのではないでしょうか。
しかし、素人でも作りやすいためプロレベルというものは少ないです。

以下のポイントを守れば劇的にVBAを高速化することが可能です。

・配列を使う
・処理はメモリ内で実施するようにする
・新しいモジュールを採用する
・処理の重いオブジェクトの使用を避ける
・古いモジュールの使用を避ける
・メモリ使用量の少ないデータ型を使用する
・画像処理を避ける

どういうことでしょうか。
詳しく説明していきましょう。

エクセルのメモリ構造について簡単に記載します。

どんなアプリケーションも立ち上がると同時にメモリを予約します。
このメモリはデフォルトです。使っていくと追加されるアプリケー
ションもあります。

また、配列やデータもメモリを予約します。
エクセルはデータ型のメモリがいっぱいになるとエラーメッセージ
を表示してくれます。

新しいウィンドウでエクセルを立ち上げると、別のエクセルのインス
タンスが作成されます。

上記を踏まえてエクセルの動きをイメージしながらVBAを記述すれば
劇的に高速化することが可能です。

インスタンスレベルまでメモリを意識できればもうプロ以上です。
プロのアプリでもメモリまで意識したものは現状少ないです。
興味ある人はレベルアップのため調べてみればいいでしょう。
その際、データ型の予約メモリ領域の違いと配列から実験してみる
のがいいと思います。

メモリ内での処理の完結が多ければ多いほど、余計な動きが削除さ
れるのです。


これであなたもプロレベルの高速化が実現できます。
※VDIや別PCにあるVBAの場合、帯域制御によりそもそも高速化ができ
ない場合があります。まずはローカルで作成してみましょう。
AWS Summit Tokyo 2018で気になった内容メモ_AWS Media Serviceと機械学習ソリューションを利用した動画コンテンツの価値向上

AWS Summit Tokyo 2018の「AWS Media Serviceと機械学習ソリューションを利用した動画コンテンツの価値向上」のセッションを聴いて、個人的に気になった部分をまとめています。
まだ資料が公開されておらず、個人のメモをベースに書いているため、内容が全て網羅されているレポートではありません。
資料、動画が公開されたら別途ちゃんとしたレポートを書きます(多分)

# 動画の価値を上げる
- 動画に内包された情報を抽出、活用する
	- 動画のなかから時間とか内容とかを抽出するイメージ
- 利用するサービス
	- Rekognition
	- Lambda
	- Elemental MEdiaConvert
	- Elemental MEdiaLive

## Amazon Rekognition
- 深層学習に基づく画像、動画認識サービス
- オブジェクト、シーン
- 節度判定、有名人検出
- 一般的な活用方法
	- メタ情報抽出
	- コンプライアンスのチェック
- 画像認識、動画認識で利用ファイルの条件はある
- 動画の取得形式
	- ファイルとライブストリーム

## AWS Elemental MediaConvert
- フルマネージドのトランスコードサービス
- サーバーレスの従量課金

## AWS Elemental MediaLive
- フルマネージドのライブエンコードサービス
- ライブチャンネルを数分で展開可能

## メディアワークフロー内でのML活用ポイント
- Media SErviceでメタデータ作成
- DBに保存し、Media Serviceで取り出してコンテンツ抽出

## コンテンツ索引とメタデータ作成
- JSON形式で情報が出てくる
- 容量が大きい場合はMediaConvertを使用し、画質を落とさず圧縮してからRekognitionに食わせる
- LambdaからRekognitionへの連携もできる
- メタデータを利用したコンテンツ抽出

# ライブ配信における機械学習の活用
## 特定のシーン検出、自動クリッピング
- Live配信
- マルチアングル
- 見逃し再生
- スポーツでシュート/ゴールシーンだけ見たい
	- 文字認識で得点板の数値が変わったタイミングを得点シーンと認識し、そそこから直近20秒の映像を流す
- ライブ配信をクリッピングする
	- そのままライブ配信で流すのに使う
	- DynamoDBに保存して、ハイライト機能として後から再生するのに使う
- 最近だとSky NewsでRoyal weddingの配信でも使われた
	- ゲストが来た時に、機会学習で顔を認識して名前を表示したりする

# まとめ
- マネージドを活用することで
	- 簡単に機械学習を組み込める
	- アーカイブコンテンツの利用頻度を高める
	- ライブ配信をよりインタラクティブに

# 感想
主にAmazon Rekognitionの話。
ライブ配信での使い方とか具体的な話が聞けたので、使えそうなイメージが湧いて面白かった。
AWSのサービスなので、画像認識してそこをトリガーにLambdaをキックしたり、DynamoDBやS3に保存したりと連携が色々やりやすそうなのも良い。
動画関連はやったことない領域だけど、メディアとかゲームとかエンタメ関連のプロダクトではではなにか使い道がありそうな気がするので、考えてみたい。
計算化学ビジネスをやる社長のテスト投稿

自分の専門分野で差別化は難しいなと3年前に気づいて以来（分野に詳しくない人から見たらどの人がすごいのかわからない）、幅を広げる活動をしている。具体的には茶道・華道・書道をやっているのだが、単純に面白いというだけでなく、所作が変わるには至らなくともそこから生まれたネットワークから文化とハイテクの融合した京都の別邸ができて、そこに計算化学のクライアントを呼んで面白がってもらって、、、というシナジーが生まれたりしている。
プログラミングの話？ 計算化学の昔からのソースはFortranが主体です。
今回は初回の投稿なので短めで！
UE4でMaterialを変更しても見た目が反映されない


# 現象
ビューポート内に配置したアクタにMaterialを適用しても見た目が反映されない

詳細から確認したところMaterialの変更は反映されているが
マテリアルエディタ上で確認できる後述するエラーによりMaterialとTextureが描画されていなかった

# 開発環境
- MacBook Pro (Early 2015)
- OS Version 10.13.5
- Unreal Engine 4.18.3
- Xcode Version 9.4 (9F1027a)

# エラー内容

```terminal
[SM5] /tmp/5087_3992621450.metal(0): Failed to compile to bytecode locally, code: 1, output:  fatal error: file '/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/usr/lib/clang/802.1/include/metal/metal_stdlib' has been modified since the precompiled header '/tmp/metal_stdlib_11323578694557174BFFB3187C02FFDD1FEA6808C9FF88FEA28EFmetalfe-802.1.34-mmacosx-version-min_10.12-ffast-math-std_osx-metal1.2.pch' was built
note: please rebuild precompiled header '/tmp/metal_stdlib_11323578694557174BFFB3187C02FFDD1FEA6808C9FF88FEA28EFmetalfe-802.1.34-mmacosx-version-min_10.12-ffast-math-std_osx-metal1.2.pch'
1 error generated.
```

# 回避方法
[公式フォーラム](https://answers.unrealengine.com/questions/722900/failed-to-compile-bytecode-locally.html)で同様の現象について言及されていました。

(1) 「Max. Metal Shader Standard To Target」の設定を「<font color = "red" >**Metal v2.0(10.13.0+)**</font>」に変更する
>「プロジェクト設定」→「プラットフォーム」→「Mac」→「Rendering」→「Max. Metal Shader Standard To Target」

(2) Editorを再起動する

以上で改善しました。
PHPのビット演算で詰まったから書置き

# あらまし
　PHPの中で、IPアドレスとサブネットマスクをチェックする機能を作ろうとしが、その際にビット演算が上手く出来なかった。ビット演算を初めてやる自分が理解してないだけかもしれないけど、同じような人がいたときのためにここに置いておく。

（チェッカのソースは）ないです

# やりたかったこと
　IPアドレスをip2long()で数値に変換 → 変換された数値をさらにdecbin()を使って2進数に変換 → ビット演算

## 作業環境
　・Win10のIISとPHP7.2
　・一応Ubuntuでも同じことを確認したけど、バージョンとか忘れた

## 実際にやったこと
php中に以下のようなコードを書いた。

```php
<?php
//IPを数値とビットに変換
  $IP = "192.168.1.1";
  $lIP = ip2long($IP);
  $bIP = decbin($lIP);
  echo "IP:" . $IP . "\n";
  echo "lIP:" . $lIP . "\n";
  echo "bIP:" . $bIP . "\n";

//Maskを数値とビットに変換
  $Mask = "255.255.255.0";
  $lMask = ip2long($Mask);
  $bMask = decbin($lMask);
  echo "M:" . $Mask . "\n";
  echo "lM:" . $lMask . "\n";
  echo "bM:" . $bMask . "\n";

//なんか色々計算
  $nBMask = ~$bMask;
  echo "nBM:" . $nBMask . "\n";

  $and = $bIP & $bMask;
  $or = $bIP | $bMask;
  $xor = $bIP ^ $bMask;
  echo "&:" . $and . "\n";
  echo "|:" . $or . "\n";
  echo "^:" . $xor . "\n";
?>
```

## 実行結果1
```
IP:192.168.1.1
lIP:3232235777
bIP:11000000101010000000000100000001
M:255.255.255.0
lM:4294967040
bM:11111111111111111111111100000000
nBM:��������������������������������
&:11000000101010000000000100000000
|:11111111111111111111111100000001
^:�������������
```
ご覧の通り、notとxorの結果が化け化けである。
それでは修正しましょう。

## 修正
あらかじめ修正しておいたものをこちらに用意しました。

```php
<?php
  $IP = "192.168.1.1";
  $lIP = ip2long($IP);
  $bIP = decbin($lIP);
  echo "IP:" . $IP . "\n";
  echo "lIP:" . $lIP . "\n";
  echo "bIP:" . $bIP . "\n";

  $Mask = "255.255.0.0";
  $lMask = ip2long($Mask);
  $bMask = decbin($lMask);
  echo "M:" . $Mask . "\n";
  echo "lM:" . $lMask . "\n";
  echo "bM:" . $bMask . "\n";

  $nLMask = ~$lMask;
  $nBMask = decbin($nLMask); //数値をビット反転させてから、2進数に変換
  echo "nLM:" . $nLMask . "\n";
  echo "nBM:" . $nBMask . "\n";

  $and = $bIP & $bMask;
  $or = $bIP | $bMask;
  $xor = decbin($bIP ^ $bMask); //数値の排他的論理和を計算してから、2進数に変換
  echo "&:" . $and . "\n";
  echo "|:" . $or . "\n";
  echo "^:" . $xor . "\n";
?>
```

## 実行結果2

```
IP:192.168.1.1
lIP:3232235777
bIP:11000000101010000000000100000001
M:255.255.0.0
lM:4294901760
bM:11111111111111110000000000000000
nLM:-4294901761
nBM:1111111111111111111111111111111100000000000000001111111111111111
&:11000000101010000000000000000000
|:11111111111111110000000100000001
^:0
```

#まとめ
なんか実際のコードは$nBMaskの値もうちょっと短かったけど、とりあえず修正できた。
phpのビット演算は、2進数では計算できない。10進数で計算してから、2進数に変換させよう。
この後、nBMaskからわざわざIPに戻す操作もしたような気がするけど忘れた。思い出したら書くかも。