OmniAICreator/Qiita-1.07M huggingface dataset:
【JQuery】 基礎 HTML DOM操作 イベント 要素

#JQueryとは
Javascriptのライブラリで、JavaScriptで行えるほぼ全てのことを、JavaScriptよりも簡単におこなうことができます。
他にもJavascriptのフレームワークはには、「React」「AngularJS」「Vue.js」などあります。
#目次

+ JQueryをHTMLファイルに読み込む
+ HTML要素を取得する
+ HTMLを操作する
+ イベント
+ 要素の動作
+ each文
+ if文


###JQueryをHTMLファイルに読み込む
まず、JQueryを使えるようにするためにHTMLファイルのheadタグ内に追記します。

```:html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="./main.js"></script>
</head>
```
※ここで一つ注意点があるのですが、JQueryを読み込む際は、外部で読み込むscriptタグよりも上に記述しなければ動作しません。私は何度か下に記述して読み込まれなかった失敗をしたことがありますので気をつけてください。
###HTML要素を取得する
HTMLのセレクタを指定することで取得することができます。

```
$("セレクタ")
```
contentクラスをコンソールに出力するには、下記のように記述します。

```
$(function() {

  console.log($(".content"));

});
```
続いてよく使うセレクタは下記になります。
IDセレクタ

```
$("#IDセレクタ")
```
クラスセレクタ

```
$(".classセレクタ")
```
要素セレクタ(下記はh1タグ)

```
$("h1")
```
###HTMLを操作する

```
$("セレクタ").jQueryの命令();
```

```
$("セレクタ").jQueryの命令(引数);
```
##jQueryの命令

###イベント
まず、イベントの設定には onメソッド　を使用します。

```
.on("イベント"
```

```
$(function() {
  $("#title").on("イベント",function() {
    ここに処理を書く
  });
});
```
|イベント一覧|動作するタイミング|
|---|---|
|click|クリックされた時|
|dblclick|ダブルクリックされた時|
|mouseover|マウスが要素の上に乗った時|
|mouseout|マウスが要素から離れた時|
|keydown|キーが押された時|
|keyup|キーが離されたとき|
|change|入力内容が変更された時|
|submit|送信された時|
###要素の動作

```
$("#Button").on("イベント", function() {
    $("#title").show();
});
```

|コード|要素の動作|
|---|---|
|hide()|非表示にできる|
|show()|要素を表示できる|
|fadeOut()|要素がフェードアウトする(引数に時間を指定)|
|fadeIn()|要素がフェードインする(引数に時間指定)|
|append()|引数で指定したHTML要素を追加できる|
|remove()|指定したHTML要素を削除できる|
|addClass()|要素に引数で設定したクラスを追加できる|
|removeClass()|要素から引数で設定したクラスを削除できる|
|attr()|HTML要素の属性値を取得・変更|
|val()|フォームに入力された値を取得できる|
###each文

```
$(function() {
var array = [1,2,3,4,5];
 
$.each(array, function(i, value) {
   console.log(i + ': ' + value);
})
});
```
出力結果

```
0: 1
1: 2
2: 3
3: 4
4: 5
```
###if文

```
$(function() {
i = 0
a = 0
if( i = a ) {
  console.log("等しいです");
}else { 
  console.log('等しくありません');
}
});
```
flutter webのアプリをfirebase hostingで公開する

## 事前準備
flutter webを動かせるところまでは下記等を参考に

[flutter_web](https://github.com/flutter/flutter_web)
[flutter webでexampleを動かすまで(flutterインストール済みを想定)](https://qiita.com/hiko1129/items/efc20792016a22a7c88a)
[Flutter Webを動かしたときにつまづいたこと](https://qiita.com/Nkzn/items/402a29fe9bb517ce78aa)

flutter webが動かせる状態で、[tools-support-for-flutter-web-development](https://github.com/flutter/flutter_web#tools-support-for-flutter-web-development)を参考に新規プロジェクトを作成



## プロダクションビルド
web/assets/FontManifest.jsonとして下記を準備
~~これがないと動かない？っぽい~~存在してないよって怒られるだけ

```json
[
  {
    "family": "MaterialIcons",
    "fonts": [
      {
        "asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
      }
    ]
  }
]
```

下記でビルド

```
webdev build
```

ローカルで直接build/index.htmlを開いても動かない模様

![スクリーンショット 2019-05-08 20.02.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117867/5b29a5fd-1347-213c-170e-44df1e1abb84.png)

## firebase hosting準備
firebaseでプロジェクト作成後、下記を実行

```
firebase init
```

firebase hostingを選択して下記のように設定

```
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File build/index.html already exists. Overwrite? No
```

デプロイ

```
firebase deploy
```

無事表示された

![スクリーンショット 2019-05-08 20.18.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117867/3c1c8a64-b117-1617-75a4-f8d426c6d9f5.png)

リポジトリは[こちら](https://github.com/hiko1129/first_flutter_web)

## おまけ
### flutter webのアプリをgithub pagesで公開したやつ
https://hiko1129.github.io/first_flutter_web/

## 関連

[Flutter Web で Firestore を使う](https://qiita.com/hiko1129/items/73ea988df0c537657b10)を書きました。
VCIに1万5000文字以上のluaスクリプトを貼り付けるとString too longとエラーが出る


UnityのVCI Objectにluaスクリプトを記入する箇所があるのですが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150633/ac6a9cab-d2eb-e263-0427-d5676a4a52c3.png)
上記のSourceに一定量以上の文字をコピペで貼り付けると下記のエラーが発生します。

> String too long for TextMeshGenerator. Cutting off characters.
UnityEditor.EditorGUILayout:PropertyField(SerializedProperty, Boolean, GUILayoutOption[])
VCI.VCIObjectEditor:OnInspectorGUI() (at Assets/VCI/UniVCI/Editor/VCIObjectEditor.cs:90)
UnityEngine.GUIUtility:ProcessEvent(Int32, IntPtr)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150633/ad81f8e5-0e6d-f468-5cc6-697ff8203b58.png)

Sourceの最後のほうを見ると、どうやら全てコピペできていないように見えます。
# 対処法：何もしない

これは、文字数が多すぎてInspectorに全文を表示できませんというエラーです。
つまり、**表示できていないだけでコピペ自体は成功しています。**
気にせずそのままVCI化しちゃいましょう！！
Googlebotクローラが最新Chromeになった


Googleウェブマスター向け公式ブログに[The new evergreen Googlebot](https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html)という記事が公開されました。
[日本語版](https://webmaster-ja.googleblog.com/)にはまだありません。

# The new evergreen Googlebot

GooglebotはWebページを訪問してGoogle検索インデックスに登録するクローラです。
イベントやSNSでコミュニティから最も多く寄せられる要望は、Googlebotを最新のChromiumにしてくれというものでした。
今日、Googlebotが検索用にページをレンダリングする際に、最新のChromiumレンダリングエンジン(この記事の執筆時点では74)を使用していることをお知らせします。
今後、最新のWebプラットフォーム機能を確実にサポートしていくため、Googlebotは定期的にレンダリングエンジンを更新していきます。

## What that means for you

以前のバージョンと比較して、新しいGooglebotは1000以上の新機能をサポートしています。
・ES6以降のJavaScriptの新機能
・[遅延ロード](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#lazy_loading_images)を実現するIntersectionObserver
・[Webコンポーネント](https://developers.google.com/web/fundamentals/web-components/)v1のAPI

Googlebotのためにトランスパイラやpolyfillを使用しているかを確認し、そして今後もまだそれが必要かどうか確認してください。
まだいくつかの制限が存在します。
[JavaScript関連のトラブルシューティング](https://developers.google.com/search/docs/guides/fix-search-javascript)や、[SEOのビデオ](https://www.youtube.com/watch?v=wSwzfEn5-6A&list=PLKoqnv2vTMUPOalM1zuWDP9OQl851WMM9)を確認してください。

何かありましたら、[Twitter](https://twitter.com/googlewmc)や[フォーラム](https://support.google.com/webmasters/community/?hl=en&gpf=%23!forum%2Fwebmasters)で話すか、もしくは[コミュニティ](https://www.google.com/webmasters/connect/)に参加してください。


# 感想

色々と新機能を大量生産してくるわりに、肝心のクローラが未対応なせいで使用を躊躇するねじれ状況からようやく解放されます。
これまではずっと[Chrome41相当](https://developers.google.com/search/docs/guides/rendering)ということで[色々面倒だった](https://qiita.com/otakumesi/items/9dc8dbb1b66dd3e412f2)わけですが、今後はUAを見て出力を変更したりといった本末転倒な小細工はいらなくなることでしょう。

その結果[10%弱いるIE](https://netmarketshare.com/?options=%7B%22filter%22%3A%7B%22%24and%22%3A%5B%7B%22deviceType%22%3A%7B%22%24in%22%3A%5B%22Desktop%2Flaptop%22%5D%7D%7D%5D%7D%2C%22dateLabel%22%3A%22Custom%22%2C%22attributes%22%3A%22share%22%2C%22group%22%3A%22browser%2CbrowserVersion%22%2C%22sort%22%3A%7B%22share%22%3A-1%7D%2C%22id%22%3A%22browsersDesktop%22%2C%22dateInterval%22%3A%22Monthly%22%2C%22dateStart%22%3A%222019-04%22%2C%22dateEnd%22%3A%222019-04%22%2C%22pageLength%22%3A25%2C%22segments%22%3A%22-1000%22%7D)を排除するかどうかは要件次第ってことで。
kubectlやhelmコマンドのバージョンを切り替える

`helm`コマンドはクライアント側とサーバー側のバージョンが異なると上手く動かないことがあります。特にIBM Cloud Privateはv3.1.2でも`helm`のバージョンがv2.9.1と古いです。`kubectl`は`helm`に比べ寛容なのであまり困らないですが、サーバーとクライアントでバージョンが一致していた方が望ましいと思います。

`kubectl`や`helm`のバージョンを簡単に切り替えるよいツールがあったら教えて欲しいのですが、適当に探した限りみつからなかったので、適当なシェルスクリプトでシンボリックリンクで切り替えることにしました。環境はMacです。他によいやり方があったら教えて下さい。

## 使い方

各バージョンのバイナリをダウンロードして`/usr/local/bin`に置いておきます。

```shell-session
$ ls -l /usr/local/bin/helm*
lrwxr-xr-x  1 sotoiwa  admin        39  5  8 13:32 /usr/local/bin/helm -> /usr/local/bin/helm-v2.9.1-darwin-amd64
-rwxr-xr-x@ 1 sotoiwa  staff  41593416  1 23 06:29 /usr/local/bin/helm-v2.12.3-darwin-amd64
-rwxr-xr-x  1 sotoiwa  admin  34396224  5 15  2018 /usr/local/bin/helm-v2.9.1-darwin-amd64
$
```

スクリプト（後述）を実行します。

```
$ switch-helm.sh
Current helm version:
Client: &version.Version{SemVer:"v2.9.1", GitCommit:"20adb27c7c5868466912eebdf6664e7390ebe710", GitTreeState:"clean"}

Available helm version:
/usr/local/bin/helm-v2.12.3-darwin-amd64
/usr/local/bin/helm-v2.9.1-darwin-amd64

/usr/local/bin/helm-v2.12.3-darwin-amd64 <- use this version? (y/n/a):n
Skip!

/usr/local/bin/helm-v2.9.1-darwin-amd64 <- use this version? (y/n/a):y
helm version changed!

Current helm version:
Client: &version.Version{SemVer:"v2.9.1", GitCommit:"20adb27c7c5868466912eebdf6664e7390ebe710", GitTreeState:"clean"}

Done!
$
```


## スクリプト

シンボリックリンクを張り替えるだけのスクリプトです。`COMMAND`変数を変えれば`kubectl`でも同じことができると思います。

```bash:swicth-helm.sh
#/bin/bash

set -eu

COMMAND=helm

# コマンドがシンボリックリンクではない場合は終了
if [ ! -L /usr/local/bin/${COMMAND} ]; then
  echo ${COMMAND} is not symbolic link
  exit 1
fi

# 現在のバージョンを表示
echo "Current ${COMMAND} version:"
/usr/local/bin/${COMMAND} version --client
echo ""

# 利用可能なバージョンを表示
echo "Available ${COMMAND} version:"
find -f /usr/local/bin/${COMMAND}* -type f
echo ""

# シンボリックリンクではないファイルについて繰り返し
for v_command in $(find -f /usr/local/bin/${COMMAND}* -type f)
do
  while true
  do
    read -p "${v_command} <- use this version? (y/n/a):" yn
    case $yn in
      [yY]*)
        rm -f /usr/local/bin/${COMMAND}
        ln -s ${v_command} /usr/local/bin/${COMMAND}
        echo "${COMMAND} version changed!"
        echo ""
        echo "Current ${COMMAND} version:"
        /usr/local/bin/${COMMAND} version --client
        echo ""; echo "Done!"; exit ;;
      [nN]*)
        echo "Skip!"; echo ""; break ;;
      [aA]*)
        echo "Abort!"; echo ""; exit ;;
    esac
  done
done
echo "Done!"

```

本当は最初に一覧を表示して数字とかで選ぶようにしたかったのですが、そのように作るやり方がすぐにわからなかったのでぐるぐる回すようにしました。
django開発で肥大化したview.py を複数ファイルに分割する方法

Djangoフレームワークを使って開発する中で、得た知見やクリティカルな情報が見つからなかったものを小ネタ的に書きます。

## 環境
* Python：3.7.2
* django：2.1.5

## 課題
djangoを用いたWebアプリケーション開発をしていくなかで、1つのview.pyに複数画面の処理(3,4画面ぐらい)を詰め込んだくらいから単純に、
　－コード全体が読みづらい
　－複数画面の処理が書かれているので、機能追加がしづらい
などの問題が出たので「view.pyを複数ファイル分割して管理しよう」という方針を取りました。
## 構成イメージ
【実施前のフォルダ構成】
djangoプロジェクトの自動作成デフォルトの構成

```
プロジェクト名
├ config .. 設定ファイルを管理するディレクトリ
├ static .. 静的ファイルを管理するディレクトリ
└ application .. アプリケーション関連ファイルを管理するディレクトリ
　　├ __init__.py
　　├ admin.py
　　├ apps.py
　　├ models.py
　　├ tests.py
　　├ urls.py
　　└ views.py
```
【実施後のフォルダ構成】
viewディレクトリを作成し、その配下に機能単位にPythonファイルを作成する。

```
プロジェクト名
├ config .. 設定ファイルを管理するディレクトリ
├ static .. 静的ファイルを管理するディレクトリ
└ application .. アプリケーション関連ファイルを管理するディレクトリ
　　├ __init__.py
　　├ admin.py
　　├ apps.py
　　├ models.py
　　├ tests.py
　　├ urls.py
　　└ views★ .. 本記事の箇所。views.pyを分割したファイルを格納
　　　├ __init__.py
　　　├ func1.py
　　　├ func2.py
　　　└ func3.py
```
### 対処ステップ1. viewsディレクトリの作成
分割したPythonファイルを格納・管理するためのディレクトリをapplication直下に作成します。 
### 対処ステップ2. viewsフォルダに`__init__.py`を作成
viewsディレクトリに、`__init__.py`を作成します。
とりあえずファイル分割をするのであれば、空の`__init__.py`を作成して大丈夫です。
### 対処ステップ3．views.pyファイルを分割
view.pyを定義した単位で分割し、新規ファイルを作成します。私は以下のルールで管理しました。(一例です)

* 「画面単位」に処理を分割
 * 例えば、「ログイン画面」があった場合、`login.py`というファイルを作成し、ログイン画面に関連する処理を集約
* 複数画面で使われる処理は、共通処理として分割

### 対処ステップ4．呼び出されている設定ファイルの修正
例えば、「urls.pyの画面遷移の呼び出し先の変更」など、ファイル分割に伴う指定変更などあれば対処します。
urls.pyには以下のように書けば呼び出せます。

```
from .views import func1
from .views import func2
from .views import func3

urlpatterns = [
    path('', funct1.[クラス/関数名], name='[任意の文字列]'),
    path('/view2', funct2.[クラス/関数名], name='[任意の文字列]'),
    path('/view3', funct3.[クラス/関数名], name='[任意の文字列]')
]
```

## 参考文献
[Python `__init__.py`の書き方](https://qiita.com/PYTHONISTA/items/2dcabc93365a62397afe)
プログラミング学習記録81〜アクセス数がちょっとずつ上がっている〜

##今日やったこと
- ドットインストール「詳解JavaScriptオブジェクト編」復習
- ドットインストール「詳解JavaScriptDOM編」復習

基礎文法を復習しました。
オブジェクト編を３倍速、DOM編を２倍速で復習しました。

オブジェクト編に関してはほぼ理解したので、復習はこのぐらい（３周ぐらい）でいいかなと思います。

DOM編も２周やってみてだいぶ理解が深まりました。

HTMLで書かれたタグやCSSのプロパティが操作できるメリットは、この講義だけでは分かりづらいですが、とにかくどんな要素でも加えたり、削除したり等の操作ができることがわかりました。

＃１５のpreventDefault()以外はなんとなくわかりました。

あとはドットインストールにあるミニアプリ、ミニゲームを作っていけば少しづつ理解できると思います。

なので、基礎文法のがっつりやる復習は、あとはDOM編だけでいいのかなと思います。

プログラミングの学習は基礎（ふわっと）→実践→基礎（必要があればがっちり）という感じが最も効率がいいのはわかっているので、JavaScriptに関してもそんな感じで進めていく予定です。

余談ですが、全然大したこと書いてないこんな記事でも、日に日にアクセス数が上がっています。
この学習記録を書き始めた当初は「こんな記事書いて意味あるのかな…」と思ったこともありましたが、自分が思ってもいないところにちょっと需要があったみたいです。

文章を書く練習にもなりますし、プログラミング学習のアウトプットにもなるので、プログラミング学習をしている方はやったほうがいいですね。

ということで、明日からも引き続き頑張ります。

おわり
AWSのSDKからアクション一覧を取得する

# tl;dr

aws公式ドキュメントにはアクションの一覧が無い。
サービス毎に必要なAPIを検索し実行するのが面倒なのでSDKから一覧を取得する。

# コード

* botocoreから取得
https://gist.github.com/7bb1fa050d4399a8a4921cb773252586

* aws-sdk(nodejs)から取得
https://gist.github.com/e3006bcf30d18bd3fd3efb990b3a858a

# 雑感
iamのポリシーを整備するのに使えそうかなと思って一覧化したが、サービスプレフィックスが揺れているので機械的に一覧化は難しい。

sdk毎に差分が大きいのでコミュニティ規模によりそう。

公式が一覧化してくれ。
#Mac で絵文字の入力が面倒臭すぎるのでよく使うものは #Alfred のSnippetに登録しておいたら良いかもしれない

- Command + Control + Space で使える標準の絵文字パレットは使い勝手は悪くないけど、とにかく動作が遅い
- Rocket とか使ってみたけどイマイチ
- 日本語入力からの絵文字変換もなかなか厄介

# これだよ、これ

![image](https://user-images.githubusercontent.com/13635059/57360511-4e687a80-71b5-11e9-9535-39cc230ad4f0.png)

# 複数個登録しておけば、一気に絵文字をペーストしたりもできるし

![image](https://user-images.githubusercontent.com/13635059/57360618-8374cd00-71b5-11e9-9124-5a52c800fbaf.png)

# ところで世界に絵文字って

5種類ぐらいしか要らないような気もする

👍
🤔
🎉
🙇‍♂️
🙌

# Export file


https://github.com/YumaInaura/dotfiles/raw/b856b20124681627e8473d961c07b00abe5e55ef/AlfredSnippets/emoji.alfredsnippets

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
[Ruby] String#split でセパレータも結果に含める

# 問題

```rb
'mono,di,tri'.split(',') #=> ["mono", "di", "tri"]
```

この結果を `["mono", ",", "di", ",", "tri"]` にするにはどうしたらよいか？

# 解答

```rb
'mono,di,tri'.split(/(,)/) #=> ["mono", ",", "di", ",", "tri"]
```

[String#split](https://docs.ruby-lang.org/ja/latest/method/String/i/split.html) のドキュメントに

> split(sep = $;, limit = 0) -> [String]
> sep が正規表現で、かつその正規表現に括弧が含まれている場合には、 各括弧のパターンにマッチした文字列も配列に含まれます。 括弧が複数ある場合は、マッチしたものだけが配列に含まれます。

と記載されている。今日まで知らなかった小ネタ :ghost:
ページにCSS Gridを複数配置するときにハマった点（IE11）

久々に`display: grid;`を使ったときにハマった。

# 基本のIE対応

とても参考になった記事：
[Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年〜2018年）](https://qiita.com/tonkotsuboy_com/items/bce73685cd6b1ea511dc)
[CSS Gridのgap（grid-gap）が遂にIE 11でも再現できるように。Autoprefixerが待望のアップデート](https://qiita.com/tonkotsuboy_com/items/10fc250ac579a32e9ee9)

前提としてIEに対応するならautoprefixerは導入すべきということがわかるかと思います。
記事に書いてあることを実践したら基本ハマらないはずです。
私は中途半端に読んで、`grid-template-rows`,`grid-template-column`,`grid-template-areas`を使用していたせいで小一時間悩みました。しっかり読もう:innocent:
`-ms-grid-columns`,`-ms-grid-rows`にgapの値が挟まってくるので、よく考えたら当然ですね。

# 複数のGridBoxを配置するときのIEでの注意点

`display: grid;`のボックスが2つあるとします。

```html:html
<div class="gridbox gridbox-01">
    <div class="griditem-A"></div>
    <div class="griditem-B"></div>
    <div class="griditem-C"></div>
    <div class="griditem-D"></div>
    <div class="griditem-E"></div>
</div>

<div class="gridbox gridbox-02">
    <div class="griditem-a"></div>
    <div class="griditem-b"></div>
    <div class="griditem-c"></div>
    <div class="griditem-d"></div>
    <div class="griditem-e"></div>
</div>
```

## 共通でgapが使えない

```css:css
.gridbox {
    gap: 20px;
}
```
このように2つのGridBoxに共通のgapを適用しようとしますが、適用されません。

```css:css
.gridbox-01 {
    gap: 20px;
}
.gridbox-02 {
    gap: 20px;
}
```
それぞれ書く必要があります。

## エリア名の重複はボックス外にも影響を及ぼす

一つのボックス内でエリアの概念は完結していると思っていたのですが、
下記のように書くと`<div class="gridbox-01">`と同様にアイテムが配置されてしまいます。

私の場合、【B】のように占めてるエリアが一緒の部分があり、
一部は正常に表示されていたのでめっちゃ悩みました…

```css:css
.gridbox-01 {
    grid-template: 'A B B' 1fr 'C D .' 1fr '. D E' 1fr / 1fr 1fr 1fr;
}
.gridbox-01 .griditem-A { grid-area: A; }
.gridbox-01 .griditem-B { grid-area: B; }
.gridbox-01 .griditem-C { grid-area: C; }
.gridbox-01 .griditem-D { grid-area: D; }
.gridbox-01 .griditem-E { grid-area: E; }

.gridbox-02 {
    grid-template: 'A B B' 1fr 'A C D' 1fr 'A C E' 1fr / 1fr 1fr 1fr;
}
.gridbox-01 .griditem-a { grid-area: A; }
.gridbox-01 .griditem-b { grid-area: B; }
.gridbox-01 .griditem-c { grid-area: C; }
.gridbox-01 .griditem-d { grid-area: D; }
.gridbox-01 .griditem-e { grid-area: E; }


```

単純に別のエリア名にすると、解決です。

```css:css
.gridbox-01 {
    grid-template: 'A B B' 1fr 'C D .' 1fr '. D E' 1fr / 1fr 1fr 1fr;
}
.gridbox-01 .griditem-A { grid-area: A; }
.gridbox-01 .griditem-B { grid-area: B; }
.gridbox-01 .griditem-C { grid-area: C; }
.gridbox-01 .griditem-D { grid-area: D; }
.gridbox-01 .griditem-E { grid-area: E; }

/* 今回は小文字に変更 */
.gridbox-02 {
    grid-template: 'a b b' 1fr 'a c d' 1fr 'a c e' 1fr / 1fr 1fr 1fr;
}
.gridbox-01 .griditem-a { grid-area: a; }
.gridbox-01 .griditem-b { grid-area: b; }
.gridbox-01 .griditem-c { grid-area: c; }
.gridbox-01 .griditem-d { grid-area: d; }
.gridbox-01 .griditem-e { grid-area: e; }

```

ちなみに、レイアウトはこんな感じになります。
`grid-template`での指定方法、とてつもなく縦横わかりづらいな...？:innocent:

![grid.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279880/3af38d0b-8f10-9b9c-4a1c-edce96b3efaf.png)

# 感想
* autoprefixerがあるだけ楽だけど、そもそもIE対応がなければなぁ...
pythonでパワーポイントを修正する

#はじめに
訳あってwebページの表（予定が書かれている）をパワーポイントに書く作業があります。
しかも2ページくらいあるから、転記作業だけでも結構時間がかかります。
そこでwebサイト→パワーポイントに転記作業をpythonで自動化します。
したかった…

#環境
- mac
- python 3.7.3

#コード

よみこみ

```python:todayPP.py

# coding: UTF-8

from pptx import Presentation
from pptx.util import Pt
from pptx.enum.text import PP_ALIGN
from bs4 import BeautifulSoup
import configparser
import requests
import feedparser
import datetime
import csv

```

パワポつくるところのメイン処理

```python:todayPP.py

# パワーポイントを生成
def createPP(iniFile):
    prs = Presentation(iniFile.get('settings', 'IN'))

    # htmlから情報を取得
    inputTable = getInputTable(iniFile)

    # 表を変更
    editPPTable(iniFile, prs.slides[0].shapes[0].table, prs.slides[1].shapes[1].table, inputTable)

    # ファイルを保存
    prs.save(iniFile.get('settings', 'OUT') + createFileName() + '.pptx')

```

htmlから情報を取得するところ。一旦保存したやつを見に行ったけど、selenium使って直で見に行ってもいいかも。

```python:todayPP.py
# データ元の情報を取得
def getInputTable(iniFile):

    # 保存したhtmlを取得
    with open(iniFile.get('settings', 'HTML'), encoding="shift_JIS", errors='ignore') as f:
        html = f.read()

    #要素を抽出
    soup = BeautifulSoup(html, 'lxml')

    # テーブルを指定
    return soup.findAll("table")[0]

```

パワポの表を修正するところ。2ページあるのでtabel1、table2に分けている。


```python:todayPP.py

# パワーポイントのテーブルを修正
def editPPTable(iniFile, table1, table2, inputTable):
    # 要素を取得
    tdList = inputTable.findAll("td", attrs = {"class": "p11pa2"})

    # 設定に必要なcsvを取得
    directory = getDirectory(iniFile.get('settings', 'CSV'))

    for td in tdList:

        # 行番号を取得。なければ飛ばす
        if directory[td.text[:3]][1] != '':
            rowNum = int(directory[td.text[:3]][1])

            contents = td.parent.findAll("td", attrs = {"class": "p11"})
            for i,content in enumerate(contents):

                # テーブル番号、列番号を設定
                if directory[td.text[:3]][2] == '1':
                    changeTable = table1
                    columnNum   = 2 + i

                else:
                    changeTable = table2
                    columnNum   = 1 + i

                # テキストを設定
                changeCell = changeTable.cell(rowNum, columnNum)
                changeCell.text = changeStr(content.get_text('.').split('.'))

                # レイアウトを修正
                changeLayout(changeCell, 10)

# セルのフォントサイズを変更して、中央揃えにする
def changeLayout(cell, size):
    for paragraph in cell.text_frame.paragraphs:
        for run in paragraph.runs:
            run.font.size = Pt(size)

        # 中央揃えにもする
        paragraph.alignment = PP_ALIGN.CENTER

```

HTML表からpptx表への付け合せについては、CSVで設定取得を行いました。
1列目：検索コード
2列目：見出し（これは使わなかった）
3列目：どの行か
4列目：どの表か

```python:todayPP.py
# CSVを取得
def getDirectory(csvPath):

    directory = {}

    with open(csvPath, 'r') as f:
        reader = csv.reader(f)

        for row in reader:
            directory[row[0]] = [row[1],row[2],row[3]]

    return directory

```

#結果

なんとかいきましたが、以下問題は残る・・・・

- 表が左詰めになってしまった
- 要素直指定。検索かけにいくようにしたい

でもフォントサイズも変更できたし、中央そろえにできてよかった。
あと転記作業から開放されて超ハッピー

## github
https://github.com/nag8/todayPowerPoint
画像処理100本ノックC言語で挑戦してみる　＃１

#Q.1. チャネル入れ替え
>画像を読み込み、RGBをBGRの順に入れ替えよ。

|入力|出力| 
|:-----------------:|:------------------:|
|![imori.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333871/4f63e9f0-85ea-f418-5850-e2229a19c1d6.jpeg)|![answer_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333871/8d1640a3-ad74-f68f-d04d-c06de4feb544.jpeg)|


#回答
ピクセルの値を入れ替える部分のコードです

```c:ex1.c
int array = 0;
for(int i = 0; i < height; i++){
    for(int j = 0; j < width*3-2; j = j+3){
        array = image[i][j+2];
        image[i][j+2] = image[i][j];
        image[i][j] = array;
    }
}
```


#解説
RGBの3つの値はそれぞれ２次元配列に格納されていて、3つが横並びになっています。
今回はRGBをBGRの順に入れ替えるので、3つのうち頭とお尻の値を入れ替えれば良いわけです。
したがって、まずは3つ目の値（Bの値）を新しく用意した変数arrayに避難させておいて、１つ目の値（Rの値）で上書きします。この操作でRGBがRGRとなっています。
次に避難させておいたBの値を１つ目の値に上書きします。この操作でRGRがBGRとなりました。

２重ループを回していますが、入れ替えは3つ１組で行いますので、内側のfor文の変化式は2つ飛ばしになっています。

#完成したプログラム（全文）
```c:ex1.c
#include <stdio.h>
#define N 256

int main(void) {
    FILE *infp;
    FILE *outfp;
    char magic[64];
    char str[256];
    int width;
    int height;
    int max;
    char readline[N] = {'\0'};

    infp = fopen("../imori.ppm", "r");
    
    //magic
    fgets(magic, N, infp);
    //width, height
    int num[4];
    for(int i = 0; i < 2; i ++){
        fscanf(infp, "%d", &num[i]);
    }
    width = num[0];
    height = num[1];
    //max
    fscanf(infp, "%d", &max);
    //image
    int image[height][width*3];
    for(int i = 0; i < height; i ++){
        for(int j = 0; j < width*3; j ++){
            fscanf(infp, "%d", &image[i][j]);
        }
    }

    outfp = fopen("imori.ppm", "w");

    fprintf(outfp, "%s", magic);
    fprintf(outfp, "%d ", width);
    fprintf(outfp, "%d\n", height);
    fprintf(outfp, "%d\n", max);

    int array = 0;
    for(int i = 0; i < height; i++){
        for(int j = 0; j < width*3-2; j = j+3){
            array = image[i][j+2];
            image[i][j+2] = image[i][j];
            image[i][j] = array;
        }
    }

    for(int i = 0; i < height; i ++){
        for(int j = 0; j < width*3; j ++){
            fprintf(outfp, "%d ", image[i][j]);
        }
        fprintf(outfp, "\n");
    }
    return 0;
}
```

#リンク
[画像処理100本ノックを作ったった](https://qiita.com/yoyoyo_/items/2ef53f47f87dcf5d1e14)
[画像処理100本ノックC言語で挑戦してみる　イントロダクション](https://qiita.com/HirosuguTakeshita/items/259b82182dab3dcd273c)
MACでDocker(docker-compose)を使用してローカルで使用するgitlabを起動

MAC上でdocker-composeを使用してローカルで使用するgitlabを起動(備忘)

#環境
macOS 10.14.4
Docker version 18.09.2, build 6247962
docker-compose version 1.23.2, build 1110ad01 (docker同梱)

#参照
[Install GitLab using docker-compose (公式)](https://docs.gitlab.com/omnibus/docker/#install-gitlab-using-docker-compose)

#docker-compose.yml
another docker-compose.yml exampleを編集して使用


```yaml:docker-compose.yml
---
version: '3'
services:
  web:
    image: 'gitlab/gitlab-ce:latest'
    restart: always
    hostname: localhost
    environment:
      GITLAB_OMNIBUS_CONFIG: |
        external_url 'http://localhost:8929'
        gitlab_rails['gitlab_shell_ssh_port'] = 2224
    ports:
      - '8929:8929'
      - '2224:22'
    volumes:
      - /Users/Shared/gitlab/config:/etc/gitlab
      - /Users/Shared/gitlab/logs:/var/log/gitlab
      - /Users/Shared/gitlab/data:/var/opt/gitlab
```
編集箇所

- hostnameとexternal_urlをlocalhost(127.0.0.1)を使用する様に編集
- volumes:における/srv/gitlabを、MAC環境に合わせて/Users/Sharedに編集

#起動

```
$ ls
docker-compose.yml

$ docker-compose up -d 
Pulling web (gitlab/gitlab-ce:latest)...
latest: Pulling from gitlab/gitlab-ce
7e6591854262: Pull complete
089d60cb4e0a: Pull complete
9c461696bc09: Pull complete
45085432511a: Pull complete
fe923449954f: Pull complete
f7944584e435: Pull complete
47472ef1aa19: Pull complete
80d72d7c3c00: Pull complete
bb2031d6299d: Pull complete
7b6ae18e4081: Pull complete
Creating gitlab-docker_web_1 ... done

$ docker-compose ps
       Name               Command               State                                       Ports                            
-----------------------------------------------------------------------------------------------------------------------------
gitlab-docker_web_1   /assets/wrapper   Up (health: starting)   0.0.0.0:2224->22/tcp, 443/tcp, 80/tcp, 0.0.0.0:8929->8929/tcp

$ docker images gitlab/gitlab-ce:latest
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
gitlab/gitlab-ce    latest              17d5117a2e37        6 days ago          1.76GB
```

#接続
http://localhost:8929 に接続すると、Gitlabのrootパスワード設定画面が表示される。設定し、改めてrootでloginする。
あとはユーザーを作成し、ssh公開キーを登録するなど普通に使用可能。
プロジェクトは ssh://git@localhost:2224/<ユーザー名>/<プロジェクト名>.git などとなる。

#停止、除去

```
$ docker-compose stop 
Stopping gitlab-docker_web_1 ... done

$ docker-compose rm -f
Going to remove gitlab-docker_web_1
Removing gitlab-docker_web_1 ... done
```

なお、設定やプロジェクトなどは /Users/Shared/gitlab 下に残っているので、再び docker-compose up -d とすることで、再起動可。

```
$ docker-compose up -d 
Creating gitlab-docker_web_1 ... done
```
URLに接続できるまでは若干時間が掛かる。

#設定変更
設定ファイルを使用する場合、/Users/Shared/gitlab/config/gitlab.rbを編集後、docker-compose stop; docker-compose up -d

#アップデート

[Update GitLab using Docker compose (公式)](https://docs.gitlab.com/omnibus/docker/#update-gitlab-using-docker-compose)

```
$ docker-compose pull 
Pulling web ... done

$ docker-compose up -d 
Recreating gitlab-docker_web_1 ... done
```
HP作成~webサーバー契約から公開まで~

ホームページ作成をローカルで作成した後、インターネット上に公開する流れを説明します。
レンタルサーバーを借りたあとどうしたらいいの？って人におすすめです。

#レンタルサーバー契約
ウェブサイトを公開するには、インターネット上にサーバーを用意する必要があります。無料で利用できるサーバーもありますが、本格的なサイト運営を行う場合は有料のレンタルサーバーを契約することが望ましいです。無料であれば、「[xserver](https://www.xfree.ne.jp)」、有料であれば、「[さくらインターネット](http://www.sakura.ne.jp)」や「[ロリポップ](http://lolipop.jp)」などが人気です。

#ファイル転送ソフトのインストール
ファイル転送ソフトには様々な種類がありますが、今回はWindowsでもmacでも使用することができる「[FileZilla](https://filezilla.softonic.jp/)」をベースに説明したいと思います。

#実際に公開してみる
サイトを公開するには、Webサーバー上にローカルで作成したサイトを転送する必要があります。
FileZillaを起動して、画像に示すような、左上の部分に必要な情報を入力します。
<img width="900" alt="スクリーンショット 2019-05-08 18.42.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406018/243dd724-d2db-cc08-fca7-82363a4e6d14.png">

必要な情報は以下に示します。

- レンタルサーバーのホスト名
- ユーザー名(取得したドメイン名)
- パスワード(レンタルサーバーを契約した際に設定)
- ポート番号(FTPの場合21)

接続できると以下のような画面になるので、Webサーバーにファイルを転送する。
<img width="1440" alt="スクリーンショット 2019-05-08 18.55.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406018/dfeaaff1-4f0e-d545-064b-89dfab42b756.png">

ファイルを転送したら、実際にサイトにアクセスしてみる。
ブラウザで、http://アカウント名で検索して確認してみましょう。

#最後に
今回はHPを作成後、レンタルサーバーの契約をし実際にHPを公開する手順の説明をしました。
はじめての投稿でまだ未熟ですが読んでいただきありがとうございました。
※ここがわかりにくいなどご意見いただけると嬉しいです。
[Google I/O 2019] LiveData を Kotlin-Coroutineと一緒に使う

# 背景
Google I/O 2019で発表されたLiveDataをKotlin-Coroutineと一緒に使う方法が今の悩みにジャストフィットしてしまったので、早速使う。

## 状況：Roomからのfetchをコルーチンで行いたい

- ある情報を取ってくるRepositoryがある。これは以下のような機能を持っている。
    - Roomに値が保存されていない場合はAPIからデータを取得する。
    - Roomに値が保存されていて、かつ最後に取得した日時から１時間過ぎていればAPIからデータを取得する
    - それ以外の場合はRoomから値を取得する
    - APIから取得した場合はRoomにまず保存し、その後RoomからLiveData(Paging)を返す

この時RoomのLiveData連携を利用しようとすると、以下のように書いておきたい。

```kotlin:TestViewModel.kt
class TestViewModel(private val repository: Repository) : ViewModel() {
     val liveData = repository.fetch()
}
```

しかしrepositoryはAPI通信を伴うためワーカースレッドで動作させる必要がある。そのためどうにかしてコルーチンを使いたい。

# build.gradleを設定する

利用にはlivedata-ktx:2.2.0-alpha01(2019/5/8時点)が必要。

```gradle:build.gradle
    implementation "androidx.lifecycle:lifecycle-extensions:2.2.0-alpha01"
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.2.0-alpha01"
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.2.0-alpha01"
```

# 実装

以下のように実装する。

```kotlin:TestViewModel.kt

class TestViewModel(private val repository: Repository) : ViewModel() {

    var List: LiveData<List<Data>> = liveData(context = Dispatchers.IO, timeoutInMs = 3_000L)  {
        emitSource(repository.fetch()) // 今回はRoomとLiveDataが連携しているため最初から戻りがLiveData.その場合はemitSource()を利用する
    }

    class Factory(private val repository: Repository) : ViewModelProvider.NewInstanceFactory() {
        override fun <T : ViewModel> create(modelClass: Class<T>): T {
            return TestViewModel(repository) as T
        }
    }
}
```

コメントにも記載しているが、RoomがLiveData連携している場合はfetch時にLiveDataが返却される。それをemitする場合はemitSource()を利用する。

なお、emitSourceはMainThreadで動いてくれる模様。
以下はliveData()が返却するLiveDataScopeの実装部分だが、coroutineContextのDispatchersがMainになってる。

```kotlin:LiveDataScopeImpl.kt

internal class LiveDataScopeImpl<T>(
    internal var target: CoroutineLiveData<T>,
    context: CoroutineContext,
    override val initialValue: T? = target.value
) : LiveDataScope<T> {
    // use `liveData` provided context + main dispatcher to communicate with the target
    // LiveData. This gives us main thread safety as well as cancellation cooperation
    private val coroutineContext = context + Dispatchers.Main

    override suspend fun emitSource(source: LiveData<T>): DisposableHandle =
        withContext(coroutineContext) {
            return@withContext target.emitSource(source)
        }

    override suspend fun emit(value: T) = withContext(coroutineContext) {
        target.clearSource()
        target.value = value
    }
}
``` 

# 動作の注意事項(liveData内コメント引用)

- liveDataブロックは返却したLiveDataがactiveになった時に実行される。
- liveDataブロックの実行中にLiveDataが非アクティブになると、タイムアウトになる前にLiveDataが再度アクティブにならなかった場合、timeoutInMsミリ秒後にキャンセルされる。
- タイムアウトによるキャンセルが発生した場合、LiveDataが再びActiveになったタイミングでliveDataブロックは最初から実行される。
- LiveDataが非アクティブになる以外の理由でliveDataブロックが正常に終了/キャンセルされた場合、LiveDataがアクティブになっても再実行されない。

# 感想
丁度欲しかったものがこのタイミングで来てとても嬉しい。
GnuWin cmdでファイルサイズのみを取得

windowsのコマンドラインで、ファイルサイズのみを取得したい

※GnuWinを導入したwindowsが対象です。GnuWinはWindowsでlinuxコマンドを使用するためのソフトウェアで、SourceForge.netなどで入手が可能です。

lsとgawkをつなげて実現

<pre><code>
C:\workspace>ls -l test.dat |gawk "{print \"size=\" $5}"
size=7
</code></pre>
Educational DP Contest A - Frog 1

#問題概要
[問題のリンク](https://atcoder.jp/contests/dp/tasks/dp_a)

要素$N$個の配列$h$がある。
点$1$からスタートして$N$にたどり着くまで移動する。ある点$i$からは$i+1$または$i+2$に移動することができる。

移動先の点を$j$とすると、$|h_j - h_i|$が移動コストとなる。移動コストの最小値を求めよ。

#制約条件
- 入力はすべて整数である。
- $2≤N≤10^5$
- $1≤h_i≤10^4$


#考えたこと
まんまこれでびっくりした。 → [C - 柱柱柱柱柱](https://atcoder.jp/contests/abc040/tasks/abc040_c)
前やったときのを思い出しながら解いた。

点$i$における最適値(=最小値)は1個前か2個前の値に依存する。仮に点$i$において1個前の値が最適値になるのであれば、その$i-1$の値は1個前と２個前のどちらかに依存しているかが問題となってくる。
これを逐次保存して管理していくことにより計算量を抑える。

遷移式は以下のようになる。
初項と第一項は自明で第二項以降は1個前か2個前どちらの値に最適値が依存しているかを判定していく。

```.cpp
vector<int> dp(n);
dp[0] = 0;
dp[1] = abs(h[1]-h[0]);
for(int i = 2; i < n; i ++) {
    dp[i] = min(abs(h[i]-h[i-1]) + dp[i-1], abs(h[i]-h[i-2]) + dp[i-2]);
}
```
計算量は $O(N)$です。


#解答

C#の解答

```.cs
using System;
using System.Linq;

class Program
{
    static void Main(string[] args) {
        int n = int.Parse(Console.ReadLine());
        int[] h = Console.ReadLine().Split().Select(int.Parse).ToArray();
        Console.WriteLine(dp(n,h)[n-1]);
    }
    static int[] dp(int n, int[] h) {
        int[] dp = new int[n];
        dp[0] = 0;
        dp[1] = Math.Abs(h[1]-h[0]);
        for(int i = 2; i < n; i ++) {
            dp[i] = Math.Min(Math.Abs(h[i]-h[i-1])+dp[i-1], Math.Abs(h[i]-h[i-2])+dp[i-2]);
        }
        return dp;
    }
}
```

C++の解答

```.cpp
#include <bits/stdc++.h>
using namespace std;

int main() {
    int n; cin >> n;
    vector<int> h(n);
    for(int i = 0; i < n; i ++) cin >> h[i];
    vector<int> dp(n);
    dp[0] = 0;
    dp[1] = abs(h[1]-h[0]);
    for(int i = 2; i < n; i ++) {
        dp[i] = min(abs(h[i]-h[i-1]) + dp[i-1], abs(h[i]-h[i-2]) + dp[i-2]);
    }
    cout << dp[n-1] <<endl;
}
```
Apache エラー「AH01909」, 警告「AH01797」対応

前から調子が悪かったApacheの修正を実施

## エラー「AH01797: client denied by server configuration」
### 現象
以下のエラーがログに記録されていた

```error.log
AH01797: client denied by server configuration: <XAMPP_HOME_DIR>/hoge/hoge/index.html
```

ファイルへのアクセス権が無いよう

### 原因と対策
Apcheのバージョン2.4からは```httpd.conf```の設定が変わったよう
以下のように修正

```httpd.conf(修正前)
    Alias /hogehoge "<XAMPP_HOME_DIR>/hoge/hoge"
    <Directory "<XAMPP_HOME_DIR>/hoge/hoge">
      Order deny,allow   <-- この部分を変更
      Deny from all      <-- この部分を変更
      Allow from 255.255.255.0/24
    </Directory>
```

```httpd.conf(修正後)
    Alias /hogehoge "<XAMPP_HOME_DIR>/hoge/hoge"
    <Directory "<XAMPP_HOME_DIR>/hoge/hoge">
      Require all denied   <-- これに変更
      Allow from 255.255.255.0/24
    </Directory>
```

これで治りました
いつバージョンが上がったかは不明

## 警告「AH01909: www.example.com:443:0 server certificate does NOT include an ID which matches the server name」への対応
なぜかデフォルトのまま変えていないようだったので、```httpd-ssl.conf```の**ServerName**と**SeverAdmin**を修正
Kubernetesでnginxを立てる

Kubernetesの環境を作るまではこちらを参照↓

[kubernetesでサーバーを立てられるか試してみる](https://qiita.com/lughshot/items/b0c86917ba905192dcb6)


nginx.deployment.yaml　を作ります

```
apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: nginx
spec:
  replicas: 1
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
      - name: nginx
        image: nginx:1.7.5
        ports:
        - containerPort: 80
```

デプロイします

```
$ kubectl create -f nginx.deployment.yaml
deployment.extensions "nginx" created
```
できた

こちらでpodを確認する

```
$ kubectl get pod
NAME                     READY     STATUS              RESTARTS   AGE
nginx-64c6b46884-5fh5q   0/1       ContainerCreating   0          54s
```

nginxを公開する
ロードバランサは高いらしいので、このノードのポートを公開します。

nginx.service.yaml

```
apiVersion: v1
kind: Service
metadata:
  name: nginx
spec:
  selector:
    app: nginx
  ports:
    - name: http
      protocol: TCP
      port: 80
      targetPort: 80
  externalIPs:
     - <ノードの内部IP>
     - <ノードの内部IP>
```

ノードの内部IPはこれで引く

```
$ gcloud --format json compute instances list | jq -r '.[].networkInterfaces[].networkIP'
-bash: jq: command not found
```

むむ、実行できない。。だと
単純にbashをインストールしてあげる
※ちなみにjqはjsonを解析できるライブラリです

```
brew install jq
```

若干、権限で手こずりながらも、インストール完了
改めて、実行するとipが参照できる

```
$ gcloud --format json compute instances list | jq -r '.[].networkInterfaces[].networkIP'
10.138.0.15
```

実行します

```
$ kubectl create -f nginx.service.yaml
service "nginx" created
```

公開します

```
gcloud compute firewall-rules create http-firewall --allow tcp:80
```

あとは、ノードの外部ipにアクセスすれば完了です。
こちらで外部ipが引けます

```
gcloud --format json compute instances list | jq -r '.[].networkInterfaces[].accessConfigs[].natIP'
```

アクセス成功です
<img width="639" alt="スクリーンショット 2019-05-08 18.22.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87607/468e0cce-3c0f-f682-be16-d5e9176aacc6.png">


結果、二つのyamlを作りましたが

```
$ ls
nginx.deployment.yaml	nginx.service.yaml
```

それぞれは
- Deploymentとは？
    - ReplicaSetを生成・管理し、ReplicaSetはPodを生成・管理する

- Serviceとは？
    - コンテナのアクセス方法を把握しなくても、Serviceが受付口だけ知っていれば通信できる


補足

ちなみに消す場合は、まず、pod名を確認します

```
kubectl get pod
NAME                     READY     STATUS    RESTARTS   AGE
nginx-64c6b46884-5fh5q   1/1       Running   0          45m

```

先ほど取得したpod名から不要なpodを以下のコマンドで削除します

```
$ kubectl delete pod <pod名>
pod "nginx-64c6b46884-5fh5q" deleted
```
TouchDesignerからArduinoのLチカ

TouchDesignerのSerial OutでArduinoのLチカをやってみます。

#Arduino
まずは配線をしてしまいます。
以下の様にLED1個の基本的な配線です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/2e41b8b4-5b9a-362a-70be-0cb22fefb319.png" width=80%>
ちなみに上の図は**[Fritzing](http://fritzing.org/home/)**というアプリケーションを使用しています。
FritzingはIDEもついているのでコードを書いてArduinoにアップロードまでできます。（アップロード自体は本家Arduino IDE経由っぽいです）

###Arduinoのコード

```java

int flag;
void setup(){
	//LED_BUILTINは13番ピン
	pinMode(LED_BUILTIN, OUTPUT);
	Serial.begin(9600);
}

void loop(){
	if(Serial.available() > 0){
		//シリアル通信で送られてくる値を読み取り変数flagに格納
		flag = Serial.read();
		//flagが1だったら光らせる処理
		if(flag == 1){
			digitalWrite(LED_BUILTIN, HIGH);
		}else{
			digitalWrite(LED_BUILTIN, LOW);
		}
	}
}
```

#TouchDesigner
###ネットワーク
ネットワークはこんな感じです。
＞Button COMP、Panel Execute DAT、Serial DAT
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/bcd9a613-7fca-8157-090f-00696053d71a.png" width=80%>

###Button COMP
Button Typeを**Momentary**にしています。ボタンを押している間のValueが「1」、押さないとValueが「0」になります。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/72797227-689e-923c-715a-b77bcf232dad.png)

###Panel Execute DAT
ターゲットのパネルに**Button COMP**を指定します。
また今回は値が変化するたびにシリアル通信を行うため**Value Change**をOnにしています。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/a6801a88-91f1-737e-fd34-81c669bfd9b0.png)

また、実際のコードでは**onValueChange**内を以下の様に記述します。
こうすることで値が変化するたびにSerial DATを通じてButton COMPのValueがSerial OUTされます。
sendBytesに関しては**[公式ドキュメント](http://www.derivative.ca/wiki088/index.php?title=SerialDAT_Class#Methods)**に詳細が載っています。

```

def onValueChange(panelValue):
	op("serial1").sendBytes(panelValue)
	return
```

###Serial DAT
ここでは**Port**にArduinoを接続しているUSB Portを指定しています。（環境毎に異なります。）
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/937f3979-d53e-2b36-4355-5bc9ededda23.png)

これで、Button COMPをActiveにしてクリックすればLチカ完成です😃

最後にYouTubeのリンクを貼っておきます。
[![IMAGE ALT TEXT HERE](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/ec016b4c-cd3a-aabc-4eab-dcd80133c954.png)](https://www.youtube.com/watch?v=mIjMzC5joVI)
大量サーバー群（Windows）の証明書を一括更新

#問題
数百台サーバの証明書をいちいち接続して更新してたら飽きてきた。メンバーと分けてやろうとしたが指示自体が恥ずかしくなり・・・

#毎年やることなんでなんとかしましょう
- 環境
- Active Directory + Windows Server 2012 + Windows Server 2012 R2 + Windows Server 2016 サーバーはどんどん増えている
- zabbix

### 1.まずはどのくらい期限が迫っているか確認
- zabbix
- 証明書期限監視
- アイテム作成はこちら参照: https://qiita.com/mkawanee/items/c392c1609f459962ec12
- 有効期限確認はzabbixの「監視データ」→「最新データ」でグループ指定してリストで眺める。便利だー

### 2.グループポリシーでファイルとタスクを配布
* Active Directory
* コンピューターの構成 → 基本設定 → Windowsの設定 → ファイル

C:\share\ファイル配信\ps1\Update-Cert.ps1
C:\share\ファイル配信\pfx\awscloud.com.pfx

* コンピューターの構成→基本設定→コントロールパネルの設定→タスク

タスク名: update-cert
ユーザアカウント：NT AUTHORITY\System
ユーザがログオンしているかどうかにかかわらず実行する：オン
操作：PowerShell.exe -command C:\share\ps1\Update-Cert.ps1 -CPW {証明書パスワード}
トリガー：一回限り、繰り返し間隔：1時間、継続時間：1日
繰り返し間隔：チェック外す

### 3.次日にzabbixで確認

### 4.片付け
* 証明書が各サーバーに配布されているのと、タスクに証明書パスワードが書かれているので両方のアクションを「削除」に変更

## Update-Cert.ps1
* DSCがよいけど。

```PowerShell

param (
    [string]$CPW,
    [string]$ADName = "ad-server"
)

Import-Module RemoteDesktop
Import-Module WebAdministration

function Update-Cert
{
    param (
        [string]$CPW,
        [string]$ADName
    )

    $ExpireInDays = Get-ChildItem -Path Cert:\LocalMachine\My |
        Select-Object -Property Subject, @{n='ExpireInDays';e={($_.notafter - (Get-Date)).Days}} |
        Where-Object {$_.Subject -like "*awscloud.com*"} | Select-Object -Property ExpireInDays
    $days = $ExpireInDays.ExpireInDays
   
    $sys = Get-WmiObject Win32_ComputerSystem

    if ($days -lt 60) {
        $serverFullname = $sys.Name + "." + $sys.Domain
        $certPath = "C:\share\ps1\awscloud.pfx"

        if (Test-Path $certPath) {
            $password = ConvertTo-SecureString -String "${CPW}" -AsPlainText -Force

            # Update Cert for IIS
            $Cert = Get-ChildItem -Path Cert:\LocalMachine\My | where-Object {$_.subject -like "*awscloud.com*"} | Select-Object -ExpandProperty Thumbprint
            certutil -delstore My $Cert
            certutil -p $CPW -importpfx $certPath

            $Cert = Get-ChildItem -Path Cert:\LocalMachine\My | where-Object {$_.subject -like "*awscloud.com*"} | Select-Object -ExpandProperty Thumbprint
            Get-Item -Path Cert:\localmachine\my\$Cert | Set-Item -path IIS:\SslBindings\0.0.0.0!443

            # Update Cert for RemoteApp
            Set-RDCertificate -Role RDWebAccess -ImportPath $certPath -Password $password -ConnectionBroker $serverFullname -Force
            Set-RDCertificate -Role RDRedirector -ImportPath $certPath -Password $password -ConnectionBroker $serverFullname -Force
            Set-RDCertificate -Role RDPublishing -ImportPath $certPath -Password $password -ConnectionBroker $serverFullname -Force
        }
    }

    #Write-Output ("`r`n" + $sys.Name + "," + $ExpireInDays.ExpireInDays + "`r`n---")
    Write-Output $days
}

Update-Cert -CPW $CPW -ADName $ADName
```

#メモ
約300台分、問題なく更新できたと。
sshコマンドで簡単に指定サーバへ接続する設定（.ssh/config）

# はじめに
秘密鍵、公開鍵の生成については省略します。
以下のコマンドでServerに接続している人向け。

    ssh -p ポート番号 -i 秘密鍵パス ユーザ名@ドメイン名

上記のコマンドを簡単にする方法があります。
複数のServerに出たり入ったりしたい時に役立ちます。

# sshディレクトリの存在
`~`とも表現される$HOME （/Users/ユーザ名）には隠しファイルで`.ssh`というディレクトリが存在しており、その中に`config`ファイル（ディレクトリではないです）があります。
`~$ ls -a ~/.ssh`で以下の様にあることが確認できればOK。

    .		..		config		id_rsa

# viコマンドの説明
Linuxのviコマンドは`viエディタ`の起動になります。
主な使い方（コマンド）は以下の通り。
`a`キーまたは`i`キーで，[-- INSERT --]（編集）モードになり，文字の挿入，削除が可能になります。
左上の`esc`キーで，編集モードを終了します。
以下は`編集モードになっていない状態`で使用します。
`:w`で変更したファイルを保存します。
`:q`でviを終了します。
`:wq`で変更したファイルを保存して終了します。（一番使う気がする）
`:q!`で変更を無視してviを終了します。

# .ssh/configの書き方
`vi ~/.ssh/config`で以下が開くので適宜編集。

    Host hoge
        HostName xxx.xxx.xxx.xxx
        Identityfile ~/.ssh/id_rsa
        Port 22
        User aaa

    Host fuga
        HostName yyy.yyy.yyy.yyy
        Identityfile ~/.ssh/id_rsa
        Port 2222
        User bbb

この様に設定してあげると、

    $ ssh -p 22 -i ~/.ssh/id_rsa aaa@xxx.xxx.xxx.xxx

としていたのが

    $ ssh hoge

で接続できます。
同様に、

    $ ssh -p 2222 -i ~/.ssh/id_rsa bbb@yyy.yyy.yyy.yyy
には

    $ ssh fuga

で接続できる様になります。

# 終わりに
踏み台には以下の設定を使いますがそれはまたいつか。

    StrictHostKeyChecking no

     TCPKeepAlive yes
     IdentitiesOnly yes

**以上です。**
[Windows]リモートデバッグ/リモートデスクトップに必要な初回設定

# やりたいこと

Windows10のPCに、リモートデスクトップで接続して、デバッグ作業を楽にしたい。
また、VisualStudio2019のリモートデスクトップでデバッグをしたい。
初期状態のOSではどちらもできなかったので、設定のメモを残す。

# 検証した環境

自分PC
- Windows10 Pro

リモート先PC
- Windows10 Pro

※どちらもいろいろといじっているPCのため、知らない間に他にリモートデスクトップ接続に必要な設定をしてる可能性あり。(気づいたら下に追記すること)


# 設定(21/03/02修正)

### リモート先PCの設定

- pc起動
- ユーザー名の変更(必要なければやらなくてOK)
  - Win+Rでcontrol userpasswords2と入れenter
  - ユーザー名、PW を適切なものにする
  - 再起動(ユーザー名変えた直後だと、コンパネの各画面が開いてくれない)
- ネットワークの設定
  - コンパネ→ネットワークと共有センター→IPv4でアダプタの設定開く
  - 適切なIPアドレスにする
- フォルダ共有の許可
  - ネットワークと共有センター→共有の詳細設定を開く
  - 全部のプロファイル(プライベートとかパブリックとか)について、設定を「有効」にする
- 共有フォルダの作成
  - デスクトップにtestフォルダをつくる
  - testフォルダのプロパティで共有設定を開き、フルアクセス付与する
- リモートデスクトップの許可
  - Winボタン→設定ボタン(歯車)→システム→リモートデスクトップ から、リモートデスクトップを有効にするチェックをONする
- リモートデバッグ用ツールをインストール
  - testフォルダに作業用PCからアクセスし、リモートデバッグのVS2019インストーラーを置く
  - インストールする

これで一式完了のはず


### 自分PCの設定
- 特になし

# 19/10/25追記
バッチで自動で上記手順を行う方法はこちらを参照。

**[Windows/バッチ] リモートデバッグするときのIPアドレス変更やインストール、設定等々一気にやってしまいたい**
https://qiita.com/tera1707/items/4483b67bae0db0f9c783

# メモ/ユーザー名を変えたのに、リモートデスクトップでログイン時にそのユーザー名を使えない

この設定で、名前を変えても、ユーザー名を変えたことにはならない。
(アカウント名だけ変えたことになる)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/6c6d6f90-eddf-5bc1-6850-4a98facd475b.png)

ユーザー名を変える時は、下記のコマンドを使って出た画面を使う。
`control userpasswords2`

参考：https://beiyan-tool.info/?p=45
Craft CMS のテンプレートで変数などをダンプする

Craft CMS のテンプレート内で取得できる文字列や配列といった変数の内容、または、エントリなどのエレメント（オブジェクト）の構造などを知りたいとき、ここで紹介する無償プラグインを導入することで Laravel の `dd` メソッドと同様の形で情報を確認できるようになる。

## プラグインのインストール

管理画面のメインメニューから `プラグインストア` に移動後、検索ボックスに `dumper` と入力。

<img width="1054" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936/8114f4c6-4162-baff-8853-a9c68bed405f.png">

ヒットした `Dumper` プラグインをインストールする。

## テンプレートの調整

このプラグインは、テンプレートで定義可能なファンクションを2つ追加する。

```twig
{{ d(entry) }}
```

`d` ファンクションは `dump` のみで、後に続くコードも処理される。

```twig
{{ dd(entry) }}
```

`dd` ファンクションは `dump and die` となり、このファンクションが定義された場所で処理が終了となる。

## 出力サンプル

任意のエントリを出力すると、下記のようになる。
シンタックスハイライトなどで見やすく整形されているため、Twig 標準の `dump` ファンクションの出力結果よりも判りやすい。

<img width="1134" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936/af2103b9-d378-d672-5973-5b189f673bd2.png">

なお、カスタムフィールドは `_behaviors > customFields` のオブジェクトにフィールドハンドルと値のセットが出力されるため、これを参考にテンプレートを調整すれば効率化が図れる。
我流Ubuntuテーマ設定

かっこいい＆便利な環境だとテンションあがって多分作業効率もあがるので。
自分用なので個人的な趣味満載です。

結果👇
![Screenshot 2020-09-11 11:09:16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225983/0b70cec0-a990-d037-2944-f03c05e7c13f.png)
環境：Ubuntu 18.04

デフォルトのテーマから変えていたり、トップバーは普段は非表示にしていたり、ターミナルでは（色が薄くて画像だと見づらいですが）履歴に基づいた候補が表示されたりしていて、すっきり＆便利な環境になっています。

# 日本語・キーボード関係
## 日本語入力を有効化
```bash
sudo apt install ibus-mozc
# ibusを再起動
killall ibus-daemon
ibus-daemon -d -x &
```
Ubuntuの設定の「Text Entry」でJapanese (Mozc) (IBus)を選択

参考: [ubuntuで日本語入力を行う](https://qiita.com/naoyukisugi/items/238f6e5060fb838827f6)

## 日本語のキーボードレイアウトにする（もし日本語配列を使っている場合は）
GNOMEだとキーボードレイアウトがsettingsから直接設定できないけど、settingsのRegion & Languageで普通のJapaneseのキーボードを追加して、一度それに切り替えると日本語レイアウトになってくれるっぽい。

## 日本語⇔英語の切り替えのショートカットを設定（US配列の場合は）
us配列だと半角全角キーがないので、ショートカットを追加する必要がある。shift + spaceが、他のショートカットとの干渉もなくて打ちやすくて好き。
todo: どうやってやるか追記。

## caps lockキーをctrlとして使う
これについては「キーの印字と挙動が違うと混乱を招く」説と「caps lockなんて使うことなくせに押しやすい位置にあるから、使用頻度の高いctrlにしておけ」説の両方がありますが、私は最近になって後者の派閥になりました…

テキストエディタで`/etc/default/keyboard`を開いて、
`XKBOPTIONS=""`　→　`XKBOPTIONS="ctrl:nocaps"`
と変更。

# テーマを導入
GNOME TweaksをUbuntuソフトウェアセンターからインストールしたうえで、以下のテーマやアイコンをインストールすると、GNOME Tweaksから有効化できるようになる。

* [papirus-icon-theme](https://github.com/PapirusDevelopmentTeam/papirus-icon-theme): アイコン用のテーマ。
![](https://raw.githubusercontent.com/PapirusDevelopmentTeam/papirus-icon-theme/master/preview.png)
* [materia-theme](https://github.com/nana-4/materia-theme)：GoogleのMaterial Designインスパイア系。
![](https://raw.githubusercontent.com/nana-4/materia-theme/images/widget-factory.png)
* Tweak toolのDesktopタブで、"Icons on Desktop"をオンにしておけば、デスクトップにファイルを置ける。

# GNOME extensionsを導入
[GNOME Shell Extensions](https://extensions.gnome.org/)から、ブラウザに拡張機能をインストールすることでインストールが可能になる。おすすめは

* [Hide Top Bar](https://extensions.gnome.org/extension/545/hide-top-bar/):トップバーを非表示にしてくれる。マウスを近づければ表示される。
* [Transparent Top Bar](https://extensions.gnome.org/extension/1708/transparent-top-bar/):トップバーの見た目がいい感じに半透明になる。
* [OpenWeather](https://extensions.gnome.org/extension/750/openweather/):トップバーに今の天気を表示

# Terminalのカスタマイズ
![Screenshot 2020-05-19 16:02:27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225983/2cc6c488-4a72-b300-081f-625db9bfc74f.png)


## デフォルトのシェルををBash→zshに変更
```
sudo apt install zsh
chsh -s $(which zsh)
```
さらに、[oh-my-zsh](https://github.com/ohmyzsh/ohmyzsh)をインストールして、[zsh-autosuggestions](https://github.com/zsh-users/zsh-autosuggestions)を有効化すると、上の画像みたいに途中まで打てば履歴を元に候補を半透明で表示してくれて、右矢印やalt-f (emacsのキーバインドの場合)で選べてとても効率的になる。

zshのテーマは、[powerlevel10k](https://github.com/romkatv/powerlevel10k)がかっこいい。完全版を使うにはフォントのインストールや細かい設定が必要だったりするのでREADMEをよく見る。

ターミナルのウィンドウのテーマ（Termnal→preferences→Profileを選択→Colors）は、

* Text and Background Color: White on black
* Palette: Tango

が見やすいと思う。

# そして最後に…いい壁紙を見つけてくる
例えば[歴代macOSの壁紙を載せてるサイト](https://photos.google.com/share/AF1QipNNQyeVrqxBdNmBkq9ILswizuj-RYJFNt5GlxJZ90Y6hx0okrVSLKSnmFFbX7j5Mg?key=RV8tSXVJVGdfS1RIQUI0Q3RZZVhlTmw0WmhFZ2V3)とかから拾ってくる。
【JavaScript】 基礎 

#目次：

+ Javascriptファイルの読み込み
+ 基本文法
+ 変数の定義
+ オブジェクト
+ jQuery


###Javascriptファイルの読み込み
Javascriptのファイルを別のJsファイルから読み込む場合は、HTMLファイルのbodyタグの中に以下を追記します。

```:html
<body>
      <script src="ファイル名.js"></script>
</body>
```

```:html
<script src="読み込みたいJavascriptのパス"></script>
```
###基本文法
JavaScriptでは行末にセミコロンをつけます.

```
console.log('プログラミング楽しい');
```
文字列は、シングルクォートかダブルクォートで囲みます。

```
'文字列'
"文字列"
```
文字列の連結

```
'たなか' + 'けんたろう' 
```
###変数の定義

```
var 変数名 = 値;
```
###オブジェクト
オブジェクトとは、データのまとまりのことをいいます。オブジェクトは名前と値をセットにして管理します。
オブジェクトの定義

```
var obj = {プロパティ名: 値1,プロパティ名2: 値2};
```
プロパティの値を取得する

```
obj.プロパティ名
obj['プロパティ名']
```

プロパティの値を変更する

```
obj.プロパティ名 = 新しい値
obj['プロパティ名'] = 新しい値
```
###関数

```
function 関数名(引数) {
    // 処理の内容
}
```
###jQuery
IDセレクタ

```
$("#idselector")
```

クラスセレクタ

```
$(".classSelector")
```

要素セレクタ

```
$("h1")
```
意外と知らなかった便利な:lang疑似セレクタ

HTML5で言語を明示するのに、lang属性というものがあります。

```HTML
<html lang="ja">
```
みたいなやつですね。
htmlタグ上で言語を明示するものとしか思っていなかったのですがhtmlタグ以外のタグにも使用することができます。

```HTML
<p lang="ja"></p>
<p lang="en"></p>
```
またCSSには、lang属性をセレクタで指定する特別な疑似セレクタがあり、エレメント:lang(ja)のように書くことができます。

```CSS
(タグ名):lang((言語名)){
  (スタイル記述)
}

.(クラス名):lang((言語名)){
  (スタイル記述)
}
```

言語を指定した要素から要素内の子孫要素までlang疑似セレクタが継承されるので、これを使えばルートのhtml要素にjaとかenとかでlangを設定して、lang疑似セクタだけで言語別のCSSスタイルを切り替えることができますね。
多言語化対応でCSSを切り替えなければならない場合に使えそうです！