OmniAICreator/Qiita-1.07M huggingface dataset:
ATOM プラグイン導入

## なぜ入れるのか

これからATOMプラグインを紹介していきます。これは拡張機能と言って、本来の機能に追加することで開発を容易にしてくれます。初期機能のままでも十分使えますが、これらをインストールすることによって、ミスや検索時間を減らすことができるので、時間をかけるべきところにかけることができます。皆さんの開発効率を上げていきましょう！

以下紹介するものは、安全で無料のものですので安心してインストールしてくださいね。

## インストール方法
1.設定を開きましょう。

macの人　:　左上のATOM→Preference/ショートカットキーは[ ⌘ + , ]

Windowsの人　:　左上のFile→settings



2.検索をします。
サイドメニューの一番下にある+installをクリックして下さい。
Search packagesと書いてある検索ボックスに「以下のプラグイン名」を入力します。（コピペをおすすめします）

## プラグイン一覧
#### 必須１　全角スペースを□で表示してくれる

<img width="764" alt="スクリーンショット 2018-12-29 20.37.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/277713/7d112e41-15f9-0292-4c43-febab9a97286.png">


*  「 show-ideographic-space 」

#### 必須２　　インデントを可視化

<img width="775" alt="スクリーンショット 2018-12-29 20.26.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/277713/04f706a1-4bb6-1bee-a58a-c6c6a4c69f78.png">


*  「 highlight-column 」

#### おすすめ１　　好きな色を感覚的に選択できる

<img width="1067" alt="スクリーンショット 2018-12-29 20.35.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/277713/0ef2b85c-fad0-0334-9737-d73a40ce10df.png">


*  「 color-picker 」

右クリックで起動できます。

#### おすすめ２　　CSSのカラーコードが指定色で塗られる

<img width="894" alt="スクリーンショット 2018-12-29 20.30.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/277713/4dd1a279-b89c-bf6b-271f-5b4057e24255.png">


*  「 pigments 」

#### おすすめ３　　拡張子ごとにアイコンを設定

<img width="622" alt="スクリーンショット 2018-12-29 20.41.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/277713/b9f06356-67a7-47d9-deec-43c8dc20fb53.png">


*  「 file-icons 」

#### おすすめ４　　選択した単語を全てハイライトしてくれる

<img width="936" alt="スクリーンショット 2018-12-29 20.43.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/277713/2c27541c-26b6-75e1-92b9-bf68bc22f2ff.png">


*  「 selection-highlight 」


##最後に
これらのプラグインは検索すると山のようにあります。「ATOM　プラグイン　おすすめ」などで検索してみてください。使いやすいものは紹介したもの以外にたくさんあるので自分でカスタマイズしてみましょう。逆に使いずらいものもあるので注意する必要がありますが、ダウンロード数が多いものであればあまり間違いはないかと思います。
wineでpythonをインストール

WinにPythonをインストール

```
wget https://www.python.org/ftp/python/2.7.15/python-2.7.15.msi
wine msiexec /i python-2.7.15.msi
```
pythonスクリプトをwine経由で起動

```bash
wine python script.py
```
ラズパイにOpenWrtを書き込んだ後、rootパーティションを拡張する方法

ラズパイのSDカードにOpenWrtを書き込んだ後、rootパーティションを拡張する方法です。ラズパイでOpenWrtを起動した後だとオンラインで拡張することができなかったので、Ubuntu 18.06.1で処理しました。
/dev/sdb2がrootパーティションになります。

```shell
$ df | grep sdb
/dev/sdb1          20422     9106     11316  45% /media/soma/4B3E-B3A3
/dev/sdb2         258016    12012    240764   5% /media/soma/57f8f4bc-abf4-655f-bf67-946fc0f9f25b
```

```shell
$ sudo fdisk /dev/sdb

fdisk (util-linux 2.31.1) へようこそ。
ここで設定した内容は、書き込みコマンドを実行するまでメモリのみに保持されます。
書き込みコマンドを使用する際は、注意して実行してください。


コマンド (m でヘルプ): p
ディスク /dev/sdb: 14.9 GiB, 16009658368 バイト, 31268864 セクタ
単位: セクタ (1 * 512 = 512 バイト)
セクタサイズ (論理 / 物理): 512 バイト / 512 バイト
I/O サイズ (最小 / 推奨): 512 バイト / 512 バイト
ディスクラベルのタイプ: dos
ディスク識別子: 0x5452574f

デバイス   起動 開始位置 最後から セクタ サイズ Id タイプ
/dev/sdb1  *        8192    49151  40960    20M  c W95 FAT32 (LBA)
/dev/sdb2          57344   581631 524288   256M 83 Linux

コマンド (m でヘルプ): d
パーティション番号 (1,2, 既定値 2): 2

パーティション 2 を削除しました。

コマンド (m でヘルプ): n
パーティションタイプ
   p   基本パーティション (1 プライマリ, 0 拡張, 3 空き)
   e   拡張領域 (論理パーティションが入ります)
選択 (既定値 p): p
パーティション番号 (2-4, 既定値 2): 2
最初のセクタ (2048-31268863, 既定値 2048): 57344
最終セクタ, +セクタ番号 または +サイズ{K,M,G,T,P} (57344-31268863, 既定値 31268863): 

新しいパーティション 2 をタイプ Linux、サイズ 14.9 GiB で作成しました。
パーティション #2 には ext4 署名が書き込まれています。

署名を削除しますか？ [Y]es/[N]o: N

コマンド (m でヘルプ): w

パーティション情報が変更されました。
ディスクを同期しています。
```

```shell
$ umount /dev/sdb1
$ umount /dev/sdb2
```

```shell

$ sudo e2fsck -f /dev/sdb2
e2fsck 1.44.1 (24-Mar-2018)
Pass 1: Checking iノードs, blocks, and sizes
Pass 2: Checking ディレクトリ structure
Pass 3: Checking ディレクトリ connectivity
Pass 4: Checking reference counts
Pass 5: Checking グループ summary information
/dev/sdb2: 1260/16384 files (0.0% non-contiguous), 4035/65536 blocks
```

```shell
$ sudo resize2fs /dev/sdb2
resize2fs 1.44.1 (24-Mar-2018)
Resizing the filesystem on /dev/sdb2 to 3901440 (4k) blocks.
The filesystem on /dev/sdb2 is now 3901440 (4k) blocks long.
```

SDカードを抜き差しすると/dev/sdb2が拡張されたのがわかります。

```shell
$ df | grep sdb
/dev/sdb1          20422     9106     11316  45% /media/soma/4B3E-B3A3
/dev/sdb2       15358960    12492  15330084   1% /media/soma/57f8f4bc-abf4-655f-bf67-946fc0f9f25b
```
完璧主義をやめるだけで開発効率アップ！プログラミングのスピードを上げる方法

言いたいことはタイトルで全てなので短く書きます:smile:

完璧主義のせいで、あなたも私もプログラミング（というか仕事）が遅いんです。

じゃあ、どうしたら完璧主義を捨てられるのか。

それは、地味なんですが、

「答えなんてないんだ」

「完璧じゃなくていいんだ」

と声に出しても出さなくてもいいので、自分に言い聞かせることです。

それだけと思う方もいるでしょうが、完璧主義を捨てる（もっと広く、考えを変える）には、

「変わろう」と決めて、繰り返し、自分に言い聞かせることが有効なんです。

あなたが、プログラミングしているとき、

この関数名どうしようか、

戻り値をreturnするか参照渡しの変数にいれるか、

こうしておくと汎用性が高いかな

とかあれこれ考えていませんか。

私もよく悩んで、それで手が止まってしまっていました。

この根本は、完璧なプログラムでなければいけないという、完璧主義が原因です。

（なんで完璧主義になったかと言えば、小中学校の教育のせいなんでしょうけど）

ディテールも大事ですけど、もっと大事なのはコアの部分をスピーディーに作ることです。

あれこれ考えてしまって手が止まったときに、

「最初からうまくいかなくても大丈夫」

「とりあえず作ってみよう」

と自分で自分を勇気づけることを繰り返すと、1ヶ月もすればかなり完璧主義は治ります。

自分でビフォー・アフターのプログラミングのスピードを測ってはいませんが、

完璧主義をやめてからは、私の体感ではプログラミングのスピードは2倍、3倍になっていると思います。
時代遅れなアプレットを動かすためのポリシー設定格闘記

Java11がリリースされてアプレットが使えない時代が到来しているのに、未だにJavaアプレットで新しい機能を実現してほしいという需要がある。アプレットを使いたがる理由は様々だが、「JavaScriptからネイティブな処理を実行したいから」というのがほとんどだ。
そんなときに、いつもセキュリティ関係の環境設定にハマってしまうのは自分だけではないはず。本当はアプレットなんて使いたくないのに、やむなく妥協して使ってみた挙句、環境設定で時間を取られたときのストレスは半端ない。
そんな経験は一度で十分なので、今後そんな目に合わないよう、ここに出会ったハマりポイントをまとめておく。

# java.policyの設定ミス
JavaScriptではできないネイティブ処理も、アプレットならできる。そう思っている人は要注意だ。たとえアプレットでも何の制限もなしに実行できるわけではないので、ちゃんと`$JRE_HOME/lib/security/java.policy`にセキュリティ上の例外設定をしなければならない。
これをしないと、アプレットからネイティブな処理（ファイル書き出しなど）を実行しようとしたときに実行時例外になる。

とりあえず動作させたいときは、全エントリに対して全権限`java.security.AllPermission;`を与えればいい

```
grant {
	permission java.security.AllPermission;
}
```

## codeBaseで制限
特定のエントリに対してのみ設定したい場合、codeBaseを記述する。ローカルのドライブ上に配置するのか、Webからダウンロードして実行するのかにより指定が変わる。記述詳細はJavaの公式ドキュメントを参照するのがいい。

https://docs.oracle.com/javase/jp/8/docs/technotes/guides/security/PolicyFiles.html

## permissionで制限
特定の権限だけを与えたい場合、`permission java.security.〜クラス名〜;`を指定する。記述詳細はJavaの公式ドキュメントを参照するのがいい。

https://docs.oracle.com/javase/jp/8/docs/technotes/guides/security/permissions.html

# java.securityでjava.policyの読み込み漏れ
java.policyを正しく記述しているのに設定が反映されないなら、そもそもjava.policyが読みこまれているかを確認する。java.policyは複数のファイルに定義を分割し、読み込まれる順番で設定が上書きされるため、読み込み順はとても重要だ。
`$JRE_HOME/lib/security/java.security`に`java.policy`を読み込む`policy.url.n`指定があるので、ここを確認する。デフォルトでは以下のようになっているだろう。

```
policy.url.1=file:${java.home}/lib/security/java.policy
policy.url.2=file:${user.home}/.java.policy
```

`${java.home}`や`${user.home}`についてはアプレット起動後に「Javaコンソール」を出してプロパティ確認したり、確認用のプログラムでも作って確認すればいい。

```java
System.out.println(System.getProperty("user.home"));
```

その他`policy.url.n`の詳細については公式ドキュメント参照。
https://docs.oracle.com/javase/jp/8/docs/technotes/guides/security/PolicyFiles.html#DefaultLocs

# 特権実行のためのコード
java.policyを正しく設定しているのにパーミッション例外になる場合は、そもそもJavaアプレットが特権実行を考慮した実装になっているかを確認する。セキュリティ例外になる処理は、特権ブロックのためのAPI`java.security.AccessController#doPrivileged`を利用していないと実行できない。

よくあるケースとして、テスト環境ではとりあえず動作させたい設定（grantでcodebase指定なくAllPermission指定）にしていたのが、本番環境では動かないと嘆くパターンだ。java.policyが変わっただけで動かなくなったように感じるため「java.policyが間違っている」と勘違いしてしまうが、実はアプレットの実装が悪いのだ。

```java
public class SampleApplet extends Applet {
	public void hoge() {
		AccessController.doPrivileged(new PrivilegedAction<Object>() {
			@Override
			public Object run() {
				// 権限が必要な処理
				//new Robot().createScreenCaptureなど
				return null;
			}
		});
	}
}
```

特権ブロックについての公式ドキュメントは↓↓
https://docs.oracle.com/javase/jp/8/docs/technotes/guides/security/doprivileged.html
GAE/Java + Spring Boot で warmup request を受け取る

## はじめに
Google App Engine Java + Spring Boot という構成で warmup request を受け取る方法を調べましたが、いい情報が見つからなかったのでまとめました。Java ではなく Kotlin を使用していますが、基本的には同じだと思います。

## 構成
- Java 1.8
- Spring Boot 2.1.0
- Kotlin 1.3.10

GAE の制約により Java 1.8 なのがネックですが、そのうち google がバージョンアップしてくれるはずだと信じています🙏

## ウォームアップリクエストを受け取る方法
[公式に書いてあるチュートリアル](https://cloud.google.com/appengine/docs/standard/java/configuring-warmup-requests?hl=ja)を要約するとこんな感じです。

- /_ah/warmup に対してウォームアップリクエストが定期的に実行される
- GAE/Java はデフォルトでウォームアップリクエストが有効 ※エンドポイントが存在しないと http status 500 エラーになる
- カスタムウォームアップリクエストを追加したい場合は web.xml にサーブレットを追加する
- `ServletContextlisterner` を使用してサーブレット読み込み前にカスタムをロジックを実行できる

上記のような感じなのですが、Spring Boot の場合だと web.xml を使用しない構成が一般的だと思います。
試しに `web.xml` にカスタムサーブレットを追記して `./gradlew appengineStart` したところ、Spring Boot が起動しませんでした。こいつは困った😅

web.xml にカスタムサーブレットを追記せず、ウォームアップリクエストを受け取る `@RestController` を追加する という方法も試しましたが、Controller は Spring Boot が起動していないと機能しないため、ウォームアップリクエストをハンドリングできずエラーになってしまいました。

## 解決方法
上記を踏まえて以下の方法で解決しました。

- web.xml は使用しない
- `@WebServlet`アノテーションを付与したサーブレットクラスを作成する
- `name = "_ah_warmup"` , `urlPatterns = /_ah/warmup` とし、ウォームアップリクエストを受け取るようにする

ソースコードはこんな感じです。

```Kotlin
import javax.servlet.annotation.WebServlet
import javax.servlet.http.HttpServlet
import javax.servlet.http.HttpServletRequest
import javax.servlet.http.HttpServletResponse

@WebServlet(
        name = "_ah_warmup",
        description = "handling warmup request.",
        urlPatterns = arrayOf("/_ah/warmup"),
        loadOnStartup = 1
)
class WarmupServlet : HttpServlet() {
    override fun doGet(req: HttpServletRequest?, resp: HttpServletResponse?) {
        // 特に何もしない
    }
}
```

Stackdriver Logging を見たところ、`/_ah/warmup` 宛のリクエストを正常に受け取れるようになりました。ウォームアップリクエストを使用しないという選択肢も考えましたが、その場合だと GAE/Java の起動だけで47秒かかってしまうため、上記の方法を採用しました。他にも何かいい方法があれば教えていただけると助かります🙏

※GAE の制約により、60秒を超える処理はタイムアウトするため正常に処理できない。Spring Boot の起動で47秒かかると他の処理に使える時間が13秒しかないので、重い処理を実行するとタイムアウトする可能性が高くなる
GCPでシャットダウン済みのプロジェクトに料金が発生した！

# はじめに
GCPでシャットダウン済みのプロジェクトに料金が発生しました。最終的に、料金は取り消してもらいました。結局原因はわかりませんでしたが、事例の共有の目的で以下に経緯を記載します。

# 概要
- GCPで12/1にシャットダウンしたプロジェクトについて、なぜか12/25時点で5,400円の料金が発生していました。（12/1時点では1,000円→12/25時点で6,400円)
- Google Cloud Platform Billing Supportとのやり取りの末、発生していた料金は取り消してもらえました。
- 原因は結局わかりませんでしたが、何らかの原因によりシャットダウンしたはずのプロジェクトに料金が発生することがあるようです。もし同じことがあったらその料金を取り消してもらえるかもしれないので問い合わせてみてください。また、当然ですが、アラートを利用するなど想定外の料金が発生しないようにすることが必要です。

# 経緯

## 12/1プロジェクトをシャットダウンした
gijiroku-190001というプロジェクトをシャットダウンし、以下のようなシャットダウンの確認メールを受け取りました。

<img width="646" alt="screenshot_2018-12-25 11.09.09 2.png" src="https://qiita-image-store.s3.amazonaws.com/0/94278/2e3afb45-b72a-ea35-f2c4-200fa3d5a863.png">

## 12/24シャットダウンしたプロジェクトに料金が発生していたことに気づいた
12/24シャットダウンしたプロジェクトに料金が発生していたことに気づきました。
12/1時点では1,000円くらいでしたが、6400円になっていました。

<img width="1053" alt="screenshot_2018-12-24 18.15.06 2.png" src="https://qiita-image-store.s3.amazonaws.com/0/94278/40c58724-0a06-9352-aae5-ac9f7795e9cf.png">

レポートを確認したところ、12/1以降 毎日300円弱の料金が発生していました。

シャットダウンし忘れたのかなと思い、IAMの管理>リソースの管理>削除保留中のリソースを確認したところ、削除保留中のリソースにプロジェクトgijiroku-190001が含まれていたので、シャットダウンし忘れではないようでした。

このとき、どうしたら料金発生が止まるか わからず、試しにプロジェクトgijiroku-190001を復元し、再びシャットダウンしました。

## 12/26にGoogle Cloud Platform Billing Supportに問い合わせた
次の日になっても料金の発生がとまらなかったため、以下のような趣旨の問い合わせをしました。
> なぜ、シャットダウンしたプロジェクトに料金がかかるのですか？料金を取り消してほしいです。

すぐに、問い合わせを受領した旨の確認メールが返って来ました。回答には2,3日かかるとありました。
その後、2,3日もかからず、その日のうちに以下のような返答がありました。
> ... when i check the project that you are pertaining to (gijiroku-190001), it was recently requested to be deleted and was deleted successfully last 24-Dec-2018 at 17:13:21. Thus, all the services used from December 01 to December 24 prior to the successful deletion of your projects will be billed on your account. ...
>> プロジェクトgijiroku-190001はつい最近の12/24に削除要求を受け、12/24 17:13に正常に削除された。だから12/1から正常に削除される12/24までの料金(=5,400円)が請求される。

確かに言う通り12/24にシャットダウンしましたが、そのシャットダウンは削除済みのプロジェクトgijiroku-190001を12/24に復元した後すぐに行ったシャットダウンのことを指しています。12/1から 復元する12/24までは確かにgijiroku-190001は止まっていたはずで、12/24の復元とその後の削除の間ほんの数分起動していただけで5,400円の料金がかかるのはおかしいと思い、以下のように返しました。
> 確かに12/24にシャットダウンしたが、それは同日復元した後に行ったシャットダウンです。プロジェクトgijiroku-190001は12/1から12/24の復元するまでは動いていないはずです。なぜ、料金が発生するのでしょうか。

このとき、12/1のシャットダウン確認メールのスクリーンショットを添付しました。

すると、以下のメールが返って来ました。

> ... I was able to check the screenshot that you provided stating that the project (gijiroku-190001) was shut down on 2018-12-01T 12:56:45+00:00. I will have this issue coordinated with one of our specialized teams for a possible adjustment.
>> スクリーンショットを確認した。料金の調整のため、専門のチームとこの問題について調整する予定だ。


## 12/28料金が取り消された
12/28に「専門のチーム」から、以下のようなメールを受け取りました。

> ...Upon further checking our specialized team already processed an adjustment in your billing account. ...This adjustment on the account is a one time courtesy and is subject for approval. 

>> さらに確認したところ、弊社の専門チームがあなたの請求先アカウントの料金の調整を既に処理しました。...この金額の調整は1回限りの好意であり、承認の対象となる。（？）

Google Cloud Consoleのお支払いを確認したところ、料金が取り消されていました。
<img width="1066" alt="スクリーンショット 2018-12-29 17.35.06 2.png" src="https://qiita-image-store.s3.amazonaws.com/0/94278/2999dbf7-669c-256d-785c-18c597426fb5.png">


結局、不具合があったのか、それとも私の操作に問題があった(何らかの理由でシャットダウンし損なった)のかわかりませんでしたが、料金を取り消してもらえました。
[CentOS7]Composerの導入とCodeigniterの設置

# はじめに

前回の記事では、[PHPとMySQLをアップデート](https://qiita.com/caique/items/cba366dfb008c09d82d9)した。
今回は[Composer](https://getcomposer.org/)をインストールして、[Composer](https://getcomposer.org/)を使って[CodeIgniter](https://codeigniter.com/)をインストールする。

# Composerのインストール

Composer：　https://getcomposer.org/

以下のコマンドでインストールする。

```
$ curl -sS https://getcomposer.org/installer | php
All settings correct for using Composer
Downloading...
 :
省略
 :
Use it: php composer.phar
```

`/usr/local/bin`ディレクトリがなければ作る。
そして、`mv`コマンドで`composer.phar`を移動する。

```
$ sudo mkdir -p /usr/local/bin
$ sudo mv composer.phar /usr/local/bin/composer
```

Composerのコマンドが使えるかテストする

```
$ composer help
Usage:
  help [options] [--] [<command_name>]
 :
省略
 :
```
Composerが使えるようになった。

# CodeIgniterのインストール

CodeIgniter：　https://codeigniter.com/

[CodeIgniter](https://codeigniter.com/)をComposerを使ってインストールする。
[@kenji_s](https://twitter.com/kenji_s)さんという方がパッケージにしてくださっている。
今回は、これを使ってコマンド一発でインストールする。

Github：　https://github.com/kenjis/codeigniter-composer-installer
使い方：　[CodeIgniter 3.0をコマンド一発でインストールするCodeIgniter Composer Installer](http://blog.a-way-out.net/blog/2015/04/24/codeigniter-composer-installer/)

まずCodeIgniterをインストールするディレクトリに移動する。
今回は仮に`/var/www/html`とする。

```
$ cd /var/www/html
```

`composer create-project kenjis/codeigniter-composer-installer`の後ろにプロジェクト名をつけると、その名前でディレクトリが作られる。その中にCodeIgniterのファイルがコピーされる。

今回は仮に`site1`とする。

```
$ composer create-project kenjis/codeigniter-composer-installer site1
Installing kenjis/codeigniter-composer-installer (v0.5.0)
 :
省略
 :
==================================================
`public/.htaccess` was installed. If you don't need it, please remove it.
If you want to install translations for system messages or some third party libraries,
$ cd <codeigniter_project_folder>
$ php bin/install.php
The above command will show help message.
See <https://github.com/kenjis/codeigniter-composer-installer> for details
==================================================
```

インストール完了！
`https://www.domain.com/site1/`にアクセスすればCodeIgniterのWelcomeページが表示されるはず。
もちろん`www.domain.com`はダミーです。

あれ？表示されない？

## Apacheの設定

PHPのソースがそのまま表示される。
そういえばPHPをアップデートした時に何も設定をしていなかったことに気付く。

http://php.net/manual/ja/install.unix.apache2.php

```
# vi /etc/httpd/conf/httpd.conf
```

ファイルの末尾に追加

```/etc/httpd/conf/httpd.conf
<FilesMatch \.php$>
    SetHandler application/x-httpd-php
</FilesMatch>
```

DirectoryIndexにindex.phpを追加

```/etc/httpd/conf/httpd.conf
DirectoryIndex index.html
↓　修正
DirectoryIndex index.html index.php
```
Apacheの再起動

```
# service httpd restart
```

`https://www.domain.com/site1/`にアクセスする。
CodeIgniterのWelcomeページが表示された。

※ `www.domain.com`はダミーです。

# まとめ

若干のトラブルはあったものの、無事にCodeIgniterをインストールできた。

この記事内では`/var/www/html`内にプロジェクトを展開したが、
実際にはCodeIgniter本体はブラウザからアクセスできない場所に置いた。
この「ブラウザからアクセスできない場所」をどこにするかをいつも迷う。
みなさんはどこに置いてるんでしょうかね？

次回は何をするか未定です。何しましょう。
はたらくをおもしろく！ 会社見学に遊びにいけるエンジニアの就職サービス？ WANTEDLY に初期登録だけしてみた感想。 @yumainaura

# きっかけ

トレンド入りしているこの記事

[1年目iOSエンジニアがAWS SAAを取得した勉強法 - Qiita](https://qiita.com/guitar_char/items/e4110c76dc03b3c68e0f)

https://qiita.com/guitar_char @guitar_char さん

プロフィールを見ると、TwitterがNotFoundだった

# その下にあるリンクが気になった

飛ぶ

# 30秒で登録できる何か

![image](https://user-images.githubusercontent.com/13635059/50537145-af48cc00-0b9f-11e9-891c-06b7433ac4c5.png)


# Home

![image](https://user-images.githubusercontent.com/13635059/50537227-85dc7000-0ba0-11e9-97dd-41a57b0216a0.png)

# オフィスに遊びにいける‥だと！？

![image](https://user-images.githubusercontent.com/13635059/50537150-b7a10700-0b9f-11e9-9833-1077070d2a7b.png)

# 社会人でもOK

![image](https://user-images.githubusercontent.com/13635059/50537153-c12a6f00-0b9f-11e9-9e1d-f4461d144901.png)

# わりと簡単ぽい

![image](https://user-images.githubusercontent.com/13635059/50537161-ce475e00-0b9f-11e9-89b7-441a1b8c539b.png)

# 都道府県のプルダウン勘弁してほしい‥

しぬほどストレスフル‥

![image](https://user-images.githubusercontent.com/13635059/50537166-e919d280-0b9f-11e9-975c-71379bada1e7.png)

# 連携
![image](https://user-images.githubusercontent.com/13635059/50537174-fc2ca280-0b9f-11e9-8140-aa7021aabef2.png)

# 胸に刺さる言葉

対話してるみたいだ。

![image](https://user-images.githubusercontent.com/13635059/50537181-08186480-0ba0-11e9-8052-f12fa379e829.png)

すばらしさ。

# スキル登録

自由入力も可能。

![image](https://user-images.githubusercontent.com/13635059/50537195-2a11e700-0ba0-11e9-9f87-8be24219aa1b.png)

勉强中ってのがある 

# 胸に刺さることば

![image](https://user-images.githubusercontent.com/13635059/50537203-3d24b700-0ba0-11e9-9fa0-4f29b273b3e6.png)

Appple製品の箱開いたときみたいなワクワク感が大事！

# 上げてから落としてくる

![image](https://user-images.githubusercontent.com/13635059/50537210-50d01d80-0ba0-11e9-92f6-f611c64a8582.png)

>プロフィール完成度が30%以下です。あなたを正しく伝えられるように充実させてみましょう。
Nav left Nav right

# とりあえずここまで‥30秒ではなかったけどわりとストレスなくして登録できた

離脱防止！よく出来てる

# 学生さん、就職考えてるひとはいかが…？

僕は現職がありますので‥

ここで手記は途切れている










<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
SSHキーと複数のGitHubアカウント

#はじめに

開発する時、たまに複数のGitHubアカウントがあります。だから、複数のSSHキーもあります。例：freelancer
私も１日に研究してしまいましたので、このポストを投稿して考えました。Macbook proを使っていますので、Macbook proに対してガイドいたします。

#解決
####１．SSHキーをバックアップする
実行するとき、たまに間違いことが発生されますので、安全ために、いつもバックアップしてください。

####２．SSHキーを作成する

`ssh-keygen -t rsa -b 4096 -C “your_email@example.com”`

“Enter file in which to save the key”が表示されます。
ファイル名を入力せずに、Enterボタンをクリックすると、デフォルトのid_rsaのファイル名になります。.sshフォルダーにid_rsaとid_rsa.pubが作成されます。
ファイル名（例：id_rsa_personal）を入力すると、ファイル名がid_rsa_personalになります。.sshフォルダーにid_rsa_personalとid_rsa_personal.pubが作成されます。

>注意：ファイル名のみじゃなくて、パスも入れてください。（/Users/you_computer_name/.ssh/your_file_name）

後で、パスワードを入力してください。

####３．SSHキーをGitHubアカウントに追加する
・GitHubにログインする
・SSHキーの設定に移動する
・パソコンで、以下のコマンドを実行し、SSHキーがコピーされる

`cat ~/.ssh/id_rsa.pub`
（id_rsa_personalになるとき、cat ~/.ssh/id_rsa_personal.pubになります）
・SSHキーをGitHubアカウントに追加する

####４．Git設定のファイルを作成する

`sudo nano ~/.ssh/config`
（パソコンのパスワードを供給してかもしれない）

以下のような設定を入力してください。

`Host github.com-user1`
`    HostName github.com`
`    User git`
`    IdentityFile ~/.ssh/user1`
`    IdentitiesOnly yes`

`Host github.com-user2`
`    HostName github.com`
`    User git`
`    IdentityFile ~/.ssh/user2`
`    IdentitiesOnly yes`

>Bitbucketになるとき、全てのgithub.comの場所はbitbucket.orgになります。
"Host github.com-user1"を絶対注意してください。

クロンするとき：

`git clone git@github.com:username/project_name.git`

上記だったら、デフォルトのid_rsaファイルになります。user1を使用するとき、以下のようになります。

`git clone git@github.com-user1:username/project_name.git`

プッシュするときも同じです。注意してください。
async/awaitを使用して、"regeneratorRuntime is not defined "エラーが出た時の対処

``webpack@4.28.2``、 ``babel-loader@8.0.4``環境下でasync/awaitを使用したところ"regeneratorRuntime is not defined"エラーがでました。その時の対処方法をメモします。


#対処方法

``@babel/polyfill``をインストールして

```
npm install @babel/polyfill --save-dev
```

webpack.config.jsのentryを以下のように変更すればOKです。

```js:webpack.config.js
 entry: ['@babel/polyfill', './src/index.js']
```

#メモ

babel-loader 8 でasync/awaitを動作させるためには、``@babel/polyfill``が必要です。
bable-loader 7 では @babel/polyfillの代わりにbabel-polyfillが必要になります。


#追記 (2019/07/30)

webpackを使用せず、`bable-cli` + `.babelrc`でbabelを使用している場合、`@babel/preset-env`のオプションで`targets`を指定することで対処できます。

```json:.babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true
        }
      }
    ]
  ]
}
```
これにより現在のnode.jsのバージョンに対応した形でコンパイルされるため、async/awaitが使用可能になります。(詳しくは[こちら](https://babeljs.io/docs/en/babel-preset-env#targetsnode)を参照してください)
SICP読書録 #24 2.2.2(続き) 木に対するマップ - 練習問題 2.32

[hiroshi-manabe様の日本語訳](https://github.com/hiroshi-manabe/sicp-pdf)を使わせてもらいます。
練習問題等は[Gauche](http://practical-scheme.net/gauche/index-j.html)で実行。

[前回はこちら](https://qiita.com/shuetsu@github/items/2cd6744131b54ea8af6f)

## 木に対するマップ

木の全ての葉を掛け算する手続き`scale-tree`を作る。

``` _.scm
(define (scale-tree tree factor)
  (cond ((null? tree) nil)
        ((not (pair? tree)) (* tree factor))
        (else (cons (scale-tree (car tree) factor)
                    (scale-tree (cdr tree) factor)))))
```

動かしてみる。

``` _.scm
gosh> (scale-tree `(1 (2 (3 4) 5) (6 7)) 10)
(10 (20 (30 40) 50) (60 70))
```

同じ動作の手続きを、`map`を使って定義してみよう。

``` _.scm
(define (scale-tree tree factor)
  (map (lambda (sub-tree)
    (if (pair? sub-tree)
      (scale-tree sub-tree factor)
      (* sub-tree factor)))
    tree))
```

### 練習問題 2.30

全ての葉を２乗する手続きを作る。

``` _.scm
(define (square-tree tree)
  (cond ((null? tree) nil)
        ((not (pair? tree)) (* tree tree))
        (else (cons (square-tree (car tree))
                    (square-tree (cdr tree))))))
```

`map`を利用する版も。

``` _.scm
(define (square-tree tree)
  (map (lambda (sub-tree)
    (if (pair? sub-tree)
      (square-tree sub-tree)
      (square sub-tree)))
    tree))
```

### 練習問題 2.31

これまでの、`map`を使った手続きは同じ構造をしている。抽象化できそうだ。

``` _.scm
(define (tree-map proc tree)
  (map (lambda (sub-tree)
    (if (pair? sub-tree)
      (tree-map proc sub-tree)
      (proc sub-tree)))
    tree))
```

この`tree-map`を使えば、`square-tree`と`scale-tree`は以下のように定義できる。

``` _.scm
(define (square-tree tree) (tree-map square tree))
(define (scale-tree tree factor)
  (tree-map (lambda (x) (* x factor)) tree))
```

### 練習問題 2.32

集合を渡すと、全ての部分集合の集合を返す手続を作ろう。

``` _.scm
(define (subsets s)
  (if (null? s)
    (list nil)
    (let ((rest (subsets (cdr s))))
      (append rest (map (lambda (x) (cons (car s) x)) rest)))))
```

実行結果。

``` _.scm
gosh> (subsets `(1 2 3))
(() (3) (2) (2 3) (1) (1 3) (1 2) (1 2 3))
```

なぜこれでうまくいくのか？

$(x_1,...x_n)$の部分集合の集合は、$(x_1,...x_{n-1})$の部分集合と、同部分集合にそれぞれ$x_n$を追加した集合の和だから。

例えば・・・
`(2 3)`の部分集合は、`(() (3) (2) (2 3))`。
`(1 2 3)`の部分集合は、`(() (3) (2) (2 3))`と、
これにそれぞれ1を追加した`((1) (1 3) (1 2) (1 2 3))`の和、になる。
初めてのVagrant up で Timed outのエラーが出て進まない場合

初めてのVagrant up で、
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
から進まず、
Timed out while waiting for the machine to boot.
というエラーメッセージが出る場合

自分の（ThinkPad使用の)場合は、
１．BIOS Setup Utilityを起動。（OS起動途中にEnter）
２．SecurityのタブからVirtualizationを選択。
３．Intel (R) Virtualization Technology と intel (R) VT-d Feature　の両方をEnabledにする。（Virtualization Technologyだけでは成功しなかった。）
４．ウイルスソフトがavastの場合、メニュー→設定→トラブルシューティングの中の、「ハードウェアによる仮想化支援機能を利用する」のチェックを外す。

以上でvagrant upが成功しました。
「Amazon Web Services 基礎からのネットワーク&サーバー構築 改訂版」AWS CloudFormation 書き換えチャレンジを完走した



最近 AWS CloudFormation (CFn)がドリフト検知（変更差分の検知）に対応して便利らしいということで、いっちょ CFn 入門してみようと「[Amazon Web Services 基礎からのネットワーク&サーバー構築 改訂版 | 玉川憲, 片山暁雄, 今井雄太, 大澤文孝](http://amzn.asia/d/8CnpTdh)」の内容を CloudFormation テンプレートに書き換えるチャレンジを、以下の記事を真似してやってみた。

- [AWS CloudFormation への入門に「Amazon Web Services 基礎からのネットワーク&サーバー構築」を使ってみた - えいのうにっき](https://blog.a-know.me/entry/2017/02/13/222100) 
- [「Amazon Web Services 基礎からのネットワーク&サーバー構築 改訂版」でAWSサーバ構築とCloudFormationに入門した - $shibayu36->blog;](https://blog.shibayu36.org/entry/2018/04/17/193000) 

### どんな感じ？
本の内容は、VPC のアドレス空間指定、CIDR表記の解説から始まり、最後は WordPress が動くネットワーク&サーバーを構築するという流れの中で、各リソースの役割等を解説していくハンズオン資料といった感じ。もともと「CFn の感じがつかめる素振りに良い短めの題材」として選んだがこの書籍、前評判から想像していた以上に良書で、200ページあまりの薄さで、今までなんとなく扱っていた VPC, Subnet, RouteTable, SecurityGroup, InternetGateway, NAT 周りの解像度がずいぶん高まった。内容は結構詰め込んでるのでインフラ初心者が一人でやるにはハマりどころが多そう。相談できる相手が必要な気はする。

CloudFormation で書き換えるのも良い学習になった。書籍内ではAWS マネジメントコンソール画面から設定する内容を CFn に置き換えていったのだが、画面をポチポチすると自動設定されたり、スルーされている未使用パラメーターのデフォルト値も CFn は設定値として考慮が必要で、公式ドキュメントを読み込まないと書けないため、学びが強かった。

#### 備考

- 第八章の DB サーバーの代わりに RDS を建ててみたが、 DBSecurityGroup は EC2 用とは違う制約がありハマった。
- テンプレートの管理方法や、書式バリデーション方法とか、CFn 制作プロセスの高速化等は別で考える必要が出てくる。
- 実際試してみたところドリフト検知優秀。

非常に学びのある本とチャレンジでした。オススメです。

※ 作成した CFn テンプレートは github に章ごと PR 形式でまとめました。参考にどうぞ。
[kzkick2nd/aws-network-basis](https://github.com/kzkick2nd/aws-network-basis)

### 参考
- [AWS CloudFormation への入門に「Amazon Web Services 基礎からのネットワーク&サーバー構築」を使ってみた - えいのうにっき](https://blog.a-know.me/entry/2017/02/13/222100)
- [「Amazon Web Services 基礎からのネットワーク&サーバー構築 改訂版」でAWSサーバ構築とCloudFormationに入門した - $shibayu36->blog;](https://blog.shibayu36.org/entry/2018/04/17/193000)
Vue.jsでハイパーカジュアルゲームを作れるのではないか。

[Vue.js #1 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/vuejs)アドベントカレンダー6日目の記事です.

Vue.jsアドカレ参戦したくていつのまにか枠が埋まってたんですけど、今更枠が空いたので投稿します。

# ハイパーカジュアルゲームとは

FPSのように複雑に作り込まれたゲームとは違い、デザインは極力シンプルでかつ遊び方が直感的にわかるゲームのこと。

ハイパーカジュアルゲーム(以降HCG)はここ数年で一気に伸びてきており、とある企業は有名なHCGの会社に2億ドルの出資をしたとか。

# なぜVue.jsなのか

私自身Vue.jsを触ってまだ半年くらいですが感想として「アニメーションが簡単で綺麗」ということを一番に思いました。
簡単にアニメーションをつけれて、かつシンプルなデザインで良いのであればHCGをVue.jsで再現できるのではないかと考えました。

# 試しに作ったもの
![2048.gif](https://qiita-image-store.s3.amazonaws.com/0/55275/edaf909c-c3ce-17c1-e301-706d609ff6e5.gif)

簡単につくれそうなものに2048というゲームがあったので作ってみました。概要としては、4x4のマスの中の数字を上下左右に動かして同じ数を足し、できるだけ大きい数字を作るゲームです。所要時間は**2~3時間**でした。
gridレイアウトにdiv要素をいれて、それらをswapするだけのシンプルな実装です(~~コードは汚いので要望があればgithub公開します~~)→公開しました。

https://github.com/kerukukku1/vue2048

# ダメそうなところ

HCGが親しまれている理由として、スマホで手軽にできるという点が一番にあると思っています。この場合、ブラウザ上で動くゲームは今の需要にあっているのかと聞かれると素直に肯定はし辛いです。ただ、Weexなどのモバイル版Vue.jsもあるので、今後に期待したいというところだと思います。

# まとめ

簡単に作れるんじゃないか？と安易な気持ちでやってみたのですが、本当に簡単に作れてしまいました。Vue.jsのtransitionおそるべし。今はUnityなどのエンジンを使ってゲームを作成するのが主流だとは思いますが、簡単なHCGであれば、Vue.jsを使うことでさらにサクッと作ることができるのではないでしょうか。
LGTM画像がエンジニアの生産性を上げる @yumainaura

はず。

# 自然の画像が脳を癒すことは科学的事実らしい

![image](https://user-images.githubusercontent.com/13635059/50536778-6d1d8b80-0b9b-11e9-9d7c-cc99dff1c754.png)

# 猫も。

![image](https://user-images.githubusercontent.com/13635059/50536784-7ad31100-0b9b-11e9-9791-3e2ba67392f2.png)

# LGTM画像の選び方は？

PRを作った人が好きなものが良い。

アニメ好きならアニメ。
犬好きなら犬。

# LGTMは世界平和につながる

lgtm とか小文字テキストだけで書かれたときの自分のテンションの下がりようを考えても分かる。

その逆。








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
全ロボ2018備忘録

全ロボ2018に参加したのでその備忘録をば。

#目次
- 全ロボとは
- 足周り関連が熱い
- CNCの利用
- これからのロボコン

##全ロボとは
全ロボの正式名称は全国ロボコン交流会。　　
主に高専ロボコン界隈の人間が集まる会合。現役高専ロボコニストからOBOG、さらには企業の方なども集まるけっこう大きな集会。クリスマス頃に行われることが多いことからロボコニストのクリぼっち回避集会と呼ばれることもあったりなかったり。

##足回り関連が熱い
#####FANGFAのオムニ
HUNFA社 [http://www.hangfa.com/EN/index.html](http://www.hangfa.com/EN/index.html)のオムニホイールが近年人気。そういえばよく見る。　　
これに変えただけで応答性とかが向上するらしい。たぶんコロの問題。コロの色に白と黒のカラバリがあり、白のほうが若干軟らかい。そのためグリップが効く。が、よく削れるため消耗品。札束で頬っぺた引っ叩いていけ。

#####ウレタン
　人人人人人人人人人人人人人人人人人人人人
＜　東北のウレタニストが布教にやってきた！＞
　ＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶ　　
信者になりましゅ。って思っちゃうくらいには有用性がある。この技術があったら2015年のローラーがすごく簡単に作れたろうな、と思う。円筒形の物体の表面にμが高い物を配置したいときにすごく使える技術。来年からはやりそうだな...

#####4輪ステアリングホイール
そういえば4輪ステアもツイッタで見るのは東北のウレタニスト氏の機体が多いな...
4輪ステア自体は2017年のロボコンから見かけるようになった気がする。ロボット同士のぶつかり合いというルール上、メカナムやオムニと違って、すべてのタイヤにトラクションがかかるし、原理的にロスになるエネルギーも無い、接地部分を点でなく線（タイヤが軟らかければ面）に出来るなどの点が評価されて、4輪ステアを使う高専がそれなりの数いた。今年はスリップリングを利用して配線が絡まることを解決するなど、より洗練された形になっているらしい。知らんけど。

##CNCの利用
CNC自体は以前から使われている技術である。面白いと思ったのはCNC自体ではなくて3Dプリンタとの組み合わせの方。たぶんいろんな高専が試行錯誤していると思うけど、結局CNCの精度を生かしつつ、3Dプリンタの自由度を生かそうとすると、嵌め合わせが一番良いみたいである。固定がネジ穴だとガバくなるし、嵌め込みより精度出そうとするとアルミ削り出せってなるから、このあたりがちょうどよいバランスの様子。

##これからのロボコン
今年特徴的だと思ったのがメカナムホイールのことをあまり聞かなかった事である。これはどうにもメカナムが自動制御に向いていないという点からくることらしい。今年、高専ロボコンはついにルールに自動制御の項目が盛り込まれた。　　
これは全国大会のMCなどでも聞かれたことだが、自動車の自動操縦やドローンなどといった時代背景を反映したものだという。ついに訪れた社会課題解決型ロボコン時代といったところだろうか。実際、現代のロボットなどで自律的な制御は書かれていないほうが珍しいだろうし、今の、これからの時代のことを考えればさもありなんといった印象である。　
　　
時代は変わる、なんて陳腐な言葉であるが今の高専ロボコンにはぴったりだろう。始祖たる森先生もすでに退かれた。これからは誰が、”アイデア対決”全国高専ロボコンを率いていくのだろうか。きっともう、あんなに生き生きした、まったく役に立たないロボット達を見ることはないだろう。これからはたぶん、何か役に立ちそうで凄そうなロボット達の時代がやってくる。きっとそういう時代なのだ。
教えてQiita知恵袋！怪奇現象？Mac画面がなんらかのハードウェア原因によって震えだした件、たぶん。動画あり。 @yumainaura

# 回答なくてごめん。

あまりにも恐怖だったので😁

# 時は例録二十五年

https://twitter.com/YumaInaura/status/1078907359634776065

![image](https://user-images.githubusercontent.com/13635059/50536722-ae616b80-0b9a-11e9-920d-597c2b2f7737.png)

![image](https://user-images.githubusercontent.com/13635059/50536723-b4efe300-0b9a-11e9-95ce-d8fedf466cf3.png)

![image](https://user-images.githubusercontent.com/13635059/50536728-bf11e180-0b9a-11e9-83b0-4d594430c28a.png)

# 現場検証

スターバックス大阪MeRise店
ホットミルクを飲んでいた
充電していた
ミルクを少しタッチパッドにこぼした
何も手を触れていないのに30秒ほど震えていた
あわててiphoneで撮影したのがあちら
近くにはiphoneが二台あった
iphoneも充電していた



詳しい人いませんか？








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
vue.jsに関する知識のまとめ

# はじめに
vue.jsの勉強をしていてたまに出てくるワードの解説をこの記事に載せておきます。

# SPA
SPAとは「Single Page Application」の頭文字をとったWebアプリケーションのアキーテクチャーのことです。

## メリット・デメリット
**メリット**
1. 通常のWeb ページでは実現できないユーザー体験を実現できる。
2. 高速なページ遷移を実現できる。
3. ネイティブアプリの代わりとして提供することができる。

**デメリット**
1. 実装コストが大幅に増える。
2. 初期ローディングにかかる時間が増える。
3. 開発者が少ない。

## SPAを用いた有名な事例
- [Facebook](https://www.facebook.com/)
- [Google Map](https://www.google.co.jp/maps/)

## 出てくるライブラリ?や知識
- [vue-router](https://router.vuejs.org/ja/)
    - [router-link](https://router.vuejs.org/ja/api/)
- [HTML5 History モード](https://router.vuejs.org/ja/guide/essentials/history-mode.html)

## vulでの実現するにあたって
**使い方**
@tiwu_official 様
[Vue.jsとVuexとvue-routerとwebpackで単一ファイルコンポーネント化してTodoListを作ってみた](https://qiita.com/tiwu_official/items/0b681d59c4c67dbad42c)

# 表示方法について　$mount VS el
vuejsを勉強していくと表示寺に「$mount」 vs 「el」の二つの記載が存在します。

## $mountの場合
$mount必要に応じてVueインスタンスを明示的にマウントできます。
ページに特定の要素が存在するか、非同期プロセスが完了するまでインスタンスのマウントを遅らせることができます。
1秒後に画像を表示するサンプルを作ってみたので確認してみてください。

**サンプルの挙動**
![sample.gif](https://qiita-image-store.s3.amazonaws.com/0/56169/58a43675-d7fa-a8ca-586d-f71ca725b6ad.gif)

**ソースコード**

```index.html
<div id="todo"></div>
```

``` main.ts
import Todo from './Todo.vue'
import Vue from 'vue'

const todo = new Vue({
  el: '#todo',
  render: h => h(Todo)
})

setTimeout(() => {
  todo.$mount('#todo');
},1000)
```

``` Todo.vue
// テンプレートの作成
<template>
  <div class="home">
    <img alt="Vue logo" src="./assets/logo.png">
  </div>
</template>

// cssの作成

```

https://stackoverflow.com/questions/46831452/difference-between-mount-and-el-vue-js

## elの場合 
読み込まれた瞬間にtodoタグにマウントされます。
静的なものに対してはこちらの処理で対応していくべきかと思います。

```index.html
<div id="todo"></div>
```

``` main.ts
import Todo from './Todo.vue'
import Vue from 'vue'

const todo = new Vue({
  el: '#todo',
  render: h => h(Todo)
})
```

``` Todo.vue
// テンプレートの作成
<template>
  <div class="home">
    <img alt="Vue logo" src="./assets/logo.png">
  </div>
</template>

// cssの作成

```

# computed vs methods
vuejsを勉強していくにつれて「computed」と「methods」がでてきます。

どもも 様の記事
[Vue.jsとVuexとvue-routerとwebpackで単一ファイルコンポーネント化してTodoListを作ってみた](https://udomomo.hatenablog.com/entry/2017/12/11/213904)

## computed　(演算向け)
演算を行うため
後ほど追加

## methods (機能向け)
機能向け
後ほど追加

# 他にもあれば...
後ほど追加



## 参考サイト
https://www.oro.com/ja/technology/001/
@Qiita のトレンドの下の空きスペースは活用しないんだろうか… @yumainaura #UX UI #サービス論

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/21521116-a486-e068-0612-6d08c6b2b049.png)

ここに「タイムライン」を置いたり遅延読み込みしたりしても良いはず。

# 意図あってのこと？

タイムラインにシームレスに移動するとマズい理由は思いつかない。

おそらく単に左側でタブ切り替え

# トップページの世代交代

だけど「ご隠居」もご顕在であってほしい。ひっそりと下に佇むとしても。

![image](https://user-images.githubusercontent.com/13635059/50536656-fd5ad100-0b99-11e9-9fb3-a227576b07ac.png)


# UI UX 的に学べることは？

新規ユーザーに優しく
熟練ユーザーにも優しくあることはできるはず

# かゆいところに手が届く

その伸ばした手の先に「ぽいっ」と置いてあげるだけで良いもの

# 空きスペースを「必要としているユーザー」のために

ああ、うまく言えない。








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Redisを本番運用する前に知っておくべきだったこと

# 知っておきたかったこと
## 日本語翻訳のドキュメントがある
英語だから後回しにしてたけど、日本語翻訳あるなら早く読もう！
Redisは扱いが難しくなく、普通に使うだけならある程度仕組みを理解してなくても使えちゃうのでこういうことがおきるんだな。。

公式ではないみたいだけど、大体の雰囲気を掴むのには十分な情報量と正確さだと思うので一読しておくと良いかも。

データの永続性:
https://redis-documentasion-japanese.readthedocs.io/ja/latest/topics/persistence.html

## Redis使いは定期バックアップを当たり前にしている（そのコマンドが用意されている）
バックアップ生成コマンドの`save`には、引数が渡せる。
`save 60 1000`
とすると、**60秒毎に1000個の以上のキーの変更があったらバックアップを取る**ようになる。

## バックアップ関連作業をする前に知っておきたかった
ワーキングディレクトリには保存コマンドを実行してはじめて`dump.rdb`(名前はredis.confで変更可能)が生成される。

# その他Tipsメモ
## データファイル名の変更

```shell:redis.conf
dbfilename dump.rdb
```
dump.rdbの部分を好きなファイル名にする。

## データファイルの保存ディレクトリ変更
```shell:redis.conf
dir /usr/local/var/db/redis/
```
dirの部分を好きな場所にする。

## バックグラウンドで起動する
`--daemonize yes`オプションを使う。

```
redis-server /usr/local/etc/redis.conf --daemonize yes
```
こんな感じで設定すると、
- 設定ファイルは`/usr/local/etc/redis.conf`を使い、
- バックグラウンドで起動する

という命令になる。（僕はいつもこのコマンドで起動してます。）

## データファイルの保存場所をコマンドラインから取得（confファイルを開かずに）
redis-cliの中で
```
config get dir
```
とする。
configコマンドは他の設定も取れる。

## バックアップ
`save`:
通常保存。保存が終わるまでアクセスできないので本番環境では非推奨。

`bgsave`:
バックグラウンドで保存処理を実行する。保存中も動いているのでアクセス可能。本番環境で実行するならこっち。

`lastsave`:
　bgsaveが成功したか確認する。bgsaveの最終timestampを返してくれる。
OPC UA メモ

# OPC UA 情報
- [OPC Foundation](https://opcfoundation.org/)
- [日本OPC協議会](https://jp.opcfoundation.org/)
- [opc62541](https://open62541.org/)
- [AWS Greengrassの情報](https://docs.aws.amazon.com/ja_jp/greengrass/latest/developerguide/opcua.html)

# OPC UA ソースコード
- https://github.com/OPCFoundation
    - OPC Foundation公式
- https://github.com/open62541
- https://github.com/FreeOpcUa
プログラマの英語の勉強なら！Github issueでエンジニアリングについて書いてみては？ @yumainaura

![image](https://user-images.githubusercontent.com/13635059/50536371-0c8c4f80-0b97-11e9-8ee0-59b464e601f3.png)

# もうほんと原始的な言葉を散りばめていく

![image](https://user-images.githubusercontent.com/13635059/50536382-229a1000-0b97-11e9-8d02-673750d04a8d.png)


# 文法一切無視！

タイトルだけ書くとかでも良い。

# 日本人は何故英語ができないのか？

原始人じゃないから。

原始人から始めよう。

高級軍人じゃあるまいし。

![image](https://user-images.githubusercontent.com/13635059/50536391-4198a200-0b97-11e9-8772-b0f8d68d6fb8.png)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
IFTTT 勝手にチュートリアル Github Issue 作成で Twitter に投稿 @yumainaura

https://ifttt.com/create 

![image](https://user-images.githubusercontent.com/13635059/50536266-e6b27b00-0b95-11e9-85bb-0aab41bb83db.png)

# IF

![image](https://user-images.githubusercontent.com/13635059/50536268-ec0fc580-0b95-11e9-9258-f1bed2717543.png)

# New issue

![image](https://user-images.githubusercontent.com/13635059/50536270-f7fb8780-0b95-11e9-812c-31b7e3154fab.png)


# Then 

![image](https://user-images.githubusercontent.com/13635059/50536274-02b61c80-0b96-11e9-81d1-859c7474dc23.png)

![image](https://user-images.githubusercontent.com/13635059/50536277-09449400-0b96-11e9-98b6-28f506f3ff99.png)

# Applet


![image](https://user-images.githubusercontent.com/13635059/50536283-182b4680-0b96-11e9-92bb-cdea5d4e555f.png)
![image](https://user-images.githubusercontent.com/13635059/50536285-211c1800-0b96-11e9-932f-04b0b3e2d2bb.png)


# Created

![image](https://user-images.githubusercontent.com/13635059/50536288-2711f900-0b96-11e9-8a39-12f82ab438ce.png)

# URL example

https://ifttt.com/applets/92105406d-if-any-new-issue-then-post-a-tweet-to-yumainaura

# プライベートレポジトリのIssueはどうなる？

さすがにPostされないとは思うが注意。

自分は登録しておいてなんだが、念の為disableしておいた。








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Raspberry Pi B+ PythonでLチカ

# 環境
+ RaspberryPi B+　×１
+ 3.5inch LCDディスプレイ(QC35C-JP@Quimat)　×１
+ ブレッドボード　×１
+ ジャンパー線(メス-オス)　×２
+ 抵抗(330Ω)　×１
+ LED(青)　×１
+ Python 2.7.13

# 完成イメージ
完成イメージです。
![001_.jpg](https://qiita-image-store.s3.amazonaws.com/0/333390/f7f2ee77-f165-1bf6-12f7-f8d2d7cff98d.jpeg)

# 事前準備
Raspberry PiのGPIOをPythonで制御するため、RPi.GPIOパッケージを事前にインストールしておきます。

```
$ sudo pip install rpi.gpio
```

# Pythonコード
今回作成したPythonのコードです。

```python:RasPiLChika.py
import RPi.GPIO as GPIO
import time

GPIO.setmode(GPIO.BCM) 
GPIO.setup(2,GPIO.OUT)

for iLoop in range(5):
    GPIO.output(2,True)   
    time.sleep(1)
    GPIO.output(2,False)   
    time.sleep(1)

GPIO.cleanup()
```
上記コードは、[github](https://github.com/TTTakeshi/RasPiLChika)にもアップしましたので、
以下のコマンドでも実行可能です。

```
$ git clone https://github.com/TTTakeshi/RasPiLChika.git
$ cd RasPiLChika
$ python RasPiLChika.py
```


# 配線
以下のように配線しました。

+ GPIO2(ピン番号3) ⇔ [f3]　_※GPIO2は、3.5inch LCDディスプレイ(QC35C-JP@Quimat)のシルクではSDA1_
+ [j3] ⇔ 青LED(長)／青LED(短) ⇔ [j1]
+ [f1] ⇔ 抵抗(330Ω) ⇔ [e1] 
+ [a1] ⇔ GND(ピン番号39)

_※[　]内は、ブレッドボードの位置_

3.5inch LCDディスプレイ(QC35C-JP@Quimat)の端子は、シルクとイメージが異なります。
GPIO2(SDA1)とGNDともに、横から見て上段側の端子となります。
![002_.jpg](https://qiita-image-store.s3.amazonaws.com/0/333390/4f4b0acf-6c13-4034-58d0-2cd9ec26097f.jpeg)

# 機材購入先情報
各機材購入先の情報です。

RasberryPi B+　×１
https://www.amazon.co.jp/gp/product/B07G7WSMQ2/ref=oh_aui_detailpage_o00_s00?ie=UTF8&psc=1

3.5inch LCDディスプレイ(QC35C-JP@Quimat)　×１
https://www.amazon.co.jp/gp/product/B075K56C12/ref=ppx_od_b_detailpages00?ie=UTF8&psc=1

ブレッドボード　×１
ジャンパー線(メス-オス)　×２
抵抗(330Ω)　×１
LED(青)　×１
https://www.amazon.co.jp/gp/product/B075167Y4D/ref=oh_aui_detailpage_o05_s00?ie=UTF8&psc=1

# 今後の予定
Pythonのバージョンを2→3へ更新する。
（この投稿記載時に、Raspberry PiのPythonバージョンが2と気が付きました）

# 余談
思ったより、簡単にできました。
改めて、Raspberry Piの可能性を感じました。

あと、
IchigoJamでLチカした際は、GPIOポートと直接LEDを接続していて期待通り点灯してくれたのですが、
Raspberry Pi B+では、電流が多いようで、抵抗をつながないとLEDが壊れてしまいました（2つ破壊）。
Seabornのheatmapで東京の月別平均値を並べてみた。

###seabornでヒートマップ

seabornていろいろできるんですね。
覚えたてのヒートマップで遊んでみました。
ヒートなので気温を描いてみました。
普通の棒グラフの方がわかりやすいという指摘はさておいて...

>こちらのデータを利用させていただきました。
>[気象庁](https://www.jma.go.jp/jma/menu/menureport.html)


今回使用したLibraryです。

```python

import numpy as np
import matplotlib.pyplot as plt
import pandas as pd
import seaborn as sns

```



元のデータはこのような状態です。


```python

ダウンロードした時刻：20189 16:04:44,,,,
,,,,
,,東京,東京,東京
年月,,平均気温(℃),平均気温(℃),平均気温(℃)
,,,品質情報,均質番号
Year,Month,Temp,,
2000,1,7.6,8,1
2000,2,6,8,1
2000,3,9.4,8,1
2000,4,14.5,8,1
〜
2017
```

まずいらない行と列意外のデータをpandasでデータベース化します。

```python
tokyo_temp = pd.read_csv("tokyo_temp2000-2017.csv",usecols=range(0, 3), header=5)
```
そしてyx軸に対応させるようにピボット化させます。

```python
df_temps_pivot = pd.pivot_table(data=tokyo_temp, values='Temp', columns='Year', index='Month', aggfunc=np.mean)
#aggfunc=np.meanは無くても可能,xy座標が重なってしまったデータの処理のため

```
プロットします。

```python
plt.figure(figsize=(12, 9))
sns.heatmap(df_ftemps_pivot, annot=True, fmt='g')
plt.title('tokyo_temp2000-2017')
plt.savefig("heatmap.png")
plt.show()

```

![heatmap.png](https://qiita-image-store.s3.amazonaws.com/0/302092/3608bae0-b109-a343-21ea-dc225f604179.png)

8月が暑いということがわかりますね。
よく考えたら日本は四季があるということは1年を通しての気温の分散値が大きいという意味ですね。住む場合の暮らしやすさの指標の一つとなりそうです。

今回は欠損データがなかったのできれいにプロットできましたが、欠損がある場合はどうしたらいいのかや、その信頼性はどうやって定義できるのかが勉強したいところです。
win10でJS開発環境構築 chocolatey, node.js, mongodb..etc

#概要
windows10マシンを買ったので開発環境を1から構築したときのメモ
## 環境
- surface pro 6 
- windows10 home

# 1. Chocolatey : package manager
- 参考:【Chocolatey入門】導入から注意点、今後の可能性まで
- https://qiita.com/kangetsu121/items/b6352b547cd32e71bc65


## Install Chocolatey
 - cmd.exe を管理者コマンドで実行
 - 公式サイトにある長いコマンドをコピペで実行
 - https://chocolatey.org/install#installing-chocolatey

インストール確認

```powershell:command-or-powershell

>choco -v
0.10.11
```
 

# 2. Mongodb 4
参考
 - [Windows版MongoDBのインストール・MongoShellを通してCRUDコマンドを打ってみる](http://kageura.hatenadiary.jp/entry/2018/01/09/Windows%E7%89%88MongoDB%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%83%BBMongoShell%E3%82%92%E9%80%9A%E3%81%97%E3%81%A6CRUD%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E6%89%93)


## install and confg mongodb

install, setup

```:command-admin
# install
> cinst mongodb

# make dir
> cd /
> md \data\db

# test Run Server
> cd C:\Program Files\MongoDB\Server\4.0\bin
> mongod

#tet run Cmd
> cd C:\Program Files\MongoDB\Server\4.0\bin
> mongo
```

## mongodb: pathを通す

windowsの環境変数Pathへの登録
- システムプロパティ＞詳細設定＞環境変数＞Path＞編集
- 「C:\Program Files\MongoDB\Server\4.0\bin」を追加



# 3. 周辺ツールcurl, wget, etc..
- PowerShellでcurl, wgetを使いたい
- https://qiita.com/gentaro/items/af0d0eba7e9aca1a6416

Install curl,wget

```bash:cmd.exe(Admin)

> cinst curl wget -y
```

不要なエイリアス削除

```

> notepad $profile
---
#Alias
del alias:curl
del alias:wget
---
```

powershell 権限変更

```powershell:powershell(Admin)

>Set-ExecutionPolicy RemoteSigned
```

Install 確認(version)

```powershell:vscode-terminal
> curl --version
> wget --version
```

#4. Git for windows
```bash:cmd.exe(admin)
# install by choco
> cinst git
# reload env
> refreshenv
# test Git
> git --version

```

## config: CRLFへの自動変換無効化
https://qiita.com/uggds/items/00a1974ec4f115616580

```
> git config --global core.autoCRLF false
```

# 5. NVM, Node.js, yarn, windows-build-tools
 - [Windows8にChocolateyでNode.jsをインストールしてVue.js(Nuxt.js)をちょこっと試してみた](https://qiita.com/shiro01/items/a300b6d5b572a314ce5e)
 

```bash:cmd.exe(admin)
# install by choco
> cinst nvm -y
# install node.js v.11
> nvm list available
# Install LTS(latest)
> nvm install 10.15.0
# Show installed node.js list
> nvm list
    10.15.0
> nvm use 10.15.0

# Yarn 
> npm install -g yarn
> yarn -v

# Windows Build tools
>npm install -g --production windows-build-tools

```

# 6. VSCode
本体
- 公式サイトから普通にインストール
- https://code.visualstudio.com/download
## vscode: Vue.js Extension Pack
参考
 [VSCode+Vue.jsを使用するならインストールするべき拡張機能と設定](https://iwb.jp/vscode-vuejs-extensions-install-settings/)

- Vue.js Extension Pack　をインストール
-
CircleCIのmachine executor(docker-compose)で動くrspecのテストカバレッジをCode Climateに送る

# 前提
- CircleCI 上で`docker-compose run`でテストを回している
- simplecov の結果を Code Climate に送りたい

# 解決
after-build の時に Dockerfile で定義した WORKDIR の名前を prefix で渡してあげる必要がある

```
./cc-test-reporter after-build --prefix 'WORKDIR名' --coverage-input-type simplecov --exit-code $?
```

その他の設定はこちらの記事通りでいけました(ありがとうございます)
https://qiita.com/paranishian/items/478b92cedda84e812cad

# ついでに

CircleCI の Artifacts からもカバレッジを参照したい場合、ググると色々な情報が載ってますが
2018年末の現状では、デフォ設定のまま下記を `.circleci/config` に記述すればよい。

```
- store_artifacts:                                                                                                                                                                         
　　path: coverage/
```
福岡でElixir／Phoenixのもくもく会を運営したので振り返りを書いてみる

こんにちは、@koga1020です。ついに2018年も今日含めてあと3日で終わりますね。

今年は福岡Elixirコミュニティ「fukuoka.ex」にてもくもく会の運営を行いました。振り返りに適した年末なので、どう運営を行ってきたのか、振り返ってみました。何かのコミュニティのもくもく会を始めたい方の参考になればと思います。

## もくもく会とは
念の為説明しておくと、もくもく会とは参加した人が各自調べ物をして、手を動かして、、というのを「黙々と」やるイベントです。

ハンズオンやセミナーとの違いは以下記事を参照すると良いと思います。

[もくもく会のススメ](https://qiita.com/kobake@github/items/68528dfa24ec159ce617)

## fukuoka.exのもくもく会

どんな感じでやっているかは、一度イベントページを見ていただくのが早いと思うので、直近のイベントページを貼っておきます。

[fukuoka.ex#18：Elixir／Phoenixもくもく会～入門もあるよ（19:00〜）](https://fukuokaex.connpass.com/event/113099/)

上記ページのようなイベントを、およそ月1回の頻度で開催しています。

fukuoka.exもくもく会では、以下のような取り組みを行いました。

- もくもくすることの共有
- zoomでのリモート参加
- 初心者と経験者の2トラック制
- zoom画面共有を利用した、経験者による発表

順に説明します。

### もくもくすることの共有
運営側で以下のようなGoogleスプレッドシートを用意し、

- 参加者のやること
- もくもく会で参照したページなどのメモ
- 会の感想

を収集しています。


<img width="1395" alt="スクリーンショット 2018-12-29 16.45.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/99116/3b98a439-0514-fded-deb0-fd3f7cac6e65.png">


このシートを作るために、[connpass](https://connpass.com/)のイベントページをスクレイピングして、参加者名の一覧をテキストで取得するスクリプトを自作して運用しています。

### zoomでのリモート参加

[zoom](https://zoom.us/jp-jp/meetings.html)というビデオ会議のツールを利用し、当日会場に来れない方でも自宅やカフェからもくもく会から参加できるような仕組みを用意しています。

zoomはPCにアプリさえ入れておけば、URLを共有するだけでビデオ会議をつなぐことができます。

もくもく会はconnpassから参加受付をしているので、connpassでのメッセージを通じてzoomのURLを配布し、当日利用してもらう流れで運営を行っています。

東京や高知から参加してくださる方もいらっしゃり、嬉しい限りです！

### 「初心者トラック」と「経験者トラック」の2トラック制
connpassの参加申込の段階で、

- 入門者トラック
- 経験者トラック

と入り口を分けています。

入門者トラックの方はfukuoka.ex代表の @piacere_ex が用意した[Elixir/Phoenix入門記事](https://qiita.com/piacere_ex/items/6714e1440e3f25fb46a1)をやってもらい、経験者トラックの方は自由にもくもくしてもらう流れで進めています。

「とりあえず入門者コースでもくもくしに行ってみるか」という方もいらっしゃるので、**入門者にコンテンツを用意している**のは大きな特徴かなと思っています。

### zoom画面共有を利用した、経験者による発表
「経験者トラック」で参加された方には、知見の共有を目的に、もくもく会で取り組んだ内容を共有してもらう時間を設けています。

経験者全員がPCにプロジェクターにつないで発表して、、というのを順番に回すのは大変なので、zoomの画面共有を活用しています。

- 経験者コースの方には会場参加の方でもzoomをインストールしてもらい、
- zoomの画面共有を利用して、書いたコードやコンソールを説明し、
- また次の方が画面共有をして説明に入る

といったやり方で経験者による発表を進めています。

リモートの方でも発表を聞けるし、会場でもスムーズに発表を進めることができるので、このやり方は導入して良かったなと思っています。

## 今後の課題
運営をしていく中で、参加者がやったことの収集がまだ弱いなと感じています。

- ハマりどころ
- 参考にして良かった記事

などは知見の塊なので、さらに収集を重ねて、コミュニティの知見に昇華していけたらなと常々感じています。

もくもく会を通して、入門者コースの人が爆速で経験者コースに移っていけるような会を作っていけたらなと考えています。

## まとめ
- 「他にもこんなことやると良いかもよ」というアイデアがある方、ぜひコメントお待ちしております
- 来年もぼちぼちと開催していく予定なので、ぜひ現地でもリモートでもご参加お待ちしております↓↓

https://fukuokaex.connpass.com/
serveコマンドでnode.jsで書かれたサーバーを利用してプログラムを公開する際のエラー

## 環境 :fallen_leaf: 
仮想環境のOS：Ubuntu
node.js v7.10.1


## エラー内容 :fallen_leaf: 
serveコマンドを打つと、以下のエラーがでる。

```
/home/vagrant/.nvm/versions/node/v7.10.1/lib/node_modules/serve/node_modules/update-check/index.js:11
const writeFile = promisify(fs.writeFile);
                  ^

TypeError: promisify is not a function
    at Object.<anonymous> (/home/vagrant/.nvm/versions/node/v7.10.1/lib/node_modules/serve/node_modules/update-check/index.js:11:19)

```

## エラーの原因:cry: 
上記のディレクトリのindex.jsの11行目のpromisify()に問題がある的なエラーが出てるけど、そのindex.jsとにらめっこする必要はない

nodeのバージョンが古いことが、エラーの原因。

## 解決方法 :smile: :
なので、バージョンを8.x以上にする。これが解決方法。
nvmでnode.jsをインストールする際、バージョンを指定しなければ最新バージョンとなりますが、もし任意のバージョンを使いたかったり、v8.10.0がなかったらインストールしてください。

**バージョン切り替え**

```
nvm use v8.10.0
```

**では、実際にserveコマンドやってみる**

```
serve -s build -p 3000
```

これが表示されれば成功
<img width="449" alt="サーバー立ち上げ.png" src="https://qiita-image-store.s3.amazonaws.com/0/179803/24737e1d-2424-af39-78d1-4ea4b692a456.png">

無事にwebサーバが起動した

## 感想 :smile: :
今回に限らず、バージョン7だとReactのプロジェクト作成からエラーが出るので、ノードのバージョンは新しくしましょう
【作業途中】飲食店のメニューページを作る際にやったこと

# はじめに
飲食店向けのサイトをWordPressで作っています。その中で、メニューページを作るときにやったことを記録として残します。
2018/12/29時点で、まだ途中です。随時修正します。


# 環境
* WordPress
* WordPressテーマ「Amore」
* WordPressプラグイン（検証するやつ）
	* 「PDF Embedder」…表示が見にくい
	* 「FlowPaper」…見た目は悪くないが、表示に時間がかかる
	* 「3D FlipBook」…???
	* 「Simple PDF Viewer」…???

**メニューページ作成で気をつけること**
* メニュー(PDF)の表示速度
* メニュー（PDF）の見え方
* メニューギャラリーに載せる写真の選定

# やること(タスクリスト、のようなもの)
* WordPress飲食店サイトのメニューページを3つ作る
	* ①店舗A
	* ②店舗B
	* ③ALL Menu
* メニューページの基本構成
	* ①テキスト…店舗やメニューの説明（ごく簡単に）※省略化
	* ②メニュー(PDF)…表示に時間がかかる場合は埋め込み
	* ③ギャラリー…フードメニュー並べる
	* ④アクセス…店舗情報+GoogleMap
* メニュー(PDF)の添付方法
	* WordPressの固定ページにPDFを添付したい
	* Wordpressはデフォルトでは記事にPDFを添付できない。
	* その為、PDFを添付するためのプラグインを使うことで対処
	* どのプラグインを使うか？検証する
	* あまり表示に時間がかかるなら、PDF埋め込みで対応
	* 【課題】2号店(横メニュー)は良いが、
　　　　1号店(縦メニュー)がPDFだと見にくい
* メニューページ冒頭のテキストを考える
	* 店舗A
	* 店舗B
	* 両店舗
* ギャラリーに掲載する写真を整理する
	* 店舗A
	* 店舗B
	* 両店舗
・メニューページにGoogleMAPを埋め込む
	* iframeで対応（?)

# 補足
* 使っているテーマによっては記事作成画面に「メディア」ボタンが表示されないことがある。筆者が使っている有料WordPressテーマ「Amore」はそうだった。「Amore」の場合、記事ブロックの「クラシック」を選択したら「メディア」ボタンが表示された。
* PDFの種類によってはサイドメニューがあると表示が小さくなる
　その場合、記事のテンプレートファイルを1カラムにした方が見た目キレイ。

# 参考サイト
[WordPressの投稿／固定ページにGoogleMap挿入の簡単方法：GoogleMapのiframeコードの埋込](https://old-pine.net/content/wordpress%E3%81%AE%E6%8A%95%E7%A8%BF%EF%BC%8F%E5%9B%BA%E5%AE%9A%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%ABgooglemap%E6%8C%BF%E5%85%A5%E3%81%AE%E7%B0%A1%E5%8D%98%E6%96%B9%E6%B3%95%EF%BC%9Agooglemap%E3%81%AEiframe%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%9F%8B%E8%BE%BC)

[WP記事内にPDFを簡単埋め込み！「PDF Embedder」の使い方](https://fukuro-press.com/wordpress-plugin-pdf-embedder/)