OmniAICreator/Qiita-1.07M huggingface dataset:
PythonでFizzBuzz問題を解いてみた

###FizzBuzz問題とは
プログラマなら大抵のかたは聞いたことがあるかと思いますが元は単純なパーティゲームで
– 2人以上のプレイヤーが1から順番に数字を発言していく
– 3で割り切れるときは「Fizz」を発言
– 5で割り切れるときは「Buzz」を発言
– 両方で割り切れるときは「FizzBuzz」を発言
– 間違えた人から脱落
細かな違いはあるでしょうが大体上記のようなルールのゲームです。

###FizzBuzzとは？
このFizzBuzzをプログラムとして画面に出力するコードを書くことが
FizzBuzzとはプログラマがプログラムを書くことができるか調べるクイズのようなものです。
当然ながらどのプログラム言語を選んでも解くことはできるのでプログラムの勉強を始めた方は一度解いてみてください。

###正解発表

```Python:Python.py
#fizzbazz問題
cnt = 1 #カウンタ変数

while cnt < 101:
    if cnt % 3 == 0 and cnt % 5 == 0:
        print('FizzBuzz')
    elif cnt % 3 == 0:
        print('Fizz')
    elif cnt % 5 == 0:
        print('Buzz')
    else:
        print(cnt)
    cnt = cnt + 1 #自分のような初心者はcntのインクリメントを忘れて
                  #無限ループに突入してしまいがちなので注意！
```
Mac でもキーボードショートカットでロックする

# やりたいこと
Windows だと [Win + L] でロックする感じにやりたい

順当に行くと[Macの画面をスクリーンロックする方法](https://qiita.com/n_sekiya/items/a51102e0ba10fb915c42)が良記事でした。
でももっとWindowsライクにしたい…

# 手順
1. Automator.app を起動します
2. クイックアクションを選択します
    ![スクリーンショット 2018-11-05 11.21.27.png](https://qiita-image-store.s3.amazonaws.com/0/100313/a670bcf8-6bcd-80b2-c5ad-152136f035a8.png)
3. ユーティリティ > AppleScriptを実行 を選択します
    ![スクリーンショット 2018-11-05 11.22.33.png](https://qiita-image-store.s3.amazonaws.com/0/100313/21a536af-a7e6-8ffd-a69e-ebf86142f78b.png)

４. 以下のコードを貼り付けて保存します

```
do shell script "/System/Library/CoreServices/Menu\\ Extras/User.menu/Contents/Resources/CGSession -suspend"
```

![スクリーンショット 2018-11-05 11.29.33.png](https://qiita-image-store.s3.amazonaws.com/0/100313/4542cd4e-c038-fd7a-20f8-86792b465415.png)
5. 適当な名前をつけて保存します。
6. 設定 > キーボード > ショートカット > サービス > 一般 に先程保存した名前のアクションが追加されていますので、そこに好きなショートカットを設定します

<img width="780" alt="スクリーンショット 2018-11-05 11.34.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/100313/4fc4a2af-4d58-b935-4791-61bf08569820.png">

# 参考
https://apple.stackexchange.com/questions/73995/how-do-i-lock-the-screen-using-a-keyboard-shortcut-on-os-x-mountain-lion-with-a
Lambda実行環境(AWS)上のSDKのバージョンについて

# Lambda実行環境(AWS)上のSDKのバージョンについて

node_modulesに、sdkを含めた場合と含めない場合に、使用されるsdkのバージョンがどうなるのかを確認してみました。

## sdkのVERSIONをログに出力するLambdaを作成

```
'use strict';

const AWS = require('aws-sdk');

module.exports.handler = (event, context, callback) => {
  console.info(AWS.VERSION);
  // TODO implement
  const response = {
    statusCode: 200,
    body: JSON.stringify('Hello from Lambda!'),
  };
  callback(null, response);
};
```

## 含めない場合　Lambdaがサポートするデフォルトのバージョン2.290.0（検証した時点）が使用される

```
START RequestId: fc958f2e-e09c-11e8-bf95-c18a822dd3f9 Version: $LATEST
2018-11-05T01:49:09.871Z    fc958f2e-e09c-11e8-bf95-c18a822dd3f9    2.290.0
END RequestId: fc958f2e-e09c-11e8-bf95-c18a822dd3f9
REPORT RequestId: fc958f2e-e09c-11e8-bf95-c18a822dd3f9  Duration: 27.24 ms  Billed Duration: 100 ms     Memory Size: 128 MB Max Memory Used: 33 MB  
```

## 含めた場合 node_modulesに、2.348.0を含めてデプロイすると、2.348.0が使用される

```
START RequestId: 1f77eb6b-e09d-11e8-879c-43b0c47d9c8a Version: $LATEST
2018-11-05T01:50:07.770Z    1f77eb6b-e09d-11e8-879c-43b0c47d9c8a    2.348.0
END RequestId: 1f77eb6b-e09d-11e8-879c-43b0c47d9c8a
REPORT RequestId: 1f77eb6b-e09d-11e8-879c-43b0c47d9c8a  Duration: 0.52 ms   Billed Duration: 100 ms     Memory Size: 1024 MB    Max Memory Used: 35 MB  
```

# まとめ

使用したいバージョンのsdkをnode_modulesに含めデプロイすれば、そのバージョンを使用可能でした。

公式では、Lambdaでサポートするバージョンが謳われているので、それ以外のバージョンを使用するのは微妙ではありますが、bigfixが入ったバージョンを使用する必要性がある場合致し方ありません・・・
https://docs.aws.amazon.com/lambda/latest/dg/current-supported-versions.html
（英語版が最新です。）

The underlying AWS Lambda execution environment includes the following software and libraries.

AWS SDK for JavaScript – 2.290.0


# 備考

この記事のきっかけになったのは、sdkが標準で持つリトライ機能でした。
中でも、リトライ対象となるべき「TooManyRequestsException」が漏れていたバグが
v2.348.0にマージされていたのでした。
https://github.com/aws/aws-sdk-js/pull/2246

sdkをデプロイパッケージに含めると、サイズが大きくなり過ぎて、Lambda管理コンソール上で、ソースが確認出来なくなる事もありそうですので、ご注意ください。
ノートPCのふたを閉じたらサスペンドされるのを変更

古いノートPCに作業用としてdebian 9.5をインストールしたところ、ふたを閉じたらサスペンド状態になったため、こうならないように変更しました。

こういった状態変更はsystemd上のsystemd-logind.serviceが行っていて、設定は/etc/systemd/logind.confから行えるとのこと。
https://www.freedesktop.org/software/systemd/man/logind.conf.html

今回行うのは、HandleLidSwitchの設定。
以下のようにコメントアウトされているので、その下に追記しておきます。
（デフォルトを残したいという好みの問題です）

```
#HandleLidSwitch=suspend
HandleLidSwitch=ignone
```

設定の反映は以下のコマンドで実行。
`# systemctl restart systemd-logind.service`

なお、設定値は以下の値が取れる様子。

+ ignore
+ poweroff
+ reboot
+ halt
+ kexec
+ suspend
+ hibernate
+ hybrid-sleep
+ suspend-then-hibernate
+ lock
PySparkのshow()で...な時

show()をした時に...で全部表示できない↓な時

<img width="1129" alt="スクリーンショット 0030-11-05 10.51.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/27932/3689acf0-4f03-7316-41c9-c056409543b9.png">

show(20,False)でやってみましょう
falseでtruncateされなくなります
ちなみにshow()はデフォで20行表示

<img width="1140" alt="スクリーンショット 0030-11-05 10.51.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/27932/959b22c7-c85f-2b79-bea2-65e23485207f.png">

## こちらも是非

Glueの使い方まとめ
https://qiita.com/pioho07/items/32f76a16cbf49f9f712f
xampp で最短　ローカル　ウェブ開発 環境　

Xamppをインストール

C:\xampp\htdocsとかにある元からあるウェブファイルをいったんbackupなどと名を打ってフォルダにまとめ編集したいウェブデータをhtdocsに代わりに展開

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/310991/0e881b8c-06ad-f811-7d27-63df423d69be.png)

すると入れ替えただけなのでめんどくさいhostsの設定などなしに、とりあえずテスト環境作れます

PHPとか動かなかったらC:\xampp\php\pearとかに参照エラーどうりにPHPファイルを入れてみるといいことあるかもよ！！
プロセスをチェックするのにpsからtopに変更してみた

#プロセスの状況を表示する
バッチ処理メインのサーバで、ジョブの実行状態をチェックするのにpsコマンドで検索することが多いので、grepを組み合わせたwrapperシェルを作成してみた。

#psコマンドはその時のCPU使用率を表示していない
色々調べてると、「psコマンドで表示されるCPU使用率はプロセスの生存期間中に利用した時間のパーセンテージで表される、負荷を見るには適切で無い。負荷を見るにはtopコマンドを使用する。」とあったので、topコマンドも(ほぼ)同時に表示するようにしました。

```
[rookie@host001 ~]$ psgrep.sh ntpd
USER       PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND
ntp       2444  0.0  0.0  26520  1276 ?        Ss   Oct21   0:45 ntpd -x -u ntp:ntp -p /var/run/ntpd.pid -g
  PID USER      PR  NI  VIRT  RES  SHR S %CPU %MEM    TIME+  COMMAND                                                                                                                                 
 2444 ntp       20   0 26520 1276 1112 S  0.0  0.0   0:45.32 ntpd -x -u ntp:ntp -p /var/run/ntpd.pid -g                                                                                              
[rookie@host001 ~]$ 
```
項目の並びが異なっていて見にくいですね。
awk等でちまちま並びを合わせようと思いましたが、

#topコマンドの結果だけでいいやん
てことで、以下の通りにしました。

```psgrep.sh
MOJIMOJI=$1
### top の結果だけで十分なので、psの結果は表示中止
### echo "*** ps aux | grep ${MOJIMOJI} *** %CPU = プロセスが起動してからどの程度CPUを使っているかの割合"
### ps aux        | grep -E "(${MOJIMOJI}|%CPU)" | grep -v grep
echo "*** top -c | grep ${MOJIMOJI} *** %CPU = タスクの所要 CPU 時間の占有率。総 CPU 時間のパーセンテージ(ps auxより正確)"
top -b -c -n 1| grep -E "(${MOJIMOJI}|%CPU)" | grep -v grep
echo "*** command end   ${MOJIMOJI} ***"

exit $?
```
Egret公式のサンプルゲームIceBucketChallengeを読んでシーン遷移を学ぶ

Egret Engineの技術ブログの[2018/10/26 初心者向け｜Egretで簡単なハムスターゲーム "Ice Bucket Challenge"を作成する](https://mp.weixin.qq.com/s/mexf924JZJGYFYZ4OfJe0w)を読んでみました

ソースコードは[GitHub](https://github.com/motoyasu-yamada/DaDiShu2)から読めます

タイトル画面、ゲーム画面、ゲームオーバー画面などのゲームのシーン遷移の勉強になりそうです。

# 画面管理

```ts:Main.ts
class Main extends eui.UILayer
:
  this.addChild(new start());
:

```

Mainクラスは `eui.UILayer`を継承します。
各シーン画面は `eui.Component`を継承、インタフェース`eui.UIComponent`実装。
画面を管理するMainクラスに`addChild`をしていきます。

# スタート画面の実装

スタート画面のスタートボタンを押すと自分を削除して
ゲームのプレイ画面のシーンを追加します

```ts:start.ts
class start extends eui.Component implements eui.UIComponent {
:
   this.btn_Start.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
     this.parent.addChild(new game())
     this.parent.removeChild(this);
   }, this);
:

```

# ゲームループの開始およびゲームオーバー画面への遷移処理

`egret.startTick`でゲームループの実行を開始
ゲームオーバー画面に遷移する前に
`egret.stopTick`してあげています

```ts.game.ts
class game extends eui.Component implements eui.UIComponent {
  :
  protected childrenCreated() : void {
    :
    egret.startTick(this.Update, this);
    :
  }
  
  private Update() : void {
    :
    this.parent.addChild(new GameOver());
    egret.stopTick(this.Update, this)
    this.parent.removeChild(this);
    :
  }
  :

```
インデックス

たとえば、

- abcdefghijklmnopqrstuvwxyz

これなら、どれがどこにあるか分かりやすい。

- kluvphijswxyfgmnzabcdeqrto

これでは分かりにくい。

zはどこ？

と言われた時、

上の例なら、最後と瞬時に分かるが

下の例では、、、、最初から見ていって、あ、見つけた。となる。

これが、インデックスの利点。

しかし、インデックスは、データベースのデータとは別に保存するため、容量が大きくなるという欠点もある。

参考にさせていただきました
--

https://www.dbonline.jp/sqlite/index/index1.html
https://ja.wikipedia.org/wiki/%E7%B4%A2%E5%BC%95_%28%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%29
Tomcatのサーバー設定のメモ

Serveltのsessionを扱うについて、Tomcat8再起動後もsession情報を復元して
中にあるオブジェクトも参照することができた。

SESSION.serがsession情報をディスク保存しているため

context.xmlのcontextタグに<manager pathname="">を追記することでOFFになる

【参考ページ】ここにサーバーの設定について色々のっています。参考に。
「本人[新しくTomcatをセットアップした時にやること](http://frmmpgit.blog.fc2.com/blog-entry-76.html)
WASH

#目次
[１．課題について](#1課題について）
[２．アプリの特徴について](#2アプリの特徴について）
[３．ターゲット・ペルソナ](#3ターゲット・ペルソナ）
[４．制作行程について](#4製作工程について）
[５．感想](#5感想）



#１．課題について

旧洗濯表示と新洗濯表示のマークの変更点や意味、記号の意味を見やすくするようにしました。

#２．アプリの特徴について
旧洗濯表記から新しい洗濯表記に変わり、旧から新になての変更点や増えた記号の意味などをわかり易いようになっています。新たに変更された選択表示すべて表示されています。特に難しい操作も無くシンプルに見やすくしました。





#３．ターゲット・ペルソナ
全年齢を対象にしています。
旧洗濯表示と新洗濯表示のマークがわからない人やいちいち検索をして調べるのが面倒だと思う人。

#４．制作行程について

![1製作工程.png](https://qiita-image-store.s3.amazonaws.com/0/309933/c48d4ab5-700f-d232-5ff7-bb772ff7de88.png)
背景を貼り、旧と新の欄を作り、間を空けます。

![2製作工程.png](https://qiita-image-store.s3.amazonaws.com/0/309933/cc455b94-3a8b-b22d-8c3e-c8dd64a433c9.png)
旧の所には旧の洗濯表示を貼り、新の所には新しい洗濯表示を貼ります。
![3製作工程.png](https://qiita-image-store.s3.amazonaws.com/0/309933/9c3c0edc-8638-b010-5e20-efaf56e9447e.png)
その間に意味を入れていきます。
![4製作工程.png](https://qiita-image-store.s3.amazonaws.com/0/309933/4b8e2d27-88ed-a719-0f1d-d84cee8ff5a6.png)
上と同じ操作を変更された洗濯表記すべて分を行う。
![5製作工程.png](https://qiita-image-store.s3.amazonaws.com/0/309933/4ab86415-bdcf-7400-d01d-81771dd76552.png)
次のページに移り同じ操作を行う。二種類に変更になった場合の洗濯表記は二つの表記の間の位置に旧洗濯表記を入れるようにする。
![6製作工程.png](https://qiita-image-store.s3.amazonaws.com/0/309933/1c3b471b-3336-dcda-a8a3-82eeb40613fe.png)
次のページに種類ごとに並べる。色は別々になるようにしました。
![7製作工程.png](https://qiita-image-store.s3.amazonaws.com/0/309933/41fd3f2b-5992-ea7b-00f1-79eeffa9801c.png)
種類ごと分かれた表記の下に変更点や記号の意味を書きます。
![8製作工程.png](https://qiita-image-store.s3.amazonaws.com/0/309933/19464f25-61a4-d98d-92a5-f054e26181b4.png)
最後に次のページや後のページに移ることが出来るように設定します。
作品はこちらから[クリック][link-6]
[link-6]:https://prottapp.com/p/5cd70a
#５．感　想


今までパソコンに触れる機会が少なく、アプリがどのように作成されていたのかしりませんでした。その中で、自分が作れるのか不安でした。どのようなアプリを作るか考えたときに洗濯表示に着目をし、調べてみると以前の洗濯表示から新しい洗濯表示に変わっていることを知りそれに関するアプリを作ろうと思いました。どのようなものを作るか考えは浮かぶのですが、機能を使いこなせず難しかったです。調べるのに洗濯表示の変更点とそれの意味を知らなければ難しいと思ったので単純にわかるようにしました。初めて使う機能や使いこなすことの出来ない機能が多く周りの人に比べてかなりゆっくり作りましたが、新しく学べたことも多かったため良かったです。






その他製作物はこちら[クリック][link-7]
[link-7]:https://qiita.com/shigeru-suzuki/items/409137c96ee739509487

静岡県立島田商業高校　こちら[クリック][link-1]
[link-1]:http://www.edu.pref.shizuoka.jp/shimada-ch/home.nsf/IndexFormView?OpenView
prottサイト　こちら[クリック][link-2]
[link-2]:https://qiita.com/sakainagata/private/771d17940d22b2aa217e
簡単家計簿

#目次
[１．課題について](#１課題について)
[２．アプリの特徴について](#２アプリの特徴について)
[３．ターゲット・ペルソナ](#３ターゲットペルソナ)
[４．制作行程について](#４制作行程について)
[５．感想](#５感想)


#１．課題について
これから一人暮らしをする上で一番管理しなければならないことは、お金！
でもそこで考えつくのは

家計簿ってどうやってつけるの？？

管理しないといけないのはわかっていてもつけ方がわからなければどうにもならない、そんな人向けのアプリがあれば便利！！

#２．アプリの特徴について
①誰でも簡単に使用できること
②お金にかかわることなのでセキュリティ面をしっかりと
　（外部から画面を見られても何の金額かわからないように）
③シンプルに見やすく

#３．ターゲット・ペルソナ
これから一人暮らしをする上で家計簿のつけ方がわからない人
特に若者向け

#４．制作行程について
今回は試作品を作るということで、Goodpatch提供の「Prott」（プロット）を使用させていただきました。

まずは、アプリに必要なページを紙に書き、写真でとったものを画像として取り込みます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/304734/41600f5b-add4-81e5-55c7-0f6fe2654940.png)
次に取り込んだ画像のワイヤーフレームを編集していきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/304734/3083c371-2a89-af42-c37a-340180f3bfc8.png)

ワイヤーフレームの編集の画面に移ると、左にはシェイプが、右には選択したシェイプの詳細が表示されます。

ここから、この画像に合うようにシェイプをつけ、調整していきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/304734/b4db1732-7f24-8151-9620-ae58cc97eb61.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/304734/14ccca2e-53b1-c7c1-00d5-76134bae82e1.png)
ちなみに、スマートフォンでよく表示されるマークはprottを使用する際にどの機種を選択することで、その機種にあったマークやアイコンを取り入れることができます。（今回は、iPhone 6/7/8を選択しています。）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/304734/e25a1ec1-506b-2d64-3a35-1137ddea706e.png)
このようにアプリに必要なページが完成しました！

ここから、”このボタンを押したらこのスクリーンに飛ぶ”というように選択していきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/304734/0ea6a38d-950b-860f-48a6-350423652ba7.png)
選択ボタンを作りたいスクリーンを選択します。
表示されたスクリーンから、いわゆるボタンとしたい場所をドラッグ、ドロップをして選択します。
そしてどのスクリーンに移るのかを選択します。
これで繋げることができました。
また、どんな押し方でどのようにスクリーンが表示されるのかも選択することもできます。

すべてのワイヤーフレームの編集が完了し、すべてのスクリーンをつなげ画面遷移図を表示してみるとこんな感じになりました！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/304734/e70d4317-68ba-ad27-3818-fec97b920b28.png)

このアプリを実際に動かすにはこちら[クリック][link-6]
[link-6]:https://prottapp.com/p/18493b
#５．感　想
私は今回までアプリの作成をしたことがありませんでした。
そんな中とても楽しみにしていたプロット制作で、いつもは使用する側でしたが、作成する側になってみるだけでアプリの使い方がすごく変わりました。
使用する側では、こんなアプリ欲しいな！ここにあった方が楽だな！とか考えつくこともありましたが、実際に作ってみると、どこに繋げたら便利なのかを考えているのに、プレビューすると使いにくかったり、とても大変でした。
でもこのことから、いろんな視点から見ることを意識するようになりました。
あまり勉強できることではないと思うので、よかったです。






|グループ|テーマ|他の作成者|
|---|---|---|
|７|初めての家計簿|[まぁや][link-3]


[link-3]:https://qiita.com/maya1125/items/36d873ba65da62921737
[link-4]:https://prottapp.com/p/18493b#/s/5bc3e7a44942fb28e42o86ec

静岡県立島田商業高校　こちら[クリック][link-1]
[link-1]:http://www.edu.pref.shizuoka.jp/shimada-ch/home.nsf/IndexFormView?OpenView

その他の制作物はこちら[クリック][link-5]
[link-5]:https://qiita.com/shigeru-suzuki/items/409137c96ee739509487
prottサイト　こちら[クリック][link-2]
[link-2]:https://prottapp.com/ja/
comic search

#目次
[１．課題について](#１課題について)
[２．アプリの特徴について](#２アプリの特徴について)
[３．ターゲット・ペルソナ](#３ターゲット・ペルソナ)
[４．制作行程について](#４制作工程について)
[５．感想](#５感想)
[６．その他](#６その他)



#１．課題について
皆さんの家にはどれくらい単行本がありますか？
漫画をたくさん持っている方は、自分が今何巻まで持っているのか忘れてしまった、という経験があると思います。
自分の所持している単行本を把握していないと、すでに持っているのに同じ巻を買ってしまったり、まだ持っていないのに持っていたような気がして買わくてもいいや、と思ってしまい、結局買いそびれてしまったりしてしまいます。
また、買いたい本があったのに、タイトルなどを忘れてしまった、という経験がある人もいると思います。
そういった事態のために、今回このアプリを作成しようと思いました。

#２．アプリの特徴について
①自分が今どの単行本を何冊持っているのかをすぐに確認出来るように、本棚の機能をつけてあります。

②気になっている本や話題になっている本についてのニュースを確認することも出来ます。

③タイトルなどを忘れてしまっても、出版社などで検索出来ます。

#３．ターゲット・ペルソナ
ターゲットは漫画を購入する人です。その中でも、上記に書いたような経験をした人に是非利用してもらいたいです。

#４．制作行程について

今回アプリのプロトモデルを作成するにあたり、「prott」を使用しました。
prottを使用すると、写真からモデルを作成する事が出来ます。

まず初めに、紙に画面のデザインを簡単に描いていきます。
それが完成したら写真を撮り、prottに読み込みます。

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/304738/6930141f-8c59-b471-403f-1256bdd5dc20.png)

この写真を元に、大まかなフレームを入れていきます。

![資料２.png](https://qiita-image-store.s3.amazonaws.com/0/304738/adf651ce-7ec8-4b64-cc80-5fadbeccfe04.png)

そこから文字や既存のアイコンなどを入れていき、形を作っていきます。

![資料３.png](https://qiita-image-store.s3.amazonaws.com/0/304738/52e32082-cc97-983e-7a5d-2f6a5456a827.png)

さらに細かいところも付け加えて、これでワイヤーフレームが完成しました。

![無題3.png](https://qiita-image-store.s3.amazonaws.com/0/304738/cce19957-20b2-ffc8-7f40-2e4dcc3cfb6f.png)

次に、ワイヤーフレームのリンク先を決定していきます。
タップして反応する範囲をドラッグして決定し、そこから別のワイヤーフレームにリンクを繋げます。

![無題2.png](https://qiita-image-store.s3.amazonaws.com/0/304738/d57aa105-0bf0-2801-bcb2-16f3a8696c2b.png)

こうすることで別のページへの移動が表現出来ますが、この機能を利用することで、お気に入り機能を表現することが出来ます。
まず、一つのワイヤーフレームをコピーして、同じページにリンクを繋げます。

![タイトルなし.png](https://qiita-image-store.s3.amazonaws.com/0/304738/57f4ed03-7b15-a1f8-4b52-43db3b7f8751.png)

次に、反応の仕方や画面の移り方を設定します。
お気に入り機能を表現する場合は、タップで反応するようにし、画面の移り方のエフェクトを使用しないように設定します。
そうすることで、お気に入りのON/OFFの切り替えが表現できるようになります。

![タイトルなし2.png](https://qiita-image-store.s3.amazonaws.com/0/304738/51bfc28d-03b2-6eae-9717-04c1edfd021d.png)

これで、お気に入りのON/OFFのモデルが完成しました。

![タイトルなし3.png](https://qiita-image-store.s3.amazonaws.com/0/304738/ed8c8d0a-08a8-3350-9076-71b16b96b29e.png)
星をタップすると……
![タイトルなし4.png](https://qiita-image-store.s3.amazonaws.com/0/304738/4ff3120d-79ac-763c-cbd3-8f45aa47c24d.png)
星のマークが暗くなります。

後は画面の移り方や反応の仕方を工夫して、違和感がない様に調節すれば、アプリのプロトモデルが完成します。


同じテーマの別作品の製作工程（作者：寺）は[こちら][link-5]から

作品の閲覧等はこちらから↓

|グループ|テーマ|作成者|作成者|
|---|---|---|---|
|１|漫画検索|[寺][link-3]|[たぬき][link-4]|

[link-3]:https://prottapp.com/p/a6d8a8
[link-4]:https://prottapp.com/p/a0954b
[link-5]:https://qiita.com/yyyyumi321/private/5b4d2a9516c20f9ca1af

#５．感　想

初めて挑戦することなので、とても緊張しました。
わからない事ばかりでしたが、「こうした方がもっと良くなるんじゃないんだろうか」などと考えながら作成していくのはとても楽しかったです。
プログラミングの知識が全く無い自分でも簡単に作成する事が出来たので、こういったアプリのプロトモデルを作成してみたいという方は是非一度「prott」に触れてほしいと思います。



#６．その他

その他制作物はこちら[クリック][link-6]
[link-6]:https://qiita.com/shigeru-suzuki/items/409137c96ee739509487





静岡県立島田商業高校　こちら[クリック][link-1]
[link-1]:http://www.edu.pref.shizuoka.jp/shimada-ch/home.nsf/IndexFormView?OpenView
prottサイト　こちら[クリック][link-2]
[link-2]:https://prottapp.com/ja/
観光アプリ

#目次
[１．課題について](#1課題について)
[２．アプリの特徴について](#2アプリの特徴について)
[３．ターゲット・ペルソナ](#3ターゲット・ペルソナ)
[４．制作行程について](#4製作工程について)
[５．感想](#5感想)



#１．課題について
旅行に行こう！！

そう思い立っても、計画を立てられない、調べるのが面倒くさい、コースを考えられない・・・。と、旅行になかなか行けていないという人も多いのではないでしょうか。

それに、どんな人でも、予算、時間、場所を考えるのは手間がかかるもの。

特に、行きたい場所がたくさんあるときは調べても調べても終わらないということもあるのではないでしょうか。

#２．アプリの特徴について
①条件を入れれば、簡単に計画を立てることができる！細かい指定も可能！

②季節ごとに魅力ある場所を知ることができる！

③行ったことのある旅行先や、いつか行ってみたい場所のコースを保存しておける！

④見やすく、可愛い白を基調としたデザイン！

#３．ターゲット・ペルソナ
旅行の計画を立てるのが苦手な人、旅行についての情報を知りたい人をターゲットにしていますが、特に、一人旅をしたい女性が使いたくなるようなデザインを心がけて作成しました。

#４．制作行程について

今回の製作ではGoodpatch提供の「Prott」（プロット）というソフトを使用しました。

このProttはワイヤー・UIデザインのプロトタイピングツールソフトです。
最大の特徴は下記で紹介する「手書きから作る」です。手書きで作ったアプリの案を写真に撮りそのままプロトタイプとしてデザインを作ることができます！

その制作工程を今から紹介します

まずはソフトの登録をし、スマートフォンにアプリをインストールします。そして、スマートフォンで写真を撮り、アプリ内に取り込みます
![日直日誌.png](https://qiita-image-store.s3.amazonaws.com/0/304733/3195dacb-687a-6c26-1cb1-b1dbf2837f32.png)
四角を画面いっぱいに広げて配置し、背景の元を作ります
![quiita.png](https://qiita-image-store.s3.amazonaws.com/0/304733/fa2fc054-ef14-1782-b0a7-b1f6d50dc29d.png)
下書きが見えるよう、背景の不透明度を下げ、透かします。そして、四角形を配置します。大きさは自由に決めることができます。
![quiita.png](https://qiita-image-store.s3.amazonaws.com/0/304733/bd30582e-906b-dc08-7202-df48115a50d6.png)
文字を入れていきます
![quiita.png](https://qiita-image-store.s3.amazonaws.com/0/304733/a7db5213-3431-6cdd-0adb-774a1b46743e.png)
文字を入れ終わったら、四角の色を変えます。画面右の「塗り」から変えられます
![quiita.png](https://qiita-image-store.s3.amazonaws.com/0/304733/b9525b40-9a51-1287-be99-804473adfd08.png)
アイコンを配置していきます。アイコンは、画面左上の写真マークから選ぶことができ、その後登録して繰り返し使えるようにすることもできます。
![quiita.png](https://qiita-image-store.s3.amazonaws.com/0/304733/60780f7f-ef96-ae01-2842-43d28ecf8ce6.png)
配置が終わったら背景の不透明度を１００％に戻し、白に変えます
![quiita.png](https://qiita-image-store.s3.amazonaws.com/0/304733/bcd120a9-ce39-582a-e549-b1b2b383fc04.png)
今回はアプリの色調に統一感を持たせるために、その後全体的に調節しました
![quiita.png](https://qiita-image-store.s3.amazonaws.com/0/304733/67c2dfd1-f598-102a-2dc0-ec14a1f67354.png)
画像を入れ、リンクエリア（どこをクリックしたらどこの画面に飛ぶか）を設定します
![quiita.png](https://qiita-image-store.s3.amazonaws.com/0/304733/236706bf-ff64-d322-43c1-f7021623d28a.png)
後は細かい部分の調節をして、完成です！

|グループ|テーマ|作成者|
|---|---|---|---|
|４|観光アプリ|[かな][link-4]|

[link-3]:https://www.yahoo.co.jp/
[link-4]:https://qiita.com/drafts/a21e16bceeb1d13a57a3

実際に動かすには[こちら][link-7]
[link-7]:https://prottapp.com/p/cef9a1

その他制作物は[こちら][link-6]
[link-6]:https://qiita.com/shigeru-suzuki/items/409137c96ee739509487



#５．感　想
　私は、商業高校生ですが、プログラミングをやったことはなかったし、授業も受けたことはありませんでした。だから、この授業でアプリ製作のようなものをやると聞いたときは、「できない」と率直に思いました。しかし、prottの説明を受けるうちに、できるかもしれない、アイデアを形にできるかもしれないという思いが強くなっていきました。
　実際、授業ではプログラミングのことが何もわからなくても、アプリの試作品を作り上げることができました。自分の考えたものが形になり、多くの人に伝えることができるというのは、とても楽しく、貴重な経験となりました。prottは、仕事でアプリを作る人だけでなく、考えたシステムの提案をするときにも使える、とても便利なツールだと思います！




静岡県立島田商業高校　こちら[クリック][link-1]
[link-1]:http://www.edu.pref.shizuoka.jp/shimada-ch/home.nsf/IndexFormView?OpenView
prottサイト　こちら[クリック][link-2]
[link-2]:https://prottapp.com/ja/
アイディアの宝庫

#目次
[１．課題について](#１課題について)
[２．アプリの特徴について](#２アプリの特徴について)
[３．ターゲット・ペルソナ](#３ターゲット・ペルソナ)
[４．制作行程について](#４制作行程について)
[５．感想](#5感想)



#１．課題について
一人暮らし・家族などといった様々な暮らしの中で自分に合う料理や日用品グッズ、気分を変えるために部屋の模様替えなどすぐに調べることが一度に出来たら便利だと思いました。ひとジャンルで詳しく調べる方法もありますが、あれも調べたいこれも調べたいと言ったときに一つのアプリで検索することが出来れば手間が省け、次々目移りして楽しんでくれるのではと思い作成しました。

#２．アプリの特徴について
シンプルに見やすいように製作しました。文字や機能が多すぎても使いにくくなってしまうので簡単に操作ができるよう写真をクリックすればわざわざ検索して探さなくてもそのページを開き詳細を見ることが出来ます。他にも見やすいように黒い枠でふちを取ったりジャンルごとに背景を変えて分かりやすいように仕上げました。料理だったら温かいイメージがあるので赤系統の色を使ったなどといった工夫がしてあります。

#３．ターゲット・ペルソナ
一人暮らし・主婦・20代の男女です。主婦と一人暮らしの層では料理に着目、20代の男女は部屋の模様替えに着目すると思いました。日用品グッズに関してはどの年齢層でもおおいに活用することが出来ますがやはり家庭を支えている主婦が一番気にかけてくれるのではないかと予想しました。

#４．制作行程について
![新規ドキュメント 2018-09-13 14.10.30_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/304743/f732fd06-fbe4-6087-8949-f4752f3f5eba.jpeg)
![_20181025_135548.JPG](https://qiita-image-store.s3.amazonaws.com/0/304743/b1d05d3c-90e2-fac7-1c8b-514b890e73ce.jpeg)
![_20181025_135838.JPG](https://qiita-image-store.s3.amazonaws.com/0/304743/508d9661-03e0-8975-5c80-89c2a1c50ce1.jpeg)
![_20181025_141313.JPG](https://qiita-image-store.s3.amazonaws.com/0/304743/07e6e84a-b3d0-a249-804c-70ee37e3d1ea.jpeg)
![新規ドキュメント 2018-09-13 14.10.30_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/304743/86f5593a-88f3-f740-5274-211b4bfe65e2.jpeg)
![_20181025_135622.JPG](https://qiita-image-store.s3.amazonaws.com/0/304743/bcc5ab57-081a-5cea-a87b-505ff87cb42c.jpeg)
![_20181025_140409.JPG](https://qiita-image-store.s3.amazonaws.com/0/304743/9ff6f32b-7585-be9d-049d-77062c52ed45.jpeg)
![新規ドキュメント 2018-09-13 14.10.30_3.jpg](https://qiita-image-store.s3.amazonaws.com/0/304743/0d657052-efaa-99d3-e61f-b86bee82bc4b.jpeg)
![_20181025_140446.JPG](https://qiita-image-store.s3.amazonaws.com/0/304743/75f09224-6403-eab8-4e0b-a2283e3bfbbc.jpeg)
![新規ドキュメント 2018-09-13 14.10.30_4.jpg](https://qiita-image-store.s3.amazonaws.com/0/304743/619f9b49-d711-9705-d566-04c26fd9192b.jpeg)
![_20181025_135803.JPG](https://qiita-image-store.s3.amazonaws.com/0/304743/4b85a2b9-ca01-9c29-363c-b7eb93894795.jpeg)
![_20181025_140110.JPG](https://qiita-image-store.s3.amazonaws.com/0/304743/2fdc70d0-dd47-c5d5-2340-24b602719b2c.jpeg)




|グループ|テーマ|作成者|
|---|---|---|
|2|アイディアの宝庫|[早崎][link-4]|
[link-4]:https://qiita.com/hayazaki/private/971ef3a9b67d68281441

その他制作物はこちら[クリック][link-7]
[link-7]:https://qiita.com/shigerusuzuki/items/409137c96ee739509487

このアプリを実際に動かすにはこちら[クリック][link-5]
[link-5]:https://prottapp.com/p/08e346

#５．感　想
使いやすさ便利さを重視しアプリを制作するのにいくつかのアイディアを出しその中からターゲットを絞り込むまでに時間がかかりました。機能が多ければよいというものでもなく必要最低限の中でわかりやすく見やすくするために試行錯誤をしました。制作の過程の中で設計図とは違うものが出来上がってしまったり想像と少しかけ離れてしまいましたが紙におこした図面では使いにくいということもあり修正をしながら調整しました。大変な一面もあり写真の配置に悩みました。ひたすら並べて一ページの中で多くの写真を見ることが出来れば楽だと思いましたが並べ方だけで印象がガラリと変わってしまうので見やすさを取り入れつつ配置に気を遣いました。高校生でどこまで出来るか分かりませんでしたが使ってくれる人のことを考えアプリ制作が出来て楽しかったです。


静岡県立島田商業高校　こちら[クリック][link-1]
[link-1]:http://www.edu.pref.shizuoka.jp/shimada-ch/home.nsf/IndexFormView?OpenView

prottサイト　こちら[クリック][link-2]
[link-2]:https://prottapp.com/ja/
New Worker

#目次
[１．課題について](#1課題について)
[２．アプリの特徴について](#2アプリの特徴について)
[３．ターゲット・ペルソナ](#3ターゲット・ペルソナ)
[４．制作行程について](#4製作行程について)
[５．感想](#5感想)



#１．課題について
新社会人になるにあたり、知っておかなくてはならないマナーなど、多くのことがあります。しかし、高校や大学卒の新社会人に、その知識が備わっているかと問われると、まだまだ未熟な点が多くあります。
「わからないけど、いちいち調べるのがめんどくさい」
「上司に聞きたいけどいまさら聞けない…」
そんな悩みを少しでも改善したいと考え、作成しました。

#２．アプリの特徴について
簡単操作で誰でも使える構造にして、新社会人として知っておきたい基本的な内容をまとめました。忘れないよう、お気に入り登録できたり、すぐメモをとれるよう、アプリ内にメモの欄も作成しました。

#３．ターゲット・ペルソナ
仕事に就くにあたり、社会人としての基本が不十分だと感じている新社会人

#４．制作行程について
今回は、Goodpatch提供の「Prott」を利用させていただきました
これはアプリを作成するのではなく、プロトタイプを作成します

1．手書きで大まかな構図を作成
![1.jpeg](https://qiita-image-store.s3.amazonaws.com/0/304740/ef815252-d918-80d6-d3df-76f3177740a6.jpeg)
2．枠や他ページに移動するためのアイコンを作成
<img width="375" alt="1-2.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/304740/b3a7e102-586d-fb23-879c-b869900e1cae.jpeg">
3．検索用語の例を記入し、背景を作成
<img width="375" alt="1-3.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/304740/e48180c6-dc0b-561c-cf37-7e35183ede09.jpeg">
4．クリックした先のリンクと繋げる
![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/304740/17657a22-c894-7215-3d2f-9fdf9fb861e9.jpeg)
5．繋げたリンクに跳ぶ
<img width="375" alt="2-3.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/304740/9f4b987c-cbaa-a130-84b5-d4f03d988725.jpeg">


同グループの人の作品 ↓

|グループ|テーマ|作成者|
|---|---|---|---|
|１|New Worker|[めいめい][link-3]|

[link-3]:https://qiita.com/pom___5/private/4b4ef02619e977120524



#５．感　想
　はじめ、どのようなアプリがほしいのか、また、現在どのようなアプリがあるのか、ということを話し合い、プロトタイプ作成に至るまでに時間が掛かりました。
　話し合いの結果、商業高校生として、マナー等わからない新社会人にむけて、ビジネスについてのアプリを作成することに決定しました。
　マナーといっても様々なものがあり、全て取り入れるには膨大な時間が掛かると考えました。また、多く取り込みすぎても見にくくなってしまい、使いにくいアプリになってしまうと考えました。そこで、多く使いそうなものだけに絞り、操作方法も簡単にして、見やすさと使いやすさを重視しました。
　高校生の私達には難しいものだと考えていましたが、実際に取り組んでみると簡単で、とても楽しく作成することができました。
　とても簡単な操作なので、興味のある方はぜひProttを活用してみてください




作品はこちら[クリック][link-4]
[link-4]:https://prottapp.com/p/463950

その他制作物は　こちら[クリック][link-5]
[link-5]:https://qiita.com/shigeru-suzuki/items/409137c96ee739509487



静岡県立島田商業高校　こちら[クリック][link-1]
[link-1]:http://www.edu.pref.shizuoka.jp/shimada-ch/home.nsf/IndexFormView?OpenView
prottサイト　こちら[クリック][link-2]
[link-2]:https://prottapp.com/ja/
初めての家計簿

#目次
[１．課題について](#１課題について)
[２．アプリの特徴について](#２アプリの特徴について)
[３．ターゲット・ペルソナ](#３ターゲットペルソナ)
[４．制作行程について](#４制作行程について)
[５．感想](#５感想)



#１．課題について
私たちはこれから卒業し、就職する人、進学する人と別れます:sob:中には一人暮らしを始めるという友人も私の周りにはいます:scream:一人暮らしになったら何が大変なのか、何に困るのかがきになりインタビューしたところ、お金の使い方、お金の管理が大変だという回答をたくさんもらいました:purse:でも、私たち学生は今まで親のすねをかじって生きてきました(笑)そのためお金の管理といっても家計簿なんかつけられないし、面倒くさそうで、つけても3日坊主で終わりそう。。。ということで、簡単に見やすく家計簿がつけられるようなアプリが必要だと考えました:muscle_tone2:

#２．アプリの特徴について
①Prottを使用してアプリを開発しました
　プログラミングができない私たちでも、楽しくアプリ開発ができます

②簡単入力するだけで基本的な計算をしてくれます
　お金の計算が正確なもので、より簡単に家計簿ができるよう
　自動計算してくれます

③カラフルな色を使いました
　若い人たちも目で楽しめるようにカラフルにしてポップな雰囲気を出しました

④カレンダーで月ごと全体のお金の使い方が見れます
　１日ごとのお金の使い方の比較が一目でわかります

⑤１日ごと細かい購入したものを書き込める
　いつ、どこで、どんなものを買ったのか写真つきで乗せることができ
　思い出にもなります
　
⑦自動に入力されたものが月ごと集計されていきます
　自動で集計してくれるため自分で計算や書き込む手間が省けます

⑧今月の使えるお金や、前月繰越の金額、今の貯金残高を書き込めます
　書き込んだ今月使える金額から自動で買った金額を引いて集計してくれます

#３．ターゲット・ペルソナ

一人暮らしをはじめるお金を計画的に使えない人

#４．制作行程について
|グループ|テーマ|作成者|作成者|
|---|---|---|---|
|7|簡単に家計簿を作り無駄遣いしない|まぁや|[あずー][link-4]|

[link-4]:https://qiita.com/azu1219/items/9b706434e5917275969f

webの欄からカレンダーのデータを、Nexus5の欄からホームボタンなどのデータを貼り付け、シェイブのTextを貼り付け文字を打ち込んでいきました。アイコンは使いたいものを検索するとき英語で検索を掛け絞り込むことができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/287031/25c3e649-c824-e601-376e-1de34a4c05ba.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/287031/f1452f04-6b53-3c8c-3875-b0252b799589.png)

グループ化を解除し縦に並べ替え貼り付けていきました。画像は+で追加しトリミングをするなど編集が可能です。編集したものを貼り付けていきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/287031/b164a909-4b38-fbe9-a013-b58b6ff54aca.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/287031/4d85bc22-b4dc-0838-ec73-6649f4205ca4.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/287031/9f2e3ad9-6764-1fd7-7449-e71565d7e5b2.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/287031/b8df5dc5-3539-2151-c906-6701ef9f2b1c.png)

シェイブの線のデータを使いノートのようにマスを作りました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/287031/a05aa2bf-98bf-8565-bb9e-f74d6cabc8f1.png)

左のシェイブから四角の形で背景の色をカラーコードで設定していきます。カラーを変えるだけでなく、透明度や線の幅も変えることができます。表示されている色だけでなく＃でカラーコードを入力すればバリエーションが広がります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/287031/dadfadae-4d4e-babd-bced-0e26b4d62067.png)

アクティブを表示して右側からリンクエリアを指定し線を引くだけで繋がったところに飛ぶことができます。そして、タップの反応の仕方を長押しやダブルタップなど様々な方法に変えることができ、飛んだときの画面の切り替わり方も変えることができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/287031/f9099e71-38d2-f68c-f0aa-27da295d7f2a.png)

このアプリを実際に動かすには　こちら[クリック][link-6]
[link-6]:https://prottapp.com/p/06b24b
その他制作物　こちら[クリック][link-5]
[link-5]:https://qiita.com/shigeru-suzuki/items/409137c96ee739509487

#５．感　想
今回アプリを作成するのに当たり使用したこのProttは最初お絵かき感覚でできました:pencil2::notes:小さなお子さんがいる家庭でも子供と一緒に楽しく遊び感覚でアプリを作成できると思いました:family_wwgb:実際私も楽しく実践させていただきました:notes:貼り付けるだけで構成などが出来上がっていって、とても便利だと感じました:heart_eyes:
ですが、表示されている字が英語な部分があったり、検索を英語でしなければならなかったり、不便な点もありました:capital_abcd:いちいちリンクを設定するのではなく、Prottのようにつなげるだけでいいというのはとても楽だと感じました:heart_eyes:

静岡県立島田商業高校　こちら[クリック][link-1]
[link-1]:http://www.edu.pref.shizuoka.jp/shimada-ch/home.nsf/IndexFormView?OpenView
prottサイト　こちら[クリック][link-2]
[link-2]:https://prottapp.com/ja/
How to yum install oracle-instant

- Reference
    - Oracle Instant Client RPMs Now Available on Oracle Linux Yum Server (yum.oracle.com)
    - https://blogs.oracle.com/linux/oracle-instant-client-rpms-now-available-on-oracle-linux-yum-server-yumoraclecom

- Update yum repository

```
# cd /etc/yum.repos.d
# wget http://yum.oracle.com/public-yum-ol7.repo
```


- **CentOS Only** : import GPG key

```
wget http://yum.oracle.com/RPM-GPG-KEY-oracle-ol7
rpm --import RPM-GPG-KEY-oracle-ol7 
```


- **CentOS Only** : disable all OracleLinux 7.x package

  `enabled=1` -> `enabled=0`


- Enable oracle instantclient repository

```
# yum install -y yum-utils
# yum-config-manager --enable ol7_oracle_instantclient
```

- yum


```
# yum install oracle-instantclient18.3-basic
# yum install oracle-instantclient18.3-devel
# yum install oracle-instantclient18.3-jdbc
# yum install oracle-instantclient18.3-sqlplus
```

```
yum list oracle-instantclient*

Loaded plugins: langpacks, ulninfo
Installed Packages
oracle-instantclient18.3-basic.x86_64               18.3.0.0.0-2           @ol7_oracle_instantclient
oracle-instantclient18.3-devel.x86_64               18.3.0.0.0-2           @ol7_oracle_instantclient
oracle-instantclient18.3-jdbc.x86_64                18.3.0.0.0-2           @ol7_oracle_instantclient
oracle-instantclient18.3-sqlplus.x86_64             18.3.0.0.0-2           @ol7_oracle_instantclient
Available Packages
oracle-instantclient18.3-basiclite.x86_64           18.3.0.0.0-2           ol7_oracle_instantclient 
oracle-instantclient18.3-odbc.x86_64                18.3.0.0.0-2           ol7_oracle_instantclient 
oracle-instantclient18.3-tools.x86_64               18.3.0.0.0-2           ol7_oracle_instantclient
```

Done :smile:
Comic search

#目次
[１．課題について](#１課題について)
[２．アプリの特徴について](#２アプリの特徴について)
[３．ターゲット・ペルソナ](#３ターゲットペルソナ)
[４．制作行程について](#４制作工程について)
[５．感想](#５感想)
[６．その他](#６その他)



#１．課題について
本屋に立ち寄った際、自分がいま何の漫画を、何巻まで持っているのかわからなくなってしまい、結局買わずに帰ってきた、または、もうすでに持っている漫画をもう一度買ってきてしまった！
なんて経験はありませんか？
そこで、漫画購入に関する悩みを解決できるようなアプリを作成しました。

#２．アプリの特徴について
① 男性漫画、少年漫画、女性漫画、少女漫画の４つにカテゴリー分けをし、お気に入り登録、
自分が今どこまで持っているかをブックマークに登録することができます。

②どこの出版社、漫画の横表紙に書いてあるロゴも起債！！

③何か漫画が欲しいけど、何が人気かわからない。　そんなときのために、ランキングも用意しています。

#３．ターゲット・ペルソナ
漫画を購入する機会がある人をターゲットにしています。また、上記の通り、漫画を購入する際に困った経験がある人に主に使って頂きたいです。

#４．制作行程について

今回、アプリを作成するに当たり、プロトタイプを作成しました。
そこで使用したのが「prott」です。

①　　まず、アプリ画面のデザインを紙に大まかに書いていきます。

②　　紙に書いたデザイン案の写真を撮り、prottで読み込みます。
![puroto.png](https://qiita-image-store.s3.amazonaws.com/0/304735/aa6d741d-12cd-2f8b-13d7-9dcd71a83c45.png)

③　　写真が取り込めたら、ここを押すとここに飛ぶというように、リンク先を決めていきます。
タップする範囲を決め、そのままドラッグし、飛びたいページを指定していきます。
![prott画像１.png](https://qiita-image-store.s3.amazonaws.com/0/304735/9da4b1aa-5380-2b80-5d0f-87dab449585d.png)
④　　すべてのリンク先が決まったら、本格的にアプリのデザインを作っていきます。
自分で書いたデザインにあわせて、テンプレートの中から選んでいきます。![無題 fgergregr.png](https://qiita-image-store.s3.amazonaws.com/0/304735/b008f2d5-0d63-ea68-052d-e373b52d28f7.png)
ｐｃ内に保存されている画像も貼り付けることもできます。
![mjjyhgjh.png](https://qiita-image-store.s3.amazonaws.com/0/304735/c8a012c0-2e6a-903b-fb1e-036f275b4569.png)
こんな感じに出来ました。
また、画面上部にある、プレビューで、作成したプロトタイプを確認することができます。
ここで変な点があったら修正して、完成です！！！

アプリを実際に動かすにはこちらを[クリック][link-3]





|グループ|テーマ|作成者|作成者|
|---|---|---|---|
|１|漫画検索|寺|[たぬき][link-4]|


[link-3]:https://prottapp.com/p/a6d8a8

[link-4]:https://qiita.com/tanukianiota/private/94e88f71b5de20cf183c

その他制作物はこちら[クリック][link-5]
[link-5]:https://qiita.com/shigeru-suzuki/items/409137c96ee739509487

#５．感　想

prottを使用して
初めにアプリのプロトタイプを作成すると聞いたときは、基本的なｐｃ操作もあまり自信がない私にとって、すごく不安でした。でも、このprottは、自分がイメージしているものを紙に書いて、それに合わせて図形を貼っていったり、マウス操作でほとんどの事ができます。
難しいプログラミング言語は一切使うことなく、楽しく作成することができました。
アプリのプロトタイプを作ってみたいけど、プログラミングなんてわからない。プロトタイプくらい、楽に作りたい。という方にオススメです！








#６．その他

静岡県立島田商業高校　こちら[クリック][link-1]
[link-1]:http://www.edu.pref.shizuoka.jp/shimada-ch/home.nsf/IndexFormView?OpenView
prottサイト　こちら[クリック][link-2]
[link-2]:https://prottapp.com/ja/
2018/10/26-31 Egret Engineの公式ブログの更新情報

2018/10/31 初心者向け｜Egretで作る ローディングページとステップバイステップのリソースローディング の チュートリアル
https://mp.weixin.qq.com/s/Mj6IMtzulNnsDH2_1k8Aow

2018/10/29 Egret Engine 5.2.12をリリース AssetsManagerのバグフィックス
https://mp.weixin.qq.com/s/MOKy-Xsm0_hoffe_VpJ0Zg

2018/10/26 Egret3Dを探る
https://mp.weixin.qq.com/s/AeC52Y6aLW16s-_-FF1euw

2018/10/26 初心者向け｜Egretで簡単なハムスターゲーム "Ice Bucket Challenge"を作成する
https://mp.weixin.qq.com/s/mexf924JZJGYFYZ4OfJe0w
個人的に詰まったポイントメモ #linux

適宜追加/編集予定

# シェル
## エラーハンドリング
- エラー値返す前に処理を挟みたい。
    - 解凍→どっちにしろ削除(出来たかは見てない)→エラー処理(以下)みたいな事をしたい場合。
        - `unar "${file}" && rm "${file}" || rm "${file}" ; exit 1`
            - どう足掻いても`exit 1`。
            - `;`を改行として考えると分かりやすいかもしれない。
        - `unar "${file}" && rm "${file}" || (rm "${file}" ; exit 1)`
            - エラーが出た時だけ`exit 1`される。
            - `()`で括ると一つのコマンドとして認識される。

# ディレクトリ操作
## mv
- No such file or directory
    - 移動させるファイル/ディレクトリが存在しないと出る。
    - **移動先の途中ディレクトリが無くても出る。**
- 移動+リネームをしたい
    - `sourece/before`を`target/after`に変更したい場合。
        - `mv source/before target/after`
            - でも`target/after/before`となる。あれ？
            - 移動後のディレクトリが存在する場合こうなる。
        - `mv -T source/before target/after`
            - `target/after`に移動+リネーム出来る。
            - **ただ、`target/after`が空ディレクトリでないとエラーを吐く**
                - `mkdir -p target/after`での自動生成と大体セット。
            - **macOSに-Tオプションは無い**

## find
- 空ディレクトリのみ検出
    - `find . -type d -empty -delete`(空ディレクトリを全削除)でよく使う。
        - でも`-empty`が稀に無い。(alpienとか)
        - `find . -type d -depth -delete 2>/dev/null`とかで対処
- 検索パス指定
    - `find . -iwholename "${dir}/*"`とか
    - `find . -not -iwholename "${dname}/*"`で除外
        - 次工程で`grep -F "${name}"`とかする為。
- 文字コードをUTF-8に一括変更
    - `find . -type f -name "*.py$" -exec nkf -wd --overwrite "{}" \;`
    - 最後を`\;`ではなく`+`とすると`find`した結果を一気に渡すので注意。
        - この場合、`nkf`が一気に渡しても問題無いので動くっちゃ動く。
        - ただ並列処理を考えると`+`より`\;`の方が良いかも。
            - `+`だと結果が揃うまで処理が進まないので。

## grep
- 重複確認
    - `find . -type d | grep "${name}" | wc -l`(`"${name}"`の被り数検索)とか。　
        - でも欲しい結果にならない。
            - `"${name}"`にエスケープが必要な文字が含まれている可能性アリ。
                - `\[]^$*.${}`辺り。
            - `-F`を使う。
                - `find . -type d | grep -F "${name}" | wc -l`
                - `\[]^$*.`辺りがちゃんとエスケープされる。
                - `${}`は多分変数の為にエスケープされない。
                    - 細かくは調べてない。


# ファイル操作
## unar
- そもそもインストール出来ない場合がある(alpine)。
    - 余りにも面倒ならコンパイルしてしまうのも一つの手。
        - 自分は出来なかったので(面倒になって)諦めた。
    - そしてそれすら面倒になってUbuntuベースのdockerに切り替えてaptで入れるまでがセット。
- 別コマンドで対応した場合、ほぼ間違いなく文字コード周りで面倒事が起こる。

## unzip
- `unzip -O sjis "${zip}"`でSJIS圧縮されたzipも解凍可能。
    - **OSによる。**
        - macOS 10.14.1で`-O`自体無いと言われた。
        - Alpineでも`-O`自体が無い。
時系列予測手法&実装まとめ（12/10：更新)

#はじめに
よくNNや各種機械学習の手法で時系列解析をやってみたという記事をよく見かけますが、そのほとんどが予測値の算出方法を誤っているように感じます。

学習したモデルに対して元データのたった1ステップ先しか予測していないことが多いのです。

タイムステップが極めて大きい解析対象であればかまいませんが、わずか1ステップの出来事を予測してうれしい場面が果たしてあるのでしょうか。

当然、数十ステップ先を予測することに時系列予測の意義があります。

モデルの出力を加えた入力データを次の予測に利用する再帰的な計算過程を意識する必要があります。

*データを時系列としてとらえる*ことの意義は

明示的に得られていないデータの特徴をデータの並び順から見出す

この一言に尽きます。


# ARIMA系

# Random Forest

# RNN系

# Deconposable TS Model (Harvey+ ’90)

```math
y(t) = g(t) + s(t) + h(t) + ε(t)
```
g(t): 成⻑関数 (growth)
s(t): 周期性 (seasonality)
h(t): 祝⽇効果 (holiday) 
ε(t): 誤差 (正規分布を仮定)

実装
fbprophetというfacebook社が提供しているAPIが便利です
1．[Generate Quick and Accurate Time Series Forecasts using Facebook’s Prophet (with Python & R codes)](https://www.analyticsvidhya.com/blog/2018/05/generate-accurate-forecasts-facebook-prophet-python-r/) - fbprophetを利用
2．[Prophet入門【Python編】Facebookの時系列予測ツール](https://www.slideshare.net/hoxo_m/prophet-facebook-76285278)

参考
1．[Prophet入門【理論編】Facebookの時系列予測ツール](https://www.slideshare.net/hoxo_m/prophetfacebook?next_slideshow=1)

#
HiMacroEx (マウス、キーボード操作自動化)メモ


Windows10で動かすときはCOMDLG32.OCXが必要になる
[XTRM Runtime](http://www.forest.impress.co.jp/library/software/xtrmruntime/) をインストールすればOK

cmdを使う

### クリップボードに今の時刻をコピー

```
cmd
@echo %time:~0,2%%time:~3,2% | clip
Enter
```

### Excelをファイル指定で起動

```
cmd
@"C:\Program Files\Microsoft Office\root\Office16\EXCEL.EXE" "C:\Users\1206y\Downloads\HiMacroEx\HiMacroEx\Test用.xlsx"
Enter

w Test用.xlsx- Excel

' 2秒待つ
2000

@A1に値をいれたよ！
```

現在時刻をExcelブックのシート名に入力する

```
cmd
@echo %time:~0,2%%time:~3,2% | clip
Enter

#TIME = GetClip
MsgBox #TIME

@"C:\Program Files\Microsoft Office\root\Office16\EXCEL.EXE" "C:\Users\1206y\Downloads\HiMacroEx\HiMacroEx\Test用.xlsx"
Enter

' 3秒待つ
5000

w Test用.xlsx - Excel

' 3秒待つ
3000

' シート名を編集
LAlt Down
H
O
R
LAlt Up
' シート名を入力
Key #TIME
Enter
```

### ほかのアプリケーションとの連携

```
cmd
@echo %time:~0,2%%time:~3,2% | clip
Enter

#time= GetClip
MsgBox #time

@"C:\Program Files\Microsoft Office\root\Office16\EXCEL.EXE" "C:\Users\1206y\Downloads\HiMacroEx\HiMacroEx\Test用.xlsx"
Enter

' 3秒待つ
5000

w MarketSpeed

' 3秒待つ
3000

'---------------------
' デスクトップアプリ「Market Speed」をアクティブ化
w Market Speed Ver16.4

' 1秒待つ
1000

'--- 投資情報クリック ---
MousePos(520,70)
LMouse Down (520,69)
LMouse Up (520,69)

'--- ランキング情報クリック ---
MousePos(77,491)
LMouse Down (77,492)
LMouse Up (77,492)


'--- 値上がり率上位銘柄クリック ---
MousePos(355,120)
LMouse Down (355,121)
LMouse Up (355,121)

MousePos(322,145)
LMouse Down (321,145)
LMouse Up (321,145)

'--- 検索クリック ---
MousePos(603,135)
LMouse Down (603,134)
LMouse Up (605,134)

'--- クリップボードコピークリック ---
1000

MousePos(712,127)
LMouse Down (712,126)
LMouse Up (712,126)
1000
Enter

#stock_data= GetClip

'---------------------
' 「Excel」をアクティブ化
w Test用.xlsx - Excel
' A1を選択
LCtrl Down
HOME
LCtrl Up
@#stock_data

' シート名を編集
LAlt Down
H
O
R
LAlt Up
' シート名を入力
Key #time
Enter
```

**使ってみた感想**
ほんの数時間で実務に役立ちそうなことができた。
配列はアイディアで何とかなりそう
【TMUX】新しいWindowを開いたときに、直前のカレントディレクトリを引き継ぐ設定

*※[自分のブログの投稿内容になります。](https://genzouw.com/entry/2019/01/23/221837)**

---

TMUXでWindowを開くたびに直前のカレントディレクトリに `cd` することが多く、面倒だったので調べてみた。

# 環境

自分のTMUX環境を確認

```sh
# tmux -V
tmux 2.8
```



# 設定

以下の設定を `~/.tmux.conf` に追記すればOK。

```sh
vi ~/.tmux.conf
```

```
# 新しいPaneを開く場合
bind c new-window -c '#{pane_current_path}'
# 現在のPaneを水平分割してWindowを開く
bind \ split-window -h -c '#{pane_current_path}'
# 現在のPaneを垂直分割してWindowを開く
bind - split-window -v -c '#{pane_current_path}'
```

すでにTMUXプロセスが起動中の場合は、以下のコマンドを実行しないと正しく反映されないことに注意！

```sh
tmux source-file ~/.tmux.conf
```
40の手習い_やりたいことまとめ

#40の手習い_初心表明
訳あって不惑を迎えたこの年にプログラム等を学ぶことになりました。全くの異業種からの転身です。
この記事は初心忘るるべからずの表明であり、初心者だよ!という表明です。

##将来的にやりたいこと
1.AI・機械学習の分野で生きていける人間になること。
2.データを集め、加工し、活用して世の人のためになることがしたい。
3.新しい技術を学び続けたい。それが社会でどう活かせるか考え続けたい。

##今、やりたいこと(主に技術的向上のために)
写真から遠近法の消失点を割り出すことで、平面の写真から3次元の空間情報を推定するAIを自作すること。

##具体化に向けて
1.PythonでGUIを使ったアノテーションツールを自作する。
2.RaspberryPiを使って画像収集用のカメラを自作する。
3.2を使って教師データ用画像の収集したものを1を使ってアノテーションする。
4.出来たデータセットを使って消失点を認識できるAIを作る。
5.消失点の位置から3次元の空間情報を取り出すアルゴリズムを作る(もしくは探してきて実装する)。

##そのために必要なスキル
1.PyQt5かtkinterを使ってGUIを作るスキル
2.OpenCVを使って画像取得するスキル
3.機械学習用のデータセットを設計するスキル
4.Numpy、matplotlibと線形代数を使って空間座標を扱うスキル

これらのプロセスをQiitaを使って記録、共有していきたいと思っています。
真偽・比較_「すごいErlangゆかいに学ぼう！」_#04

# and or。trueはtrueのみ。nullはない。
true and false. %% => false
false or true. %% => true
true xor false. %% => true
not false. %% => true
not (true and true). %% => false

# 両側評価が基本
true or 1/0. %% => error 両側評価
true orelse 1/0. %% => true 片側評価(短絡評価)
true andalso "fuga" %% => "fuga"。短絡評価は右側がbooleanじゃなくても良い。でも右辺にfalseをもってくると当然、falseが返される

# 比較

5 == 5.0. %% true
5 =:= 5.0. %% false。型も評価
5 =:= 5. %% true
5 /= 6. %% true。スラッシュは否定の意味
10 =/= 10.0. %% true

# 等号、不等号
1 < 2. %% true
3 > 1. %% true
3 >= 1. %% true
4 =< 5. %% true。向きが他の言語ではないパターン。口をへの字に結んだ人の顔として覚えれば良い
javascriptのclass、オブジェクト、継承とかそのへん

# クラスとオブジェクトとインスタンスについて

クラスは設計書のようなものでクラスからできたオブジェクトをインスタンスという。オブジェクトはデータの集まりのようなもの。

# 継承

すでにあるクラスをもとに新しいクラスを作成する事。

# 継承の書き方

読み込みなどをして事前に継承するclassを記載する

```rei.js
import Rei from "./rei.js";
class Reidai extends Rei{
}
```
[Java 8]コーディングテストで使えるアルファベット順、文字列長順のソート方法

# 背景

最近、転職活動のWEBコーディングテストで落ちまくっています。
慣れるしかないと思って、paiza.ioで練習しています。
時間に追われて焦って解くと、後日ソースを見て、吐き気がするクソコードを量産してしまいます。

今回は、List<String>に格納したあとにソートする手法について、まとめてみます。

# 動作環境

- java 1.8.0_191

※Comparatorを使用しているので、Java 7以前では動作しないので注意してください。
```java.util.Comparator;```をインポートしていると思ってください。

# アルファベット順

```java
List<String> list = Arrays.asList("ABC", "DEFGH", "IJKL", "abc", "defgh", "ijkl");

// アルファベット順の昇順（大文字、小文字を区別しない）
// 出力結果：ABC,abc,DEFGH,defgh,IJKL,ijkl
list.sort(String.CASE_INSENSITIVE_ORDER);

// アルファベット順の降順（大文字、小文字を区別しない）
// 出力結果：IJKL,ijkl,DEFGH,defgh,ABC,abc
list.sort(String.CASE_INSENSITIVE_ORDER.reversed());

// アルファベット順の昇順（大文字→小文字で区別）
// 出力結果：ABC,DEFGH,IJKL,abc,defgh,ijkl
list.sort(Comparator.naturalOrder());

// アルファベット順の降順（大文字→小文字を区別）
// 出力結果：ijkl,defgh,abc,IJKL,DEFGH,ABC
list.sort(Comparator.reverseOrder());
```

# 文字列長順

```java
List<String> list = Arrays.asList("ABC", "DEFGH", "IJKL", "abc", "defgh", "ijkl");

// 文字列長の昇順
// 出力結果：ABC,abc,IJKL,ijkl,DEFGH,defgh
list.sort(Comparator.comparingInt(String::length));

// 文字列長の降順
// 出力結果：DEFGH,defgh,IJKL,ijkl,ABC,abc
list.sort(Comparator.comparingInt(String::length).reversed());
```

# おまけ
文字列長 → アルファベット順でソート

```java
list.sort(Comparator.comparingInt(String::length).thenComparing(Comparator.naturalOrder()));
```

Integerをソートする方法。

```java
List<Integer> list = Arrays.asList(1, 3, 2);

// 昇順
Collections.sort(list);

// 降順
Collections.reverse(list);
```

# 終わりに

Lambdaでも実現できるのですが、個人的にComparatorのほうが可読性が高いと感じているため、割愛しました。
これくらいは調べずに、パッと出てくるようになりたいです。

コーディングテストでは、こういうソートが必要なことが多いから覚えたほうがいい！
こっちのほうが可読性が高いぞ！といったご意見、間違いとかありましたら教えてください。
Vue Fes Japan資料まとめ

2018.11.3に行われたVue Fes Japanの資料をまとめました。
[Vue Fes Japan公式サイト](https://vuefes.jp)

## オープニングムービー
[Vue Fes Japanオープニング](https://www.youtube.com/watch?v=vaaY2DoXKGg)

## キーノート 「Vue 3.0 Updates (Evan You)」
[スライド](https://docs.google.com/presentation/d/1pbNnBhkc-CwfzSw4sW9Ai7A7uAxLuNwOd4Gd5PMjrSQ/edit)
[セッション動画](https://www.youtube.com/watch?v=zBOlIvrYWHY)

## ランチセッション
[Progressive Repro Frontend (スライド)](https://speakerdeck.com/cheezenaan/progressive-repro-frontend-number-vuefes)

[LINE株式会社 LunchスポンサーLT (スライド)](https://www.slideshare.net/linecorp/vue-fes-japan-2018-line-lunchlt-121657290)

## 通常セッション

### Next-level Vue Animations (Sarah Drasner)
[スライド](http://slides.com/sdrasner/vuefes-japan)
[セッション動画](https://www.youtube.com/watch?v=d83Pyi_J1b0)

### Vue.jsとWeb Componentsのこれから (Takanori Oki)
[スライド](https://speakerdeck.com/takanorip/vue-fes-japan)
[セッション動画](https://www.youtube.com/watch?v=WttpESl58L4)

### Vue Designer: デザイナーと実装の統合 (katashin)
[スライド](https://slides.com/ktsn/vue-fes-vue-designer)
[セッション動画](https://www.youtube.com/watch?v=A9NgtJpCyh4)

### Unit testing a Vuex store (Edd Yerburgh)
[スライド](http://slides.com/eddyerburgh/testing-a-vuex-store#/)
[セッション動画](https://www.youtube.com/watch?v=kUFZBNiK_Zc)

### Atomic Designのデザインと実装の狭間 (菅原孝則)
[スライド](https://speakerdeck.com/ts020/vuefes)
[セッション動画](https://www.youtube.com/watch?v=YPGZ70SsfLk)

### Nuxt.js 2.0 (Sébastien Chopin)
[セッション動画](https://www.youtube.com/watch?v=3dFFy8waxcg)
※スライド未公開

### A deep dive in SFC compilation (Rahul Kadyan)
[スライド](https://github.com/znck/talks/tree/master/2018-11-03-deep-dive-into-sfc-compilation)
[セッション動画](https://www.youtube.com/watch?v=nFFZBVb5vbA)

### noteのフロントエンドをNuxt.jsで再構築した話 (福井烈)
[スライド](https://speakerdeck.com/fukuiretu/notewonuxt-dot-jsdezai-gou-zhu-sitahua)
[セッション動画](https://www.youtube.com/watch?v=yDaZFK5jbo8)

### Vue CLI 3 and its Graphical User Interface (Guillaume Chau)
[スライド](https://slides.com/akryum/vue-cli-18-3-jp)
[セッション動画](https://www.youtube.com/watch?v=GMdCf-2kmQE)

### 1年間単体テストを書き続けた現場から送るVue Componentのテスト(土屋和良)
[スライド](https://speakerdeck.com/tsuchikazu/vue-component-test)
[セッション動画](https://www.youtube.com/watch?v=oE8z3otI-Hg)
mashupawardに、応募してみた。

#概要

mashupawardに応募してみた。


#gugenとのすみわけ

- ソフトウェア寄り
- 規模がでかい
- バックエンドを使う
- 一般人に理解

　なら、mashupaward。

#成果物

##fake gps serial
arduino+lcd+keypad+usb-serial
nmeaを生成する。



##fake gps bluetooth
androidアプリ
nmeaを生成、bluetoothで飛ばす。


##wifi ラジコン
wemos+ラジコン
wifiを立てて、webサーバーでhtmlを送り込んで、デバイスオリエンテーションで操作。


以上。
chrome49をスタンドアロンインストールする方法

xpに対応している最終版のchrome 49のスタンドアロンインストーラーがほしかった。(ネットに上がっているのはちょっと怖かった。)

1. `%temp%`をexplorerで開いておく
2. 通常のセットアップを開始。
3. 「ダウンロードしています」の表示のとき、`%temp%` 内にフォルダが1つ増えることを確認。
4. 「インストールしています」の表示に変わったらすかさずその増えたフォルダをコピー、`(どこでもいいので)貼付け`する。
5. インストールが終了すると、先ほどのフォルダが自動で消えるが、4.で貼り付けたフォルダは残っている。
6. 4.で貼り付けたフォルダの中は以下ファイル。

![スクリーンショット_2018-11-05_08-01-52.png](https://qiita-image-store.s3.amazonaws.com/0/25728/4da737cf-7a50-7cbb-5e1d-e52f643fdfc0.png)

`CHROME.PACKED.7Z`と`setup.exe`を一緒のフォルダに入れて`setup.exe`を実行すればオフラインインストールが出来る。
Vue.js で TypeScript の Map 型の中身をテンプレートで v-for するには素の JS と違い  Array.from が必要

## 結論

Vue.js を TypeScript で書いたときに`Map`型の中身を列挙する方法に少しハマったので調べました。
結論としては`Array.from`で`Map`を`Array`に変換する方法で列挙できます。


## 調べた理由

Vue.js で TypeScript の`Map`型の中身をテンプレートで列挙する際、
コンパイルエラーは起こさず以下の方法では`Map`の中身が表示されませんでした。

```vue
<template>
  <div id="app">
    <ul>
      <li v-for="[key, value] in greetMap" :key="key">
        key: {{ key }} value: {{ value }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  private greetMap = new Map([
    [1, 'おはよう'],
    [2, 'こんにちは'],
    [3, 'おやすみ']
  ]);
}
</script>
```

Chorme のデベロッパーツールを確認すると以下のように表示されています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/195024/1043f1eb-8c8e-9eda-3bf4-a5114dd6ad6d.png)

```:訳
JavaScriptを有効にしないとマップの反復が正しく機能しません。 有効にしてください。
```

JavaScript は有効になっているので、エラーメッセージが直接の原因ではないようで、
調べてみると JavaScript と TypeScript の仕様の違いが原因でした。

例えば以下の`Map<number, string>`のインスタンスを`for of`でそのまま列挙しようとすると、
JavaScript では OK ですが、TypeScript ではコンパイルエラーを起こします。

```ts:
const greetMap = new Map([
  [1, 'おはよう'],
  [2, 'こんにちは'],
  [3, 'おやすみ']
])
```

```ts:JavaScriptではOKだがTypeScriptではコンパイルエラー！
for (const [key, value] of greetMap) {  // <- エラー
  console.log(`key: ${key} value: ${value}`)
}
```

↓↓ エラー内容 ↓↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/195024/69e97ad1-07ba-f8ac-6b2f-23297708acd1.png)

```:訳
タイプ 'Map<number, string>'は配列型または文字列型ではありません。
イテレータの反復を許可するには、コンパイラオプション '--downlevelIteration'を使用します。
```

StackOverFlow に似た質問を見つけました。
**[Iterating over Typescript Map](https://stackoverflow.com/questions/37699320/iterating-over-typescript-map)**

TypeScript で`Map`型を列挙する場合、以下の方法でできるそうです。

- `Array.from`で`Map`をネストした配列に変換する `Map -> [[], [], []]`

```ts
for (const [key, value] of Array.from(greetMap)) {
  console.log(`key: ${key} value: ${value}`)
}
```

- `Map.prototype.forEach`
 
```ts
greetMap.forEach((value, key) => {
  console.log(`key: ${key} value: ${value}`)
})
```

- `"downlevelIteration": true` + `for of`

```json:tsconfig.json
{
  "downlevelIteration": true,
}
```

```ts
for (const [key, value] of greetMap) {
  console.log(`key: ${key} value: ${value}`)
}
```


## `Map`型の中身をテンプレートで`v-for`する

Vue のテンプレート内部の式はほぼ JavaScript と互換性を持っているので`Array.from`する方法で表示ができました。

```vue
<template>
  <div id="app">
    <ul>
      <!-- Array.fromでネストした配列に変換 -->
      <li v-for="[key, value] in Array.from(greetMap)" :key="key">
        key: {{ key }} value: {{ value }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  private greetMap = new Map([
    [1, 'おはよう'],
    [2, 'こんにちは'],
    [3, 'おやすみ']
  ]);
}
</script>
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/195024/80c2cb53-a898-8131-e1c8-49760a191e9c.png)

Angular や React と違い、Vue のテンプレートの型チェックができない弱点により問題解決にちょっとだけ調査が必要でした。
Angular lnguage service や React の tsx の静的型付けとの親和性は高さが羨ましくもありますが、Vue も 3.0 から TypeScript との統合が進んでいくそうなので、テンプレートの型チェックできる未来も近いかもしれません！:grinning:
AWS ソリューションアーキテクト試験 勉強 - security 19%

# 主なサービス

## MFA
- [AWS での多要素認証 \(MFA\) の使用 \- AWS Identity and Access Management](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_credentials_mfa.html)

### ポイント
##### 分類
セキュリティトークンベース

- AWS アカウントのルートユーザー または IAM ユーザー 1 人あたり 1 つの MFA デバイスのみ有効にすることができ、デバイスは指定されたユーザーのみが使用できます。
- 標準ベースの TOTP (時刻ベースのワンタイムパスワード) アルゴリズムである RFC 6238 


SMSテキストメッセージベース

- SMS ベースの MFA は IAM ユーザーのみ使用でき、ルートユーザー が使用することはできません。
- 現在、SMS ベースの MFA はAWS マネジメントコンソールでのみ使用できます。 SMS ベースの MFA を API または AWS CLI で使用することはできません。

##### CLI、API
- MFA デバイスを有効にします。AWS マネジメントコンソール、AWS CLI、Tools for Windows PowerShell、または IAM API の IAM ユーザーの MFA デバイスを有効にすることができます。AWS マネジメントコンソール を使用してのみ AWS アカウントのルートユーザー の MFA デバイス を有効化することができます。

- ログインするか、または AWS リソースにアクセスする場合には、MFA デバイスを使用します
- MFA 保護 API オペレーションにアクセスするには、MFA コード、MFA デバイスの識別子 (物理デバイスのシリアルナンバー、仮想デバイスの ARN、または AWS で定義されている SMS デバイス)、普段使用しているアクセスキー ID およびシークレットアクセスキーが必要となります。注記:
一時的な認証情報を要求するために SMS MFA デバイスの MFA 情報を AWS STSAPI に渡すことはできません。

### 資料リスト
- [Azure MFAサーバーを使用したAmazon WorkSpacesの多要素認証（Multi\-Factor Authentication） \| Amazon Web Services ブログ](https://aws.amazon.com/jp/blogs/news/amazon-workspaces-multi-factor-authentication-using-azure-mfa/)
- [多要素認証](https://aws.amazon.com/jp/iam/details/mfa/)

----

## WAF
- [AWS WAF](https://docs.aws.amazon.com/ja_jp/waf/latest/developerguide/waf-chapter.html)


### ポイント
##### 概要
- 条件
- ルール
- ウェブACL


##### チュートリアル