OmniAICreator/Qiita-1.07M huggingface dataset:
短絡評価を用いたReactでのコンポーネント配置


# はじめに
[いなたつアドカレ](https://qiita.com/advent-calendar/2019/allinatatsu)へようこそ初日です、頑張って一人で25記事書くODL(あうとぷっとどりぶんらーにんぐ)企画、完走したいですね。

自分の中にあるネタを引っ張り出して記事を書いていきます。。。くおりてぃ。。。。

今日は頭にあるとスマート？に実装をかける？やつを忘れないようにここにのこしておきます。

# 短絡評価とは

andやorで値を評価する時に

```jsx
A && B // A,B共に真
A || B // A,Bどちらかが真
```
となるため`A && B`の A が偽の場合や`A || B`のAが真の場合、つまりBの値にかかわらず`A && B`や`A || B` の評価結果が決定する場合にはBを評価しないといった言語使用です。

主な使用ケースとしては、Bに動作の重い処理を置いて、Aの値で評価が決定してしまい、Bの結果が不要な(重い処理を走らせる必要がない)場合に処理を軽減する

今回はこの性質を利用し、ある条件が真となる場合にのみコンポーネントを配置するといったことを行う。

## じっそー
結論から言ってこんな感じ

```jsx
{i % 2 == 0 && <div>test</div>}
```

上のプログラムはiが偶数の時に`<div>test</div>`を配置するといった内容です。

> `A && B`の A が偽の場合や`A || B`のAが真の場合、つまりBの値にかかわらず`A && B`や`A || B` の評価結果が決定する場合にはBを評価しないといった言語使用です。

の `&&`の場合の性質の応用ですね、Aが偽の場合はたとえBが真であっても、結果は偽となるため、Bを評価しないと言った性質なので、iが奇数の場合は右の式が評価されず、`<div>test</div>`は配置されません。
しかし、iが偶数の場合はAが真なので、Bを評価しないと、式全体の評価ができないため、Bが評価され、`<div>test</div>`が配置されます。

# おわりに
このようにして、とある条件が真の場合のみ、コンポーネントを配置することができます。
実際の実装では、三項演算子を用いて、条件が真の場合と偽の場合で配置するコンポーネントを分けると言った場面が多いかもしれませんが(知らんけど)`&&`の短絡評価の性質を利用することで、条件が真の場合のみコンポーネントを配置すると言った実装がスマート？にかけます。
年末まで毎日webサイトを作り続ける大学生 〜44日目 イベント（oncontextmenu, onresize, onerror, onmouseover/onmouseout）を使ってみる〜

##はじめに
こんにちは！@70days_jsです。
もう12月ですね。

今日はJavaScriptのイベントを使ってみました。

1. oncontextmenu
2. onresize
3. onerror
4. onmouseover/onmouseout


今日は44日目。(2019/12/1)
よろしくお願いします。

##サイトURL
- https://sin2cos21.github.io/day44.html

##やったこと
今日使ったイベントは主に4つです。

1. oncontextmenu（赤・青色）
2. onresize（黄色）
3. onerror（緑色）
4. onmouseover/onmouseout（すべて）

![test2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/fc19ef28-a7d6-fabe-f5c7-da6e2ae480f2.gif)

###1. oncontextmenuの部分
oncontextmenuは右クリック時のイベントです。

赤色のボックスでは右クリックを禁止して（falseにする）、赤色の枠の中に文字列を表示するようにしています。

青色のボックスでは右クリックされるとalertが表示されます。

```html
<div id="contextMenu" class="context-menu onmouseover">右クリックをすると・・・？</div>
<div id="contextMenu2" class="context-menu2 onmouseover">右クリックをすると・・・？</div>
```

```javascript
let contextMenu = document.getElementById('contextMenu');
let contextMenu2 = document.getElementById('contextMenu2');
contextMenu.oncontextmenu = function () {
    contextMenu.innerHTML = '右クリック不可エリア（不可ではない）';
    return false;
}
contextMenu2.oncontextmenu = function () {
    contextMenu2.innerHTML = ('alertの表示！');
    alert('右クリックをしたな？');
}
```

これで右クリックを使えなくすることもできますが、JavaScript自体を禁止されたり、ディベロッパーツールでコードを書き換えられたりしたら右クリックができるようになります。

###2. onresize
onresizeは画面サイズの変更時のイベントです。

今回は画面サイズが変更されたら横幅の値を表示するようにしています。

```html
<div id="resize" class="resize onmouseover">Displayサイズは・・・？ <br></div>
```

```javascript
let resize = document.getElementById('resize');
window.onresize = function () {
    resize.innerHTML += window.innerWidth + ',';
}
```

window.innerWidthで横幅を取っています。

###3. onerror
onerrorは画像読み込み失敗時のイベントです。

gifでは猫の画像を表示していますが、htmlのソースコードには存在しないURLを書いています。

```html
<div id="onerror" class="onerror onmouseover">
    画像が表示されない場合は・・・？<br>
    <img src="day44.png" id="onerrorImage">
</div>
```

```javascript
let onerror = document.getElementById('onerror');
let onerrorImage = document.getElementById('onerrorImage');
onerrorImage.onerror = function () {
    onerrorImage.removeAttribute("src");
    onerrorImage.setAttribute('src', 'day31_image/5.jpg');
}
```

setAttributeで画像が存在するURLを書いています。

###4. onmouseover/onmouseout

onmouseoverはマウスが乗った時のイベントです。
onmouseoutはマウスが離れた時のイベントです。

今回は、ボックスにマウスが乗ったらborder-widthを太くして目立つようにしました。
要素の取得はクラスで行いました。

```javascript

let onmouseover = document.getElementsByClassName('onmouseover');
for (var i = 0; onmouseover.length > i; i++) {
    onmouseover[i].onmouseover = function (e) {
        e.target.style.borderWidth = '.5em';
    }
    onmouseover[i].onmouseout = function (e) {
        e.target.style.borderWidth = '1px';
        console.log('test');
    }
}
```

ボックスにクラスをつけておき、getElementsByClassNameでクラスを取得します。
for文で回して、e.targetでそれぞれのborder-widthの大きさを変更しています。

##メモ
- 2つのオブジェクト
    - **ビルトインオブジェクト**・・・jsに組み込まれた機能をオブジェクト化（ECMAScript仕様に基づく）、配列、文字列、正規表現など
    - **ナビゲーターオブジェクト**・・・ブラウザ自体の情報、表示に関わる機能をオブジェクト化（ブラウザ独自の実装がされている）

##感想
イベントを調べていると、どうもweb業界の闇が見えるなぁと思っていたんですが、イベントはナビゲーターオブジェクトだからブラウザごとにメソッド名・プロパティ名が違って当たり前なんですね。
標準化して欲しいところではありますが、こればかりは時間がかかりそうな気がする・・・。イベント便利なんだけどな。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。
M.2スロット SSDの寿命

プログラミング記事が充実しているので、私はハードウェア記事を投稿。

#温度で短命になる
M.2スロットのNVMe接続であるWD BlackにOSとOffice、SSHDにゲームなどのプログラム/アプリを入れて運用している。
運用時間/IOは少なかったが、温度が70度で運用していると2年未満でディスク交換が表示された。
5年保証があるので送料負担でSSDを交換してくれる。

#高温の原因
SSDの高温の原因はマザーボードのGIGABYTE GA-AB350M-Gaming 3の拡張スロット位置だった。
M.2スロットの位置はグラフィックボードに隠れるため、風通しが悪く、温度が70度だった。
M.2スロットが他のパーツに隠れにくい、ASRock B450M Steel Legendに変更したら、温度は40度になった。

SSD(電子機器)は高温に弱いことを身をもって経験した。

#Western Digital 5年保証
交換するまでに2、3週間ほどかかるので、急ぎではなければ大丈夫なのだが、
OSを入れ直しの面倒さ、メインPCが使用できなくなったりとする場合は新品を買った方が良いかもしれない。
500GBモデルだったが、1TBになって返ってきた。(たまたま廃盤でなかったのかもしれない)
数学とバッファ

この記事はアラタナアドベントカレンダー1日目の記事になります。
![aratana](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150455/e79ba51f-0163-246b-ad7b-998f8f442d72.png)

11/29(金) 宮崎初のBacklogユーザーズイベントJbugに登壇しました。
陸の孤島と言われる宮崎でこのようなイベントが開催され、満席（地方でここまで集まるのは珍しいそうでうす）のなか登壇できるのは本当に嬉しい限りです。

タイトルは「数学とバッファ(Backlogの話しなくてごめんなさい)」。
勘に頼らないバッファのとり方とは？というテーマで話をさせていただきました。

[数学とバッファ](https://speakerdeck.com/yasuhirokimesawa/shu-xue-tobatuhua)

<script async class="speakerdeck-embed" data-id="b8f3c35b658449aba798e4a9610b303d" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>

詳細はスライドを見ていただくとして、ここでは少し補足を、、、

今回結論として、相対見積もりやスプリント、ベロシティの導入のすすめ、ベロシティの安定のためチームでアイデアを出し合う。そのために心理的安全性の必要性、チームとして活動していく必要があるという話をさせてもらいました。

[型にはめるだけでうまくいくなんてことはないという話](https://qiita.com/YasuhiroKimesawa/items/3fbec120b2cf76898627)
でも書きましたが、AgileやScrumでなんでやるのか？という答えの一つが今回お伝えしたかった内容になります。

最後に当日話し忘れた参考文献を上げておきますね。

[エンジニアリング組織論への招待 ~不確実性に向き合う思考と組織のリファクタリング](https://www.amazon.co.jp/dp/4774196053/)

[アジャイルな見積りと計画づくり ~価値あるソフトウェアを育てる概念と技法~](https://www.amazon.co.jp/dp/4839924023)
CentOS8にzabbix_server4を入れたらうまく動かない

# 環境
- CentOS Linux release 8.0.1905 (Core)
- zabbix_server 4.4.3
- MariaDB 10.3.11

# 現象
zabbixのインストールは普通に完了するものの、
zabbixサーバのパラメータ値が「いいえ」になっていて、うまくみられない。
ログにこんなエラーが。

>  2307:20191201:221020.888 database is down: reconnecting in 10 seconds
>  2307:20191201:221030.889 [Z3001] connection to database 'zabbix' failed: [1045] Access denied for user 'zabbix'@'localhost' (using password: NO)

# 原因
設定時にDBのパスワードを設定したが、/etc/zabbix/zabbix_server.confに反映されてない。

# 対策
/etc/zabbix/zabbix_server.confにパスワードを書いてあげる。
下記の行のコメントアウトを外して、設定したパスワードを書く。
> DBPassword=your_db_password

うちではこれで動作しました！
schexパッケージを使ってみた

自分が作っているR/Bioconductorパッケージ[scTensor](https://bioconductor.org/packages/release/bioc/html/scTensor.html)では、1細胞RNA-Seqデータ内に含まれるリガンド・受容体の遺伝子発現を各々、赤・青色でプロットしている。

![Unknown-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17038/4151c4f1-fffd-104c-ef6c-fd3ae01b2ca2.png)

![Unknown.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17038/ae5781c8-8bec-47f5-069c-ac23705fc6e3.png)

このように細胞1つ1つをプロットする場合に問題となるのは、点が重なるにつれて、裏側に隠れてしまい見えなくなる細胞が出てきてしまうことである（https://github.com/SaskiaFreytag/schex ）。

BioC3.10でリリースされた[schex](http://bioconductor.org/packages/release/bioc/html/schex.html)パッケージは、このような問題を解決するために作られたもので、2次元プロットを六角形のビンで区切り、そのビンごとに平均をとる。

このパッケージにより、以下のようにリガンドの発現量もプロットできた。

なお、デフォルト色がviridisで、これを変更するのに苦労したが、警告メッセージは出るものの、色を変えることはできた (参考: https://github.com/SaskiaFreytag/schex/issues/5 )。

```r
# Package loading
library("scTensor")
library("schex")
library("SingleCellExperiment")

# Data loading
data("GermMale")
data("tsneGermMale")

# SingleCellExperiment Object
sce <- SingleCellExperiment(assays = list(counts = GermMale))
reducedDims(sce) <- list(tSNE=tsneGermMale$Y)
logcounts(sce) <- log10(GermMale + 1)

# Setting Hex bin
sce <- make_hexbin(sce, nbins = 40, dimension_reduction = "tSNE")

# Plot
gene_id <-"6387"
gene_name <- "CXCL12"
g <- schex::plot_hexbin_gene(sce, type="logcounts", gene=gene_id,
	action="mean", xlab="tSNE1", ylab="tSNE2", 
	title=paste0("Mean of ", gene_name))
g <- g + scale_fill_gradient(low = 'gray', high = 'red')
plot(g)


```

<img width="889" alt="スクリーンショット 2019-12-06 18.58.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17038/d331edf7-f49d-8f52-15f6-0af25615c8d7.png">

nbinでビンの数も変えられるので、10^5 - 10^6細胞くらいの込み入ったプロットを描く場合は、もう少し細かく区切ってもいいかもしれない。

次のscTensorのバージョンアップで早速schexベースに切り替える予定。
Vimの操作方法をMind Mapで書いている話（もしくは書いてた話）

こちらの記事は [Vim2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/vim2) 2日目の記事になります。

Vimのコマンド、最初はなかなか覚えられないものです。

と言う事で今回は私がVimを覚え始めた頃にMind Mapで作成したコマンドチーとシートを紹介します。

<img width="613" alt="スクリーンショット 2019-12-01 22.20.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79373/2128560a-e264-b2d8-74f4-fae9482cf88c.png">

PDF版は [こちら](https://github.com/TomonoriMatsumura/mindmap-vim) からダウンロード出来ます。

途中まで作成して放置した関係で色々とコマンドが違ってる部分もありますが大体動くと思います。

現場からは以上です。

## 参考サイト

* [mind-map-mamono210/vim](https://github.com/mind-map-mamono210/vim)
* [ソフトウェア | iMindMap Mind Mapping](https://www.ayoa.com/imindmap/ja/software/)
D言語くんと秘密のレポート

# はじめに

[D言語くん](https://twitter.com/d_man_bot)は好奇心が旺盛なことで知られており、常にTwitterで自身に関するツイートを監視しています。

それこそまさしく365日24時間、監視中の鬼気迫る形相たるやD言語くんの如しです。

また、毎年そのD言語くんアイが捉えていたと思われるツイートを長年のD言語くん研究家である @simd_nyan 氏がまとめてレポートとして公開されています。

- 2019年 : https://gist.github.com/simdnyan/a82a49ed5a2d4e559b393f20746a6587
- 2018年 : https://gist.github.com/simdnyan/1f9f19c523100ceeadc8f67b017b7ddb
- 2017年 : https://gist.github.com/simdnyan/02fbf4106ad9bd39cf02eb418ced5fa5


このレポートはツイートのIDを列挙したものである、ということまではわかっていますが、とても人間が理解できるものではありません。

そこでD言語くんの御心を理解するため、近年のWeb技術をもってビューアーを作り、そのレポートの真実に迫っていきたいと思います。

（とか言いながら同じことをやってもう3年目になります）

# 概要

D言語くんが見ていたものが何なのか、理解するために長ったらしい文章など必要ありません。
以下のリンクからビューアーを参照してください。

https://lempiji.github.io/dman-tweet-viewer/

毎度半日くらいでほぼゼロから書いているため、今年も今年で見た目はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11612/c003a64e-e107-334f-1a0b-2bdcd4034bf5.png)


なお、0以上を想定するカウンター値が初手-1を押すだけで負の値を取るバグっぷりです。
「これでよく公開できたな」と称賛してください。こんな感じで大丈夫です。知らんけど。

# 詳細
こちらのソースは以下のリポジトリに一式置いてあります。

https://github.com/lempiji/dman-tweet-viewer

日ごろ使っている安定のサンドボックス的最小構成である TypeScript + React + parcel をベースに Material UI + gh-pages を追加している感じです。

React的な話をしておくと、最近流行ってると噂の React Hooks を使って埋め込みツイートを表示するコンポーネントを作り、あとはgistからテキスト取ってきて加工、適当にスライダーなど揃えて突貫工事でビューアーとして仕立てました。

今年は年を切り替えられるようにしたので、今後はそこらへんをメンテするだけでD言語くんと共に歩むことができますね！


## 準備

埋め込みツイートの表示は、公式で提供されるスクリプトを読み込んでやれば簡単に行えます。
TypeScriptで使う定義と合わせて以下のようにしておきます。

```html:スクリプトの読み込み
<script src="https://platform.twitter.com/widgets.js"></script>
```

```typescript:Twitterのスクリプトに対応するための定義
interface Twttr {
    widgets: {
        createTweet(id: string, container: HTMLElement, options: {}): Promise<HTMLElement>;
    };
}
declare const twttr: Twttr;
```

（Windowインターフェースを拡張するnamespaceを書くほうが良い気がしましたが、気が向いたら書き換えることにします）

## 埋め込みツイート用コンポーネント

イマドキなら useRef と useEffectを使えば楽勝ですね。（本当か？）

Twitterのスクリプトが提供する関数を使えば簡単に埋め込みツイートを表示できます。
関数の引数に使うため、ノードの参照を取ってきて、`useEffect` の中で呼び出します。

`createTweet`が勝手にノードの挿入までやってくれるので使うのは楽なのですが、戻り値がPromiseなので、IDを切り替えるときに前のツイートを消すのがちょっと面倒です。

普通は初期化したら表示しっぱなしだと思うのでこれは仕方ないですかね。
useEffectの戻り値でノードを削除する処理を返すあたりがポイントです。

```typescript:ツイート表示用のコンポーネント
interface TweetProps {
    tweet: string;
}

function Tweet({ tweet }: TweetProps) {
    const containerRef = React.useRef<HTMLDivElement>();

    React.useEffect(() => {
        const t = twttr.widgets.createTweet(tweet, containerRef.current, {});
        return () => {
            t.then(e => {
                if (e && e.parentNode) {
                    e.parentNode.removeChild(e);
                }
            });
        };
    }, [tweet]);

    return <div ref={containerRef}></div>
}
```


# 振り返り

- 久々にMaterial UIのサイトに行ったら日本語で表示できるようになっていた
    - https://material-ui.com/ja/
    - （コンポーネント名を翻訳するのはやめてほしい）
- 噂のSuspenseを使いたかったけど、せっかくなら…とuseRefと組み合わせたらイマイチうまく動かず諦めた
    - 紹介記事がどれもグローバル変数に入れているのは何か理由がありそうな気がする
- useReducer使うように書き換える予定が前日に作業開始したため間に合わず
    - インクリメント/デクリメント周り、どう見てもdispatchで変化量を指定する方が良いですね。

というわけで以上です！

アドベントカレンダーの準備は計画的に、用法容量を守って正しくご参照ください！
複数マシンでVSCodeの設定を共有したかった。私がたどり着いたのはdotfilesでした


# TL;DR
`keybindings.json` と `settings.json` のリンクを `$HOME/Library/Application\ Support/Code/User`(macOSの場合）に作成します。

# 背景
開発マシンを問わずVSCodeを愛用しています。  
業務用mac、私用mac、私用ラズパイでVSCodeを利用しているのですが、キーバインディグを統一するためにdotfilesでの管理に切り替えました。

## dotfiles
🌟🌟🌟スターください🌟🌟🌟
https://github.com/hiroga-cc/dotfiles

# 解説
私はdotfilesの設定をスクリプトで展開するようにしているので、VSCodeの設定ファイルもスクリプト内でコピーしています。

```
VSCODE_USER_SETTING=$HOME/Library/Application\ Support/Code/User
mkdir -p "${VSCODE_USER_SETTING}"
ln -f "${DOTFILES}/bin/vscode/User/keybindings.json" "${VSCODE_USER_SETTING}/keybindings.json"
ln -f "${DOTFILES}/bin/vscode/User/settings.json" "${VSCODE_USER_SETTING}/settings.json"
```

ファイルをコピーしてもいいのですが、その場合VSCodeから設定を変更してもdotfilesに反映されません。リンクの運用がオススメです。
Working with UI Controlsチュートリアルが動かない件の対処

# Working with UI Controlsチュートリアルが動かない件の対処

SwiftUIのユーザ入力画面チュートリアル[Working with UI Controls](https://developer.apple.com/tutorials/swiftui/working-with-ui-controls)ですが、チュートリアルの通り実装を行っても、ProfileHome.swiftのPreview(Canvas)が動きません。

以下の２点を解消することで動作させることができます。

## 画面が表示されない

`.onAppear`において、初期化されていない`userData`にアクセスしているため。

初期化すればよいので、以下のようにしてEnvironmentObjectを初期化しましょう。


```diff:ProfileHost.swift

struct ProfileHost_Previews: PreviewProvider {

    static var previews: some View {
        ProfileHost()
+        .environmentObject(UserData())
    }
}
```

## サマリー画面が表示されない

Canvas環境ではeditModeの環境変数が初期化されていないため。

これはXCode側の問題ですが、Appleが本件に対処するまでは、以下のように試験対象ビューにラッパーを噛ませて、ラッパー側でeditModeの実体を宣言することで対応できます。

```diff:ProfileHost.swift
+
+struct PreviewWrapperView: View {
+    @State var editMode : EditMode = .inactive
+
+    var body: some View {
+        return ProfileHost().environment(\.editMode, $editMode)
+    }
+}
+
struct ProfileHost_Previews: PreviewProvider {

    static var previews: some View {
-        ProfileHost()
+        PreviewWrapperView()
    }
}
```

## 最終形

上記２点を併せたソースがこちらです。

```swift:ProfileHost.swift
struct PreviewWrapperView: View {
    @State var editMode : EditMode = .inactive

    var body: some View {
        return ProfileHost().environment(\.editMode, $editMode)
    }
}

struct ProfileHost_Previews: PreviewProvider {

    static var previews: some View {
        PreviewWrapperView()
        .environmentObject(UserData())
    }
}
```
ExmentのDocker環境を作ってみた

# 最新情報

現在(2022 1/2)では、Exmentの公式サイトにおいて、dockerイメージが提供されています。
新規に環境を作られる方は公式イメージを使われることをお勧めいたします。
過去にこの記事を参考に環境を作られた方もおられると思うので、この記事自体は残しておきます。

[公式リポジトリ](https://exment.net/docs/#/ja/install_docker)

# 概要
ちょっとしたWeb用DBを作る場合、[Exment](https://exment.net/)が便利そうだったので、気軽に試験できる使えるDocker環境を作ってみました。

# 使い方

## 定義ファイル取得

以下gitにcomposeを作成しました。
同ファイルをダウンロードします。

[docker-exment](https://github.com/yamada28go/docker-exment)

## コンテナ起動

取得してきたパスで以下コマンドを実行してコンテナを起動します。

> docker-compose up

## 初期設定

コンテナが起動すると以下パスに各種ページが起動しています。

| パス     |       機能 |  
|:-----------------|:------------------|
| http://localhost:8080/admin        |   Exmentインストールページ        |  
| http://localhost:8888           |            phpMyAdmin |   

Exmentの初期設定を行うため「http://localhost:8080/admin 」へ接続します。
接続する以下のような画面が表示されるめたそのまま「Submit」します。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63200/64262b1d-638b-8cba-b560-164660538d4f.png)

次にSQLの初期設定画面が表示されるます。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63200/d1fe2ce2-11b1-b04a-6ef2-e7a5339048ff.png)

各項目に関して、以下表のように設定し「送信」を押します。

| 項目    |       設定値 |  
|:-----------------|:------------------|
| ホスト名       |   db        |  
| データベース名           |  exment_database  |   
| ユーザー名           |  exment_user  |
| パスワード           |  secret|

以下画面が表示されるので「インストール実行」を押します。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63200/6fa31f80-d45d-9d00-5233-2fa956703767.png)

しばらくすると「Exment初期設定」画面が表示される。ここまで表示されれば環境構築は問題なく実行できている。あとはサイトの設定を行えばExmentが使用できる状態となります。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63200/3e35513a-4a88-bae6-1fad-2ff80e1a7749.png)

# バージョン指定

真面目に使おうとした場合、バージョン固定が出来ないと使いにくいと思います。
docker file上の環境変数「EXMENT_VERSION」で使用するexmentのバージョン番号を指定する事が出来るようになっています。

```docker:Dockerfile
FROM php:7.2-fpm

# Exmentバージョンを設定する
ENV EXMENT_VERSION 3.0.13
```

また、私が使っているバージョンに関しては、docker hub上でビルドするようにしています。

[yamada28go/docker-exment
](https://hub.docker.com/r/yamada28go/docker-exment)

バージョン毎にタグを切るようになっているのので、それに合わせて取得してください。




```[例]version-3.0.13の場合
docker pull yamada28go/docker-exment:version-3.0.13
```

また、docker-compose.ymlファイルにもバージョン情報を持っています。
以下のようになっているので、使いたいバージョン番号を指定して使用してください。

```yaml:docker-compose.yml
  php:
    image: yamada28go/docker-exment:version-3.0.13
    volumes:
      - www-data:/var/www
    depends_on:
      - db
    environment: 
      EXMENT_VERSION: 3.0.13
```


# その他

この設定ファイルはExmentのお試し用に作りました。
セキュリティに関して十分に検討して作っていないため、本番適応する場合はセキュリティ面など再度検討してから使って下さい。

---

# 参考


[Laravel製のオープンソースWebデータベースを開発した話](https://qiita.com/hirossyi73/items/b6280901c394216c07b8)
PHP7.4が出たので、すぐに使えるLAMP環境をdocker-compose形式で作成しました

Qiitaでポエムが増えてるので、自分もいいだろうと思って投稿。


## どういう記事？

PHP7.4がでた。
CentOS8も出てた。
MySQL8も（結構前に）出てた。

じゃあ、自分の作業環境ほしいよね？
作るか。

コンセプトは、**最低限の環境がすぐ使える**！


## 答えだけくれ！な人へ

- [LAMP_environment_by_docker-compose
](https://github.com/nnahito/LAMP_environment_by_docker-compose)をクローン
- `docker-compose up -d --build`
- アクセス
    - docker for windowsの場合: localhost:8080
    - docker tool box の場合: 多分 `192.168.99.102:8080` 。`docker-machine ip`で出てくるIP使って
    - MacとLinuxは知らん。動作確認したらREADMEのプルリクください。


## 苦労した点
- PHP7.4からなんかリポジトリ変わってた
- CentOS8はyumじゃなくなってた。dnfだった。
    - でもyumも使える（リンクはられてた）
- すでに用意されてるイメージは甘え。自分でDockerfile書くぞ！
- MySQLは、パスワード系がめんどかったので甘えた。


## 使い方

1. Dockerインストールしてね
2. [LAMP_environment_by_docker-compose](https://github.com/nnahito/LAMP_environment_by_docker-compose)をクローンしてね
3. `docker-compose up -d --build`叩いてね
4. htdocsフォルダにPHPとかおいてね
5. localhostにアクセスしてね。ポートは`8080`
6. なんか拡張したり間違ってたら遠慮なくプルリク送ってね
クリスマスシーズンだしみんなでbrainをf*ckしよう

# はじめに

[近大アドカレ](https://qiita.com/advent-calendar/2019/kindai) 1日目の ~~ネタ~~ 記事になります。

以降のアドカレはとってもためになる記事だと思うので、みなさんよろしくです。

## 動作環境
みんな大好きdockerくん

```
$ docker run -itd --name bf sosedoff/brainfuck
$ docker exec -it bf bash
```

これでだれでもBrainをf*ckできますね。

## Brainf*ckってどんな言語？

Esolang(難解プログラミング言語)の一種で実行命令が8種類しかないといった ~~可読性や記述生に優れた実用的な~~ プログラミング言語ですね。

この言語の特徴はなんといってもコンパイラサイズが小さいことですかね、開発時のコンパイラサイズで123バイト、インタプリタだと98バイトという驚異の小ささです。

「><+-.,[]」以外の文字は全てコメント扱いされる

***チューリング完全***

## 関連言語
ついでにBrainf*ckと近い言語の紹介をしておきます。。。

### 派生言語
- A ・・・「A」というアルファベット一文字でプログラムを記述する。
- BrainCrash　・・・Brainf*ckの8つの命令にさらに4つの命令を付け加えたもの
- Ook! ・・・「Ook.」「Ook!」「Ook?」 の三つから二つを組みわせることで、Brainf*ckの８つの命令を表現した言語
- siro ・・・電脳少女シロの8つの名言を名言をBrainf*ckに置き換えた言語

### Esolang
- WhiteSpace
- HQ9+
- Piet
- Grass
- Lazy K

## 言語仕様

1. 「>」 ポインタを一つ進める
2. 「<」 ポインタを一つ戻す
3. 「+」 ポインタ内の値を1加算する
4. 「-」 ポインタ内の値を1減算する
5. 「.」 ポインタの値を出力する
6. 「,」入力を1バイト読み込み、現在のポインタへセットする
7. 「[」現在のポインタの値が0の時「]」まで飛ばす
8. 「]」現在のポインタの値が0でない時「[」まで飛ばす

7と8はセットでループとして扱います。

## ごあいさつ

```hello.bf
+++++++[>++++++++++<-]>++.<+++++[>++++++<-]>-.+++++++..+++.
```
これで`Hello`と出力されます。
はい、意味がわかりませんね。パーツごとに分解していきましょう

```
+++++++[>++++++++++<-]>++.
<+++++[>++++++<-]>-.
+++++++.
.
+++.
```
こうやって分解してみると少し見えてくるかもしれませんね。
1行目がHの出力で、2行目がeの。。。。でn行目がn文字目の出力になっています。

よく見てみると全て行の最後の文字がポインタの値を出力する「.」であることからも見て取れますね。


では、1行目をさらに分解していきます。

```
+++++++ [>++++++++++<-] >++.
```
まず一つ目の塊は
「+」が7つ、つまり先頭のポインタの値を7にしました。

7 0 0 0 0 0 0..... <- ポインタの様子

そして二つ目の塊は
ループですね。
まず、ポインタを一つ進めて、10回2つめのポインタを加算し、
7 10 0 0 0 0 0 ....

一つポインタを戻し、ポインタの値を1減らし
6 10 0 0 0 0 0 ....
6は0ではないので、ループの先頭へと戻ります。

一つポインタを進めて、10回加算し
6 20 0 0 0 0 ....

一つポインタを戻し。ポインタの値を1減らし
5 20 0 0 0 0 ....

と続いていき、
0 70 0 0 0 0 ....
となったときに、ポインタの値が0になったのでループが終了します。

そして最後のブロックで2先頭のポインタから一つポインタを進めて2つめのポインタのあたい、つまり70を2回加算し
0 72 0 0 0 0 ...
となり、2つめのポインタの値、「72」を出力します。

この72がなにを示すかと言うとASCIIコード表とにらめっこすると10進数で72はHであることがわかります。

このようにして、まず一文字目の「H」が出力されます。
次は「e」ですね、ASCIIコード表によると「101」ですね。

文字を出力したからと言ってポインタにセットされた値が消えるわけではないので、72からスタートします。

```
<+++++[>++++++<-]>-.
```
先ほどと同様に、ポインタの値を101にし最後に出力し、これで「e」が出力され、次の「l」は、108なので、
`+++++++.`これで7回加算ですね。その次も「l」なので、そのまま出力し、最後は「o」の111にするために`+++.`で3回加算し、出力でターンエンドです。

このようにして、Brainf*ckでこんにちはができています。

では、本当にこれでできているか確認してみましょう。

```
$ docker exec -it bf bash
# brainfuck
>> +++++++[>++++++++++<-]>++.<+++++[>++++++<-]>-.+++++++..+++.
Hello
```
となればあなたも無事brainをf*ckできたということですね。

おつかれさまでした。
次回の近大アドカレをおたのしみに〜 じゃんk。。。(ここで通信は途絶えているようだ)

## 参考
- [プログラミング言語「siro」](https://qiita.com/benisho_ga/items/50e674fded183a9e12f1)
- [まともなBrainf*ck入門記事](https://qiita.com/TomoShiozawa/items/25dcce1540085df71053)
create-react-appで生成したReactのESLintをVSCodeでやる（自動整形付き）

## 概要

create-react-app用のESLintをVSCodeでやる。

## 前提知識

ESLint自体はcreate-react-appすると自動的にインストールされている。
で、create-react-appした時の`package.json`に↓があるのがポイント。
※`react-app`というルール定義が存在していてそれを継承している形になっている

```json-doc
{
  //...略...
  "eslintConfig": {
    "extends": "react-app"
  },
  //...略...
}
```

`npm run start`すると、サーバが起動し、その中のメッセージで自動的にlintして警告を出したりしてくれるが、これは`react-app`というルールを使用していることになる。

## 設定

で、VSCodeに`react-app`のlintを同じように使用するためには、

### 1. VSCodeの拡張にESLintを入れる

そのまま。↓を入れる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299475/b5a50593-ad99-3c4b-5b9f-0c1c62a40d6f.png)


### 2. ESLintのファイルを生成する

`ctrl + shift + P` で、`ESLint: create ESLint congiguration` を選択する。
ESLintの設定ファイル生成のコマンドラインが起動するので、↓を参考に設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299475/eb7041d7-1ee0-401f-02ca-fac6f6786d06.png)

ワークスペースのルートに、`eslintrc.js`ファイルが生成される。

### 3. eslintrc.jsのベースルールをreact-appへ変更する

eslintrc.jsの`extends`を、

```
'extends': 'eslint:recommended',
```

↓へ変更する。

```
'extends': 'react-app',
```

### 4. ファイル保存時に自動的にlintルールで整形されるようにする

`ctrl + shift + P` で、`ユーザー設定を開く` を選択する。
`ユーザ`を`ワークスペース`へ変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299475/c83e2ce2-6792-d246-96e9-fb676c8d5558.png)
`設定の検索`に、`ESLint`と入力する。
`Files: Auto Fix On Save` にチェックを入れる。

↓諸々含めた設定例。

```json-doc
{
  "files.eol": "\n",
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true // importの自動編成
  }
}
```

## おまけ

* セミコロン付与
* インデントスペース4つ
* シングルクオート
* 末尾の空白を削除
* 複数空行禁止

のサンプル`eslintrc.js`

```javascript
module.exports = {
	'env': {
		'browser': true,
		'es6': true
	},
	'extends': 'react-app',
	'globals': {
		'Atomics': 'readonly',
		'SharedArrayBuffer': 'readonly'
	},
	'parserOptions': {
		'ecmaFeatures': {
			'jsx': true
		},
		'ecmaVersion': 2018,
		'sourceType': 'module'
	},
	'plugins': [
		'react'
	],
	'rules': {
		'linebreak-style': ['error', 'unix'],
		'indent': [
			'error',
			4,
			{ "SwitchCase": 1 }
		],
		'quotes': [
			'error',
			'single'
		],
		'semi': [
			'error',
			'always'
		],
		"no-extra-semi": "error",
		'no-trailing-spaces': [
			"error",
			{ "skipBlankLines": false }
		],
		'no-multiple-empty-lines': [
			'error'
		],
		"no-unexpected-multiline": "error",
	}
};
```
ローカルでcircleciコマンドを実行したとき、"git: not found"と表示され、エラーとなる

# 概要
ローカルで`circleci build`コマンドを使って設定ファイルを確認しようとしたところ、エラーでタスクが正常終了しない。

```bash:console
====>> Checkout code
  #!/bin/sh -eo pipefail
mkdir -p /root/project && cd /tmp/_circleci_local_build_repo && git ls-files | tar -T - -c | tar -x -C /root/project && cp -a /tmp/_circleci_local_build_repo/.git /root/project
/bin/sh: git: not found
tar: empty archive
tar: short read
Error: Exited with code 1
Step failed
Error: runner failed (exited with 101)
Task failed
Error: task failed
```
実行したconfig.ymlは下記の通り。

```yaml:config.yml
version: 2
jobs:
  build:
    docker:
      - image: node:12.13.0-alpine
    steps:
      - checkout
      - run:
          name: Greeting
          command: echo Hello, world.
      - run:
          name: Print the Current Time
          command: date
```

# 原因
コンソールにも出力されているように、checkout時、コンテナ上でgitが実行できないことが原因。
今回使用しているimage:`node:12.13.0-alpine`には
gitはデフォルトでは入っていない。

# 対応
checkout実行前に、apkコマンドでgitを用意してあげる。

```yaml:config.yml
version: 2
jobs:
  build:
    docker:
      - image: node:12.13.0-alpine
    steps:
      - run:
          name: add git
          command: apk -U add git
      - checkout
      - run:
          name: Greeting
          command: echo Hello, world.
      - run:
          name: Print the Current Time
          command: date
```
実行結果は以下の通り

```bash:console
====>> Checkout code
  #!/bin/sh -eo pipefail
mkdir -p /root/project && cd /tmp/_circleci_local_build_repo && git ls-files | tar -T - -c | tar -x -C /root/project && cp -a /tmp/_circleci_local_build_repo/.git /root/project
====>> Greeting
  #!/bin/sh -eo pipefail
echo Hello, world.
Hello, world.
====>> Print the Current Time
  #!/bin/sh -eo pipefail
date
Sun Dec  1 12:48:31 UTC 2019
Success!
```
無事、実行されました。
nullとundefinedの違いを忘れるので真剣に向き合ってみた

# nullとundefinedの違いって何？？

null = 値が空
undefined = 未定義

## オブジェクト作成して検証してみた！

```javascript
const obj = {
  flag: true,
  sample: null // 値を初期化するときに使用する、値が空の意。
}

alert(obj.flag); // true
alert(obj.sample); // null
alert(obj.hoge); // undefined
```

## obj.sample == undefined は 「true」 になる！

nullは、`false`
undefinedは、`false`

```javascript
if(obj.sample == undefined) { // 等価演算子
  alert('true'); // true が出力される
}
```

## obj.sample === undefinedは 「false」 になる！
厳密等価演算子を使用すると、`obj.sampleの値は空だが、定義はされている`ので`false`となる。

```javascript
if(obj.sample === undefined) { // 厳密等価演算子
  alert('true'); // true は出力されない
}
```
Redux Thunkでactionに非同期処理を書く

middlewareである「Redux Thunk」を使うとreduxのactionに非同期処理の関数を返すことができるのでその説明になります。

## 通常のaction

actionでは純粋なobjectを返さなければならない。
そのため非同期処理を書くことができない。

```javascript:action.js
export const HOGE = 'HOGE';

export const foo = () => ({
  type: HOGE
});
```

## Redux Thunk

### about

公式サイト「[Redux Thunk](https://github.com/reduxjs/redux-thunk)」にはこのように書かれてます。

> 単純な基本的なRedux storeでは、actionをdispatchすることによって簡単な同期更新のみを行うことができます。
middlewareはstoreの機能を拡張し、storeと対話する非同期ロジックを作成できるようにします。
thunkは、storeへのアクセスを必要とする複雑な同期ロジックやAJAX requestなどの単純な非同期ロジックなど、基本的なRedux副作用ロジックの推奨middlewareです。

### Setup

```terminal
$ yarn add redux-thunk
```

- reduxの`applyMiddleware`関数の引数にthunkを設定
- createStoreの第二引数に読み込む
- App componentをwrapしているProvider componentのstore propsに設定

``` javascript:index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';

import reducer from './reducers';
import App from './App.js';

const store = createStore(reducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={ store }>
    <App />
  </Provider>
  document.getElementById('root')
);
```

### actionで導入

- PromiseベースのHTTPクライアントである`axios`を使用
- 純粋なobjectではなく関数を返せるようになる。第一引数は`dispatch`、第二引数は`getState`を設定
- axiosがPromiseで出来ているので`async await`を使用

``` javascript:action.js
import axios from 'axios';

export const HOGE = 'HOGE';

export const foo = () => async (dispatch, getState) => {
  const { fuga } = getState();
  const response = await axios.get({REST APIのエンドポイント});
  dispatch({ type: HOGE, response })
};
```
これでreducerに処理が行き渡ります。
以上です。
Elasticsearch によるログ収集と可視化（第一回）

#はじめに
今回私達4人(長谷川、飯島、韓、大橋)は、
生ログに出力される様々なデータから、必要な情報を抽出・可視化することで、
様々な障害検知などに活用出来ることを確認します。

今期(12月末まで)の検証としては、
「Windowsイベントログからログイン成功／失敗のログを収集・(可視化するために) 集計」することで、
不正アクセスの疑いを検知出来るようにします。
具体的には、以下の流れでログ収集から可視化までを検証します。
　①ログ収集 ＞ 蓄積 ＞ 可視化 の各ツールはLinuxに導入する。
　　そのため、WindowsイベントログをLinuxへ転送する。(ログ出力：Winlogbeat)
　②ログ検索・集計の高速化のため、収集したログを加工(整形)してログ蓄積ツールに渡す。
　　(ログ収集：Logstash)
　③ログ蓄積ツールと可視化ツールを連携し、不正アクセスの疑いを可視化する。
　　(ログ蓄積：Elasticsearch、ログ可視化：Kibana)


#ログ検索ツールElasticsearchについて
今回のログ検索ツールには、
Elastic社の元でOSSとして開発されている全文検索エンジンのElasticsearchを使用します。
Elasticsearchには以下のような特徴があります。<br>(公式サイトから引用:https://www.elastic.co/jp/products/elasticsearch/service)<br>
**①直感的でフレキシブル**
　設定・デプロイが驚くほど簡単で、高機能で使いやすい設計。<br>
**②すぐれた機能を搭載** <br> 　Elasticのプロダクト/サービス限定のすぐれた機能を搭載
　(Machine LearningやCanvas、APM、インデックスライフサイクル管理など)。<br>
**③あらゆるユースケースに対応** <br> 　多様なデータを組み合わせてセキュリティや可監視性の強化、クリティカルなユースケースに対応可能。<br>
このElasticsearchへのデータ格納について説明する前に、<br>Elasticsearchで使われる用語やデータ型について説明します。

#Elasticsearchにおいて使用される用語
「Elasticsearchにおいて使用される用語」は一般的なRDBとは異なっているため、
各用語について、RDBで使用する用語との対比を交えて説明します。

 - index：データを保存する領域。RDBの「Database」や「Table」にあたる。<br>以前は「_type」でindex内をさらに領域に分けることができましたが、現在は廃止されています。
 - field：列を示す。RDBの「column」にあたる。
 - document：行を示す。RDBの「record」にあたる。

#Elasticsearchのデータ型
Elasticsearchの「データ型」は多岐に渡るため、
今回使用するデータ型と関連するデータ型を中心に説明します。

 - date：日時を格納する。
 - integer：32ビットの符号付整数で、値の範囲は「-2147483648 ～ 2147483647」。<br>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一般的には9桁以下の数値を格納するために用いられる。
 - short：16ビットの符号付整数で、値の範囲は「-32768～32767」。<br>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一般的には4桁以下の数値を格納するために用いられる。integer型よりも容量節約ができる。
 - keyword：文字型のデータを格納する。完全一致検索に利用可能。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(正規表現などを利用することで部分一致検索も可能)
 - text：文字型のデータを格納する。あいまい検索に利用可能。(1文字異なる単語の検索など)
 - ip：IPv4/IPv6を格納する。

#Elasticsearchの検索・集計
Elasticsearchでは収集する各項目ごとに「検索可否」と「集計可否」を設定します。

 - 検索可否：指定した項目での検索可否を定義します。
 - 集計可否：指定した項目で「可視化」するための集計可否を定義します。<br>

なお、検索可否と集計可否はデフォルトで有効になっています。
無効にする場合は明示的に「false」を設定する必要がありますが、<br>無効設定とすることでデータ容量を節約できます。


#今回収集するデータのデータ構造について
ここまで説明した内容を踏まえて、今回収集するデータを
Elasticsearchにどのような「データ構造」で保存するかを決めていきます。

 - 収集する対象（ログファイル名と項目名) <br>→ Windowsログ「セキュリティ」から以下の表の項目を取得します。
 - 収集する項目のデータ型 <br>→ 以下の表のデータ型の通りです。
 - 収集する項目についての「検索/（可視化するための）集計」可否 <br>→ 以下の表の通り、全項目とも「検索/集計」を実施します。
 - index名：logon_event.log

| 項目名 | field名 | データ型 | 検索<br>可否 | 集計<br>可否 | 備考 |
|:-:|:-:|:-:|:-:|:-:|:-:|
| 日付と時刻 | date | date | ○ | ○ |  |
| イベントID | event_id | short | ○ | ○ | 4桁の数値のためshort型を選択する。|
| ログオン<br>タイプ | log_on_type | short | ○ | ○ | 1～2桁の数値のためshort型を選択する。 |
| アカウント名 | account | keyword | ○ | ○ | ログ内の「ログオンが失敗したアカウント」<br>というブロック内の値を使う。 |
| アカウント<br>ドメイン | account_domain | keyword | ○ | ○ | ログ内の「ログオンが失敗したアカウント」<br>というブロック内の値を使う。 |
| ソース<br>ネットワーク<br>アドレス | network_address | ip | ○ | ○ |   |	 

---
上記を決めた上で、
続いてログ収集に必要になる環境構築に取り組んでいきます。
この取り組みでは12月末までに全3回のアウトプットを予定しています。
なお、次回アウトプットは12月中旬頃を予定しています。
Zephyr + STM32F769 Discovery Kit > SPI > CSをLにしたままにする > SPI_HOLD_ON_CSをつけてspi_write()

```txt:動作環境
Ubuntu 18.04 LTS
ボード: STM32F769 Discovery Kit (以下、STM32F769)
Zephyr 2.1.0-rc1
```

### 背景

- SRAM 23K256の通信をSPIで実装しようとしている
- [23K256の資料](http://ww1.microchip.com/downloads/en/DeviceDoc/22100F.pdf)によると
    - 8bit: Instruction (MOSI)
    - 16bit: Address (MOSI)
    - 8bit: Data Out (MOSI)
- 上記の通信をCSをLにしたまま行う必要がある

### CSをLにしたままにする > SPI_HOLD_CS

以下を見つけた。

- [SPI_HOLD_CS](https://docs.zephyrproject.org/latest/reference/peripherals/spi.html#c.SPI_HOLD_ON_CS)
- 使用例: [eswifi_bus_spi.c](https://github.com/zephyrproject-rtos/zephyr/blob/master/drivers/wifi/eswifi/eswifi_bus_spi.c#L253)
    - SPI_HOLD_CSを設定している例
    - [関連コメント](https://github.com/zephyrproject-rtos/zephyr/blob/master/drivers/wifi/eswifi/eswifi_bus_spi.c#L150)
        - spi_release()の前に記載あり

   
### 実装例（一部）

コードの一部を掲載する。
Note: この例ではMOSIに4バイトを送信し、MISOで2バイトの受信をする例にしている。23K256用のコードにはまだなっていない。
    
```
spi_cfg.operation = SPI_WORD_SET(8) | SPI_HOLD_ON_CS;
err = my_spi_write(spi, &spi_cfg, txbufs, 4, rxbufs, 0);
spi_cfg.operation = SPI_WORD_SET(8);
err = my_spi_read(spi, &spi_cfg, txbufs, 0, rxbufs, 2);
```

送信時にSPI_HOLD_ON_CSをつけてspi_write()しCSをLのままとする。
受信時にはSPI_HOLD_ON_CSをはずしてspi_read()しCSをHに戻す。

### ロジック

Analog Discovery 2で測定したロジックを掲載する。

4バイトの送信後に2バイトの受信をしているが、CSはLのままになっていることが分かる。

![Screenshot from 2019-12-01 21-38-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/34cce8d1-7d9b-e292-0b8d-039747d211cd.png)
開発環境と開発ツール&AWS

#開発環境とは
環境には大きく分けると４種類あり、各環境によって目的が異なる。
#開発ツールとは
開発を円滑に進めるために必要なソフトウェアパッケージこのこと。
#AWSとは
Amazon Web Serviceの略称でインフラのクラウドサービスを提供している。AWSではクラウド上にサーバを立てることができ、仮説サーバだけでなく、ネットワーク群も仮想で構築することができる。またセキュリティも細く設定することができる。
PHP基礎 Part1

# 概要
PHPの独学で学んだ内容をアウトプットしていく

## PHPとは
HTMLを動的に表示させ、サーバー側で処理を実行することに適した言語(見る人や時間に応じてテキストが変化する)
HTMLで記述したWebページは静的なコンテンツとなる = 逐一運用しない限り、いつどこで誰が見ても同じ内容となる

### PHPの用途
主にWeb系サービスの開発で使用されるプログラミング言語
ブログ、SNS、ECサイト、お問合せフォーム、各種サービスのログイン画面..etc

### PHPの書き方
HTMLにPHPのコードを埋め込んで書くことができる
他にも外部ファイルを呼び出す形式があるとのことだが、今回は省略。
尚、ファイル名は「〇〇.php」とする

### PHPの基礎文法と文字列の出力
PHPの文法の最低限満たす必要のあるルールは以下の2つ

1.開始タグと終了タグ
PHPは開始タグ__「<?php」__から始まり、__終了タグ「?>」__」で終える。

2.コードの末尾にセミコロン「;」を記述
コードの末尾に__セミコロン「;」__を書かないとエラーになる
※可読性を考慮してタブ、半角スペースを入れると尚良

これらを踏まえたものが以下のコードとなる

```php:index.php
<?php
  echo "Hello World"; //出力結果はHello World
?>
```
echoは文字列を出力する際の命令文である
文字列を出力する場合は、__ダブルクォーテーション「" "」かシングルクォーテーション「' '」__で文字列を挟むこと

### 計算結果の出力
簡単な計算結果(主に四則演算)についても、以下のように出力可能

```php:index.php
<?php
  echo 2 + 3; //出力結果は5
  echo 5 - 2; //出力結果は3
  echo 2 * 5; //出力結果は10
  echo 6 / 3; //出力結果は2
  echo 7 % 3; //出力結果は1(割り算の余り = 商)
?>
```

但し、計算式を文字列で囲うと計算式そのものが文字列として出力される

```php:index.php
<?php
  $money = 100;
  echo "2 + 3"; //出力結果は"2 + 3"
?>
```

## 次回
* データ型
* 変数
* その他
#Rails で 存在しない全てのパスへの GET / POST / PUT / PATCH / DELETE / OPTIONS リクエストで 404 NotFound を返すようにエラーハンドリングする

# 注意

結構怖い
非推奨

# 方法

routes.rb の **最下部** でこうだ
上の方に書くと優先マッチしてダークホールになってしまうかも

```rb
match '*path', to: 'errors#not_found', via: :all
```

一個ずつメソッドを書く場合はこう

```rb
  get '*path', to: 'errors#not_found'
  post '*path', to: 'errors#not_found'
  put '*path', to: 'errors#not_found'
  patch '*path', to: 'errors#not_found'
  delete '*path', to: 'errors#not_found'
  match '*path', to: 'errors#not_found', via: :options
```

# rspec でのテスト

こんなんで

```rb
require 'rails_helper'

describe 'not found path', type: :request do
  describe 'get' do
    subject { get "/path/to/not/existence/" }

    before { subject }

    it { expect(response.status).to eq 404 }
  end

  describe 'post' do
    subject { post "/path/to/not/existence/" }

    before { subject }

    it { expect(response.status).to eq 404 }
  end

  describe 'put' do
    subject { put "/path/to/not/existence/" }

    before { subject }

    it { expect(response.status).to eq 404 }
  end

  describe 'patch' do
    subject { patch "/path/to/not/existence/" }

    before { subject }

    it { expect(response.status).to eq 404 }
  end

  describe 'delete' do
    subject { delete "/path/to/not/existence/" }

    before { subject }

    it { expect(response.status).to eq 404 }
  end

  context 'options' do
    subject { process :options, "/path/to/not/existence/" }

    before { subject }

    it { expect(response.status).to eq 404 }
  end
end
```

多分これで行けるはず


# REf

[Railsの ActionController::RoutingError は ApplicationController での rescue_from で捕まえられない - Qiita](https://qiita.com/gaaamii/items/183a9a3091a1751d833a)

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2794








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
#Rails error handling :  routing not existence all path with request method GET / POST / PUT / PATCH / DELETE / OPTIONS and return 404 not found 

# Warning

do not use easy

# How

```rb
match '*path', to: 'errors#not_found', via: :all
```

or describe each request types

```rb
  get '*path', to: 'errors#not_found'
  post '*path', to: 'errors#not_found'
  put '*path', to: 'errors#not_found'
  patch '*path', to: 'errors#not_found'
  delete '*path', to: 'errors#not_found'
  match '*path', to: 'errors#not_found', via: :options
```

# rspec test example


```rb
require 'rails_helper'

describe 'not found path', type: :request do
  describe 'get' do
    subject { get "/path/to/not/existence/" }

    before { subject }

    it { expect(response.status).to eq 404 }
  end

  describe 'post' do
    subject { post "/path/to/not/existence/" }

    before { subject }

    it { expect(response.status).to eq 404 }
  end

  describe 'put' do
    subject { put "/path/to/not/existence/" }

    before { subject }

    it { expect(response.status).to eq 404 }
  end

  describe 'patch' do
    subject { patch "/path/to/not/existence/" }

    before { subject }

    it { expect(response.status).to eq 404 }
  end

  describe 'delete' do
    subject { delete "/path/to/not/existence/" }

    before { subject }

    it { expect(response.status).to eq 404 }
  end

  context 'options' do
    subject { process :options, "/path/to/not/existence/" }

    before { subject }

    it { expect(response.status).to eq 404 }
  end
end
```


# REf

[Railsの ActionController::RoutingError は ApplicationController での rescue_from で捕まえられない - Qiita](https://qiita.com/gaaamii/items/183a9a3091a1751d833a)

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2795








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Twitter のエゴサ結果を LINE WORKS のトークルームにチャットで通知する Bot

Twitter のエゴサ結果を LINE WORKS のトークルームにチャットで通知する Bot を作ってみましょう。

Microsoft Power Automate でコーディングなしで、サクッと作っちゃいます。


##Microsoft Power Automate のフロー作成

トリガーに  "Twitter" の "新しいツイートが投稿されたら" を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/118c0b95-385c-8d00-e38f-d18924758efe.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/07d8bc63-3daf-eec4-11be-bcb461cb1aeb.png)

エゴサ用のキーワードを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/81f4871a-4321-d13b-ad78-194fa42af26a.png)


チャットでトークルームに通知するアクションを追加。
アクションに "HTTP" の "HTTP" を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/c66d1a35-5fc1-af65-b90f-b04bc7847b0d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/106515fa-84ba-0cb0-97c2-bb3bb788309d.png)

LINE WORKS のトーク Bot API のメッセージ送信のドキュメントを参考に、以下のとおり HTTP アクションのパラメーターを設定します。

TITLE: メッセージ送信 (text)
URL: https://developers.worksmobile.com/jp/document/100500801?lang=ja

方法: POST
URI: https://apis.worksmobile.com/r/{API ID}/message/v1/bot/{botNo}/message/push
API ID と botNo は Developer コンソールで設定可能な値を確認します。

ヘッダー: 
Content-Type application/json; charset=UTF-8
consumerKey Developer コンソールの値
Authorization Bearer <トークンの文字列>

本文:
{
  "accountId": "user@example",
  "content": {
    "type": "text",
    "text": "@{triggerBody()?['TweetText']}\n by@{triggerBody()?['UserDetails']?['Id']}@{triggerBody()?['UserDetails']?['UserName']}"
  }
}
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/0c0d0660-1339-ae09-b72c-37b5a2ca6dd4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/c92623c0-0a39-e19e-68cf-c07c43133414.png)

## 動作確認

設定したキーワードに関連したツイートの内容が LINE WORKS のトークルームに送信されるのを確認します。
ぽちったので

# とりあえす、やりたいこと
1. 10本のプローブを出して温度測定（オーバーヒート対策）
 [DS18B20](https://www.maximintegrated.com/jp/products/sensors/DS18B20.html,"DS18B20")

2. GPS ロガー
 [NEO-7](https://www.u-blox.com/sites/default/files/products/documents/NEO-7_DataSheet_%28UBX-13003830%29.pdf, "NEO-7")

3. 姿勢表示
 [MPU-9250](http://www.invensense.com/wp-content/uploads/2015/02/PS-MPU-9250A-01-v1.1.pdf, "MPU-(@50A")

物が来たらやる予定。
css3のdropshadowが凄かった！！

# 輪郭に沿って影を付けたかった！

## box-shadowは駄目なの？？

SVGにbox-shadowを指定すると、想像とは違う出来上がりに:innocent:

<img width="120" alt="スクリーンショット 2019-12-01 20.45.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497005/d9290ba4-4fc7-98f3-3354-1d30610ed515.png">

```css
.icon-location-box {
  width: 100px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6);
}
```

## dropshadowを使ってみた！

内側にも影が付いた:relaxed:

<img width="170" alt="スクリーンショット 2019-12-01 20.52.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497005/2e7c94d0-3fa0-8821-2744-1ad87fe2fdec.png">

```css
.icon-location {
  width: 100px;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
}
```

## IE11は未対応？？？

[can I use](https://caniuse.com/#search=Filter%20Effects)に拠るとIE11は未対応の様です:scream:

またしてもIE11に足止めを食らうのか・・・。

ブラウザの対象範囲に拠っては使い所満載なので凄く良いプロパティだと思います（小並感）
「みなさんはどうやってプログラミングを学んできましたか？初めてのプログラミング言語や、きっかけはなんですか？」

#はじめに
質問・疑問 Advent Calendar 2019 1日目です。
まず、1日目ということで、まあ基本的なところから。

#いつ

ちなみに、僕は一番最初にプログラミングを始めたのは高校1年。
科学部物理班という部活で、プログラミングをする機会があったからです。

#科学部物理班
当時この部活では、

1.ロボット製作(顧問の生物の先生主導)
2.ゲーム製作したり遊んだり(先輩の主導)

が行われていました。

まず、先輩がVisualBasicでシューティングゲームを製作していたので、僕らもなにかゲームを作ってみたいなあとおもって、教えてもらったのがきっかけです。

#基本
当時、VisualBasicの入門書というと、やっぱりベーマガとかですかね。
まあ、N88とかF-BASICとかQ-BASICとかが多かった気がしますが。
割と当時はわからなくてあんま読んでなかった気がします。

やはり最初は誰かに教えてもらった方がいい気はします。
教えてもらった基本のプログラム。
Buttonを貼って、押したらイベントハンドラ出てきて、MessageBoxが出てくるとか。
Button押したら、Labelの色が変わるとか、背景の色が変わるとかすごくわかりやすかったです。

#発展
さて、基本的なコントロール動作は出来たわけですが、ゲームとなるとワケが違います。
まず描画です。

VisualBasicでPictureBoxやImageなどのコントロールをそのまま動かそうとすると、ちらつきます。
初めて買ったVB6の入門書がなんてやつだったか忘れたのですが、世界前史というゲームが付属されている書籍でした。
シミュレーションゲームだったので、ちらつきとか起きないわけです。

当時はそういう大事なところを教えてくれなかったりするわけです。
先輩に聞いたら、「Win32APIを使っている」とか今でいうダブルバッファリング(この言葉はしばらく知らなかったです。)のやり方を教えてもらいました。

そしてDirectX5をVBで使えるライブラリとかを経て、正式にVBでDirectXが使えるようになるわけです。

シューティングゲームとスパロボみたいなシミュレーションゲームを作っていました。

#状況
当時高校にパソコン教室はありませんでした。

顧問の先生が生物なので、理科講義室の後ろの棚にPCが隠してあり、1台はDOS専用、もう1台は魔改造されたPC-9821αでWin95が無理矢理動く状態になっていました。

ジョジョのシステム音とか、BM98とかも入ってました。
闘神都市2とか麻雀ゲームも。

で、そこでしかVBはできなかったわけです。
同級生はVB5を先に買ったのかな。
僕はPCは中学で親に泣きついて買ってもらったとおもいますが、しばらくはVB5CCEという体験版みたいなので練習していました。
その後、VisualStudio6Proを兄貴に買ってもらうわけですが(今考えると兄貴や親に申し訳ない・・・。)
VBのためだけにStudioを買ってもらうというね・・・。(ほんと申し訳ない・・・。)

ネットもしばらくはなかった(正確には兄のダイアルアップSo-netがあったが自由に使わせてもらえない。)のですが、映画とか野球見たいということで、ケーブルTVの導入が決まり、常時接続インターネットも同時にできるようになりました。同級生も同時期に始めたらしい。

そこからは平成ネット史にあるような感じでした・・・。
初代のB.G-STATIONのホームページを作ったのはその頃です。

#その他
実は、ゲームと並行して、顧問主導でロボットも作っていました。
RCカーを改造して、最初はMPLABアセンブラで制御していました。

その後、先生が「C言語をやらないか」ということでC言語で制御するという予定もありましたが、当時は難しそうに感じて、結局それは実現しませんでした。

今思うと、この時やっておけばなあという後悔はありますね。
このあと卒業し、1浪を経て大学に入学し、大学の授業でC言語を学び、AmusementMakersに入り、C++で再びゲーム製作に参画していくことになります。

#最後に
というわけで、質問・疑問といいながら、僕の答えを書いてきましたが、みなさんはどうでしょうか？どういうきっかけだったか思い出して、振り返ってみましょう。
Cmakeを使ってwxWidgetsアプリをbuild

wxWidgetsを利用したアプリをCmakeでWindowsのstaticビルドする

```cmd
c:\work\wxWidgets\minimal\build>cmake -G "Visual Studio 15 2017 Win64" -DwxBUILD_SHARED=OFF -DwxWidgets_ROOT_DIR=d:\wxWidgets-3.1.1 ..
```
https://docs.wxwidgets.org/trunk/overview_cmake.html  に記載あるがwxBUILD_SHARED=OFFにする。





## wxWidgets 3.1.3では失敗
[Release wxWidgets 3\.1\.3 · wxWidgets/wxWidgets](https://github.com/wxWidgets/wxWidgets/releases/tag/v3.1.3)では失敗する

Vs2019対応のようだがCmakeに失敗する。3.1.1だと成功する。

```cmd
c:\work\wxWidgets\minimal\build>cmake -G "Visual Studio 16 2019" -DwxBUILD_SHARED=OFF -DwxWidgets_ROOT_DIR=d:\wxWidgets-3.1.3 ..
-- Selecting Windows SDK version 10.0.18362.0 to target Windows 10.0.19023.
-- The C compiler identification is MSVC 19.23.28107.0
-- The CXX compiler identification is MSVC 19.23.28107.0
-- Check for working C compiler: C:/Program Files (x86)/Microsoft Visual Studio/2019/Professional/VC/Tools/MSVC/14.23.28105/bin/Hostx64/x64/cl.exe
-- Check for working C compiler: C:/Program Files (x86)/Microsoft Visual Studio/2019/Professional/VC/Tools/MSVC/14.23.28105/bin/Hostx64/x64/cl.exe -- works
-- Detecting C compiler ABI info
-- Detecting C compiler ABI info - done
-- Detecting C compile features
-- Detecting C compile features - done
-- Check for working CXX compiler: C:/Program Files (x86)/Microsoft Visual Studio/2019/Professional/VC/Tools/MSVC/14.23.28105/bin/Hostx64/x64/cl.exe
-- Check for working CXX compiler: C:/Program Files (x86)/Microsoft Visual Studio/2019/Professional/VC/Tools/MSVC/14.23.28105/bin/Hostx64/x64/cl.exe -- works
-- Detecting CXX compiler ABI info
-- Detecting CXX compiler ABI info - done
-- Detecting CXX compile features
-- Detecting CXX compile features - done
CMake Error at C:/Program Files/CMake/share/cmake-3.14/Modules/FindPackageHandleStandardArgs.cmake:137 (message):
  Could NOT find wxWidgets (missing: wxWidgets_LIBRARIES
  wxWidgets_INCLUDE_DIRS core base) (Required is at least version "3.1")
Call Stack (most recent call first):
  C:/Program Files/CMake/share/cmake-3.14/Modules/FindPackageHandleStandardArgs.cmake:378 (_FPHSA_FAILURE_MESSAGE)
  C:/Program Files/CMake/share/cmake-3.14/Modules/FindwxWidgets.cmake:990 (find_package_handle_standard_args)
  CMakeLists.txt:23 (find_package)


-- Configuring incomplete, errors occurred!
See also "C:/work/wxWidgets/minimal/build/CMakeFiles/CMakeOutput.log".

```
【Xi IoT連載シリーズ 第1回】Xi IoTのデモを作りたい

### <a href="https://konchangakita.hatenablog.com/">書いてみてから気づいたのですが、よくよく考えるとプログラミングのことは半分くらいしか書く予定がないのではてなブログへお引越し</a>

Xi IoTとは、Nutanixがここのところいろいろ手を広げつつある
ハイブリットクラウドプロダクト郡のひとつで
エッジコンピューティングという部類に所属するIoTプラットフォーム製品になります

今年のSBワールドからスタートして、最近国内のいろいろなイベントで露出を開始した
そうです知る人ぞ知るLEGOのアレです


<img width="400" alt="SBワールド" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530530/569c1fc2-7f1c-c561-af89-6ffad62a49de.png">
[10月のイベント時のLEGO]


NutanixがIoTってどこゆくねんって感じですが、
なによりも初めて.NEXTアナハイムの現地でこのLEGOデモ見たとき、思ったんです
「なんて展示映えするんだ！」、と

IoTもプログラミング、ラズパイもよく知らないストレージ出身のSEが取り組んだ奮闘記です
0バイトのファイルをfindコマンドで検索する

この記事は、[岩手県立大学AdventCalendar2019](https://qiita.com/advent-calendar/2019/ipu) 1日目の記事です。

昨年の[AdventCalendar2018](https://qiita.com/advent-calendar/2018/ipu) ではほとんど技術的なことを書かなかったので、今年はなるべく書きたいと思っている次第です。

さて、

```
はじまりは、どんなものでも小さい
```

と述べたのは、マルクス・トゥッリウス・キケロ（紀元前106年～紀元前43年）です。

たまたま知っただけなのでどういう背景の言葉なのかはわかりません。


小さいつながり（無理矢理）なのですが、すごく小さいファイルって探したくなるときありますよね？


例えば0バイトのファイル。

find コマンドは `-size` でサイズ指定ができるのでとても簡単です。

```
# カレントディレクトリ以下の 0バイトファイルを探す
$ find ./ -size 0
```

今回この記事を書くにあたって、念のためネット上を調べたら、 `-empty` というオプションで同等のことができるようでした。

```
$ man find
（中略）
-empty  True if the current file or directory is empty.
```

実際に試してみる。

```
$ echo -n '' > hoge
$ find ./ -empty
.//hoge
```

期待通りでした。

というわけで、知っている人からするとたいしたことの無い記事でしたが、「はじまりは、どんなものでも小さい」ので、今年のアドベントカレンダーが終わるころには大盛り上がりすることを期待しております。
Web開発勉強のためWordpressでポートフォリオサイトを開設するまで①

Ｗｅｂ開発を勉強するにあたり、まずは独学で下記のサイト・サービスを利用してみました。

・Progate
https://prog-8.com/
→言語の違いについては学べたが、もう少し難しいほうがいいと思いやめる。

・Ruby on Rails チュートリアル
https://railstutorial.jp/
→Rubyのバージョンの違いなど細かな違いのせいか、同様のコマンドを入力してもエラーが頻発。
いろいろ調べて解決するも、肝心のHerokuデプロイがどうしてもうまくいかず挫折。

あとは海外のサイトなので忘れましたが、言語別にFizzbuzzやらアルゴリズムを解くサイトを覗いて、アルゴリズムがわかっても初心者にすぐ実装できるスキルなぞあるはずもなく挫折。

ここまでで１か月ぐらいは消費したと思います。

その後、２か月ぐらいＱｉｉｔａを眺めて興味ありそうなワードはネットで調べて、みたいなことを繰り返してました。
ムダに知識だけが増えていって、典型的な「わかる」けど「できない」使えない人間への道を歩んでいますw

さすがに手を動かさないとマズいかなーと思い、かといって上記のように独学でやるのはムリかなと判断し、Udemyのオンライン講座に課金することを決意しました。
https://www.udemy.com/mobile/ipad/

Ｗｅｂ開発はWordpressやらrubyやらはオワコンで、時代はDjangoやらNode.jsだ！と３か月に渡るネットサーフィンで得た知識を参考に講座を探したんですが、あんまりよさげな講座（初心者がすぐにサイト公開できそうな講座）がなかったので、ノウハウが蓄積されてるであろうWordpress、rubyの講座を購入しました。

前置きが長くなりましたが、次回からはWordpressを使った講座のなかで詰まったところや、解決した方法について記事を書いていきたいと思います。
【TypeScript】マークダウン文字列をHTMLにパースする(GitHub Flavored Markdown)

# 使用するモジュール
- `marked`, `@types/marked`
  markdownをHTMLにパース

- `highlight.js`,`@types/highlight.js`
  コードのシンタックスハイライト部分をパース
  **`highlightjs`モジュールも存在しますが、別物なので間違えないように注意**

```bash
npm i marked @types/marked highlight.js @types/highlight.js
```

# サンプルコード

```typescript
import marked      from 'marked';
import highlightjs from 'highlight.js';

marked.setOptions({
  highlight: function(code, lang) {
    return highlightjs.highlightAuto(code, [lang]).value;
  },               // シンタックスハイライトに使用する関数の設定
  pedantic: false, // trueの場合はmarkdown.plに準拠する gfmを使用する場合はfalseで大丈夫
  gfm: true,       // GitHub Flavored Markdownを使用
  breaks: true,    // falseにすると改行入力は末尾の半角スペース2つになる
  sanitize: true,  // trueにすると特殊文字をエスケープする
  silent: false    // trueにするとパースに失敗してもExceptionを投げなくなる
});

const markdown: string = `
# Hello World

\`\`\`ruby
puts 'Hello World'
\`\`\`

<h1>Hello World</h1>
`

const html: string = marked(markdown)
console.log(html);
/* =>
 * <h1 id="hello-world">Hello World</h1>
 * <pre><code class="language-ruby">puts <span class="hljs-string">'Hello World'</span></code></pre>
 * <p>&lt;h1&gt;Hello World&lt;/h1&gt;
 * </p>
 */
```

# 参考
- [marked - npm](https://www.npmjs.com/package/marked)
- [highlight.js - npm](https://www.npmjs.com/package/highlight.js)
#17 Xcodeでアプリの向きを縦に固定する1例

#はじめに
個人のメモ程度の出来なのであまり参考にしないで下さい．


#環境
Xcode：11.2.1
Swift：5.1.2
2019/11



##part1
project名を選択し，`General`の`Deployment Info`の`Device Orientation`の`Portrait`のみを選択した状態にする．

<img width="908" alt="スクリーンショット 2019-12-01 午後8.33.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/fc67ed1f-b72f-62bf-8f6d-0df26829535c.png">
Visual Studio Code settings.jsonファイルでPathの指定が上手くいかなかったとき

# 問題

Visual Studio Codeでphpを使おうとしたところPathの指定をしろと言われたのでsettings.jsonファイル内にパスを入力したが、エラーが解消されない。

# 解決策

**編集前**

```ruby:settings.json
{
    "python.pythonPath": "(パス)\\pythonw.exe"
```

**編集後("," と "php.valiadate.executablePath: php.exeのパス"を追加**

```ruby:settings.json
{
    "python.pythonPath": "(パス)\\pythonw.exe",
    "php.valiadate.executablePath": "（パス）\\php-7.4.0-Win32-vc15-x64\\php.exe"
}
```

","で区切っていなかったためうまく読み込めていなかった模様