常連

注目の的

社会貢献

質問力

回答者

拍手喝采

自己紹介

サルワカさんのサイト
https://saruwakakun.com/html-css/reference/nav-drawer

このサイトにあるように、CSSでハンバーガーメニューを作っているのですが、
ページを開いたときに、メニューの中身が左側へ移動してるのが表示されてしまいます。

サルワカさんのデモでは、最初から左側へ隠れているのですが、
自分のエディタにコピペして表示させると、上記の不具合が生じます。

回答よろしくお願いします。

【追加】

ページを更新した時の表示です。（２回更新ボタン押しています）

![![イメージ説明](2a16c01fa557808df59fe16dcc1343a9.gif)](a49b8c7c2645d0126e88dfa923e2d164.gif)



windows10のChromeをつかっています。



### 該当のソースコード

```ここに言語名を入力
HTML
<header>
  <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">ここに中身を入れる</div>
  </div>
</header>



CSS
header {
  padding:10px;
  background: skyblue;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
```

CSSのみのハンバーガーメニュー実装

###前提・実現したいこと
spotのライトを使って、明かりがあるところだけユニティちゃんが明るくなるようにしたいのですが、ユニティちゃんがspotのライトで明るくなってくれません。

###発生している問題・エラーメッセージ
ユニティちゃんにライトを当てても真っ黒になってしまい明るくなりません

###試したこと
directionalのライトでだけユニティちゃんが光ります
レイヤーの位置は間違ってないです
directionalのライトを使って常にユニティちゃんを明るくすることはできました
SDユニティちゃんでも変わりませんでした

###補足情報(言語/FW/ツール等のバージョンなど)
5.6.0f3 64bitです
nav mesh agent を使ってユニティちゃんを操作してます

spotのライトを使ってユニティちゃんを照らしたい

#知りたいこと
（１）SSLのサイトしか使わないなら公共のフリーWifiでパスワードや重要な通信を行ってもOK？
（２）非SSLサイトでも公共Wifiなど攻撃者と同じネットワークの中にいないなら大丈夫？
（３）公共のフリーWifiを使っていても、パスワード等の重要な通信を行わなければ問題ない？（非SSL通信で）
（４）非SSLと公共フリーWifiの具体的なリスクを知りたい


####（１）SSLのサイトしか使わないなら公共のフリーWifiでパスワードや重要な通信を行ってもOK？
フリーWifiの問題点は下記だと認識しています。

攻撃者と同じネットワークに入ってしまう可能性があり、
パケットキャプチャ等を使われるとSSL通信以外の通信が平文で見られてしまい
パスワード等の重要情報が見られてしまうこと


上記で正しいなら、
SSLサイトしか使わないなら
公共のフリーWifiは重要なサイトでログイン等を行ってもOKということでしょうか？

もし、ブラウザが保持しているクッキーやローカルストレージの値まで見られてしまうということであれば
SSLなどは関係無しに危ないと思うのですが、
通信中のパケットだけが攻撃対象なら大丈夫なの？と疑問に思っています。


###（２）非SSLサイトでも公共Wifiなど攻撃者と同じネットワークの中にいないなら大丈夫？
（１）の認識から、
SSLじゃなくても公共Wifiなどを使わないなら傍受のリスクはない？と疑問に思っています。


###（３）公共のフリーWifiを使っていても、パスワード等の重要な通信を行わなければ問題ない？（非SSL通信で）
（１）の認識から、
そのように思っています。


###（４）非SSLと公共フリーWifiの具体的なリスクを知りたい
セキュリティに関して、
具体的にどういった理由でどのようなリスクがあるのかを知りたいです。

例えば、
公共のWifiは通信が傍受される可能性があるから危険
といった抽象的な話ではなく、

下記のように
どのような手法でどのような被害が起こるのかを教えていただきたいです。

（例）
パケットキャプチャは同じネットワーク内のパケットを見ることができ、
非SSL通信でのパケットにはパスワード等が平文で記載されている。
そのため、公共Wifiで非SSLを行っているサイトに（パスワードを入力して）ログインを行うと、
パケットキャプチャによってパスワードがバレてしまい、
傍受したパスワードを利用してサイトになりすましログインされてしまうリスクがある。



不足している情報等があれば
補足させていただきますので
以上、よろしくお願いします。


追記 2018.11.28
ockeghem様のご回答で
かなり理解が進んだのですが、
その中でまだ理解が怪しい箇所があるため、

ockeghem様とのコメントのやりとりに関して
ご回答をお待ちしております！

SSL通信と公共フリーWifiにおいて、具体的なリスクを知りたい。

いつもお世話になっております。

リリースしたサービスがユーザー数が増え始めたため、そろそろISO27001の取得などに踏み出そうかというフェーズになりました。

それで、いろいろ調べたり取得コンサルの方に話をきいたのですが、
ISO27001もプライバシーマークも「**実際にセキュアなシステムとなっていること」**のレビューというより「**セキュアなシステムを運用できる体制ができているか**」のレビューなんじゃないかと感じました。

そういったマークを取得することも重要なのですが、**実際問題システムがセキュアになっていることにもお金とパワーをかけたい**と考えています。

そういった場合、どのように進めていくのが常套手段なのでしょうか？

例えば、[IPAのガイドラインの確認](https://www.ipa.go.jp/security/vuln/websecurity.html)などは行っているのですが、
できれば第三者レビューなどがあると安心して進められるなと考えています。

フワッとした質問で申し訳ないのですが、どんな小さなことでも構いませんので、ご意見いただけますと大変助かります。

スタートアップが行えるセキュリティ対策

SVGのアニメーションを多用したサイトを制作できるようになりたいのですがプロの方が行う実際に制作の過程がよくわからないです。
今までは、「keyshape」を使用するかjsで手書き？のような感じで動かすことしかしたことがありません。
今後、しっかり勉強したいのですが実際に現場でも使えるもしくは役立てることができるようにしたいです。
後から、こっちをやるべきだったなどがないといいなと・・・
単調にpathを描いていくのかもしくはソフトを使用してsvg+cssを書き出して作成しているのか・・・
例えば下記のサイトのようなものを作成するのは、どういった方法が一般的なのかなど・・・
https://www.superduper.wtf/
https://clarity.io/

SVGアニメーションを多用したサイトを作成されたことのある方、どうかご教授ください。

SVGのアニメーションを勉強するにはどうしたらいいでしょうか？

###前提
- コーディング（html,css）はできないWEBデザイナーの方にスマホ用のWEBデザインを発注し、psdファイルで納品してもらった。
- スマホ用と伝えただけで詳細な画面サイズは指定していない。
- だいたいいい感じで作ってくれるのであまりチェックはしていなかった。

###疑問点
画面はスマホになっているが、レイヤーのサイズ？はW:2103px H:1420pxとなっている。これからコーディングを別の方に発注するが、
このままこのpsdファイルを渡して問題なく（本来のサイズと異なっている？）作成できるのか。
通常は最低限基準となる画面サイズは指定するのか。

###経緯
たまたまアイコンが欲しかったのでpsdファイルを開くことになり（ほぼ初めて）、ちょっと気になりました。専門外なのでノーチェックでしたが、
もし余計な作業がコーディング時に発生していたり（あっても発注先の方は言いにくいはず）、そもそもWEBデザイナーへの発注の仕方が悪いなど
アドバイス、指摘もあれば頂きたいです。

デザインカンプ（psdファイル）からhtmlへのコーディングについて

```python
    ID_list = []
    name_list =[]
    for list in data["result"]:
        if list["index"]%2 == 0:
            ID_list.append(list["ID"])
            name_list.append(list["name"])
    return ID_list,name_list
```

このように2つのappendがある場合に、1つの内包表記で表すのは可能でしょうか？
不可能であった場合に、2つの内包表記で記載するのと、このままのfor文ではどちらが処理が速いでしょうか？

2つappendがある場合の内包表記

### 前提・実現したいこと

Windows版Firefoxで、Canvasの上にDOMのテキスト（div、pタグ等）を重ねると、なぜか文字の背景が透過されず黒く塗りつぶされてしまいます。
原因や解決策に心当たりがありましたら、よろしくお願いします。

（追記）
Windowsですが、Macの仮想環境（Parallels Desktop）での現象になります。
すみませんが、Windowsネイティブでの表示検証はできておりません。
仮想環境上のみで起こる現象の可能性もあります。

```ここに言語を入力
<style>
    #test {
        color: #fff;
        position: absolute;
        top: 200px; left: 200px;
        z-index: 2;
    }
    canvas {
        z-index: 1;
    }
</style>

<div id="container">
    <div id="test">テストテストテスト</div>
    <canvas id="canvas"></canvas>
</div>
```

![イメージ説明](4dc1289d61e23c35fa34f0cb896f86be.png)

### 試したこと

Windows版Firefoxで、canvas要素の上にテキストを重ねた時のみ起こる現象のようです。
z-indexで重なり順を逆にして、テキストの上に透過したCanvasを重ねた場合は問題ありません。
テキストを上に重ねた時のみこの現象が起きます。透過pngなど画像では問題ありません。

マークアップを変えたり色々と試しましたが、例外なく起こりました。

### 補足情報（FW/ツールのバージョンなど）

Macの仮想環境上（Parallels Desktop）での現象になります。
ネイティブでの表示検証はできておりません。
仮想環境上のみで起こる現象の可能性もあります。

Windows8.1、Windows10のFirefoxで現象を確認しました。
それ以外のブラウザやMac版Firefoxでは問題なく透過されて表示されます。

Windows版Firefoxで、Canvasの上にテキストを重ねると背景が透過されず黒くなります

お世話になっております。

noscriptについて分からない点がある為質問させていただきます。

【やりたいこと】
JavaScriptが有効だった場合と無効だった場合の表示するHTMLを変化

【試したこと】
```ここに言語を入力
 <noscript>
  <meta http-equiv="refresh" content="0;url=noscript.html">
</noscript>
```

【分からない事】
上記を試したところ、JavaScriptが有効・無効どちらでも強制遷移させてしまいます。

試しに以下を設定したところ、無効の場合のみメッセージが出力されました。（期待通りの動き）
```ここに言語を入力
 <noscript>
  JavaScriptを有効にしてください。
</noscript>
```

こちらは文字だけ有効無効で切り分けられておりました。
```ここに言語を入力
 <noscript>
  <meta http-equiv="refresh" content="3;url=noscript.html">
3秒後に自動遷移させます。
</noscript>
```

上記問題の対処法等ご存知の方がいらっしゃいましたら、ご教示いただけると幸いです。
以上、よろしくお願いします。

追記：指定ブラウザは「Google Chrome/IE11/Safari」としております。
申し訳ありません。ご指摘ありがとうございます。

noscriptと<meta http-equiv="refresh" content="0;url=noscript.html">について

[このページのテレビが比較されているtableを特定したい](https://panasonic.jp/viera/products.html)

IE11
Excel2010
Windows10

やりたいこと
IEの無名のtableの特定をしてtableのテキストを取得したい。

tableはほかにもあるのでtable(0)では取得不可です。


下記のコードではどのテーブルが取得したいテーブルかがわからないため取得できる方法をご教示お願いいたします。
```vba
    Dim i As Integer
    i = 0
    For Each objTable In objIE.document.getElementsByTagName("table")
        Debug.Print objTable.Cells(i).innerText
        i = i + 1
    Next objTable
```

idやクラスを指定していないtableを特定する方法

ディープラーニング関係のライセンスや著作権について教えてください。

ニューラルネットワークの重みは、ライセンスがついていることがあると思いますが、
ニューラルネットワークの構成等には特にライセンスや著作権は存在せず、商用利用可能なのでしょうか。

例えば、yoloやVggなどのネットワーク構成と同一のものを、１から独自データで学習した場合は、商用利用可能なのでしょうか。

ディープラーニング周りのライセンスや著作権

### 前提・実現したいこと

外部から自宅のNASに安全にアクセスしたい。

出先から自宅や会社のデータにアクセスするというよくある要望だと思いますが、
自分はリモートアクセスに使用するソフトが脆弱性攻撃をされてもデータを安全に保つ方法を考えたいです。
自宅にsshサーバか、VPNサーバを立て、NASデータのやりとりをする方法をよく見ますが、リモート接続に関連するソフトウェアがゼロデイ攻撃された場合、攻撃者に平文データのNASに自由にアクセスされる危険性があります。

そこで、以下の条件で安全にNASアクセスをする方法を考えたいです。(ついでに、リモート操作できる専用PCも置きたい)

条件:
1.VPSなどの踏み台サーバーは利用せず、通信は外部の自分の端末と、自宅ネットワークで完結するものとします。
2.リモート接続の認証が破られたときのためにNASなどのリモート対象機器のセグメントはDMZ的にする。つまり、

自宅ネットワーク(network 2)-router2-リモート用セグメント(network 1)-router1-wan

のような構成にし、自宅ネットワークへの侵入はさせない。

以上の要件を解決する、ネットワーク構成もしくはNASの設定はあるのでしょうか？

特に、企業などの重要度が高い要件では、このように外部からアクセスをしたくて、ルーターやファイヤーウォールに穴を開けた場合は、どう対策をしているのでしょうか？

自分の考えた方法は以下の2つです。

1つめは、暗号化データをNASに入れる用いる方法です。
自宅ネットワーク内に存在する平文状態のNASデータに対し、
それを同一ネットワーク内の機器により、暗号化&リモートセグメントへのアップロード・同期処理する機器を用いて、リモートセグメントに設置したいNASへ、データをコピーする方法です。

```
(自宅ネットワーク network 2)--router2-(リモートセグメント network 1)-router1-wan
|                                |
|--(平文のNASデータ)        (暗号化データのNAS)
|
|--(NASデータを暗号化・同期処理する機器)
|
(その他の自宅の機器)
```

メリット
・VPNなどが攻撃されても、被害はリモートセグメントへのアクセスで済むし、
NASデータは暗号化されているので、大丈夫。

暗号化方法としては、自分でツールを作成するか迷っていますが、

データだけでなくファイル・フォルダ名の暗号化機能と、
データ毎に異なる鍵を使用する方法を用いるつもりです。
(KMSのように、うまくできないかな!?)

デメリット
・NASの総容量やファイル数が多いと、暗号化・同期処理が重くなる。
・もし、暗号化後のNASデータを同期処理するのに、SMBを使用している場合は、router2の外向きファイル共有ポートを開ける必要があり、平文状態のNASデータが漏洩する危険性が現れ、出口対策が無効化される。(ポートを変更すればいいだけ!?)

2つめは、二重リモートする方法です。

最も外側のリモート接続機器が攻撃されても、NASまでのアクセスがリモートソフトで多重化されていれば、より内部に近いリモートソフトからは総当たりやその他の不審なアクセスのログが残り、長時間の放置ではない限り、リモートセグメントにアクセスされる可能性は低いです。
特に、多重化するリモートソフトは、異なるソフト、かつ、異なるホストだと、悪用された脆弱性で連続的に侵入される事はない。

メリット
・短期間であれば、NASデータの存在するセグメントにアクセスされないため、NASデータを平文状態で設置できる。

デメリット
・異なるホストを用意する手間。これが物理的に異なるホストではなく、仮想ネットワーク内の仮想ホストで多重化しても、セキュリティ的に問題にならないなら、コストカットできる。

以上の方法を考えましたが、何か良い案がありましたら教えてください。

ps:
ポートフォワーディングとかも使えるかな？
webサーバの公開を一度もやったことがなく、
サーバ公開自体が今回が初めて。



### 補足情報（FW/ツールのバージョンなど）

まだ、セキュリティ的に怖くて始めていませんが、犠牲になるVPNなどのリモート認証機能をもたせる機器は、RPIでやるつもりですが、フィルタやウィルスチェックを考えると、余力のある普通のPCの方がよいかもしれません。

脆弱性・ゼロデイ攻撃に耐えられる、外部からNASデータに安全にリモートアクセスする方法について

### 前提・実現したいこと
長文で失礼いたします。
現在新たにWEBシステムを立ち上げようとしています。
機能としては、利用者がログインして、自分のアカウントに関連づくデータを表やグラフ形式で表示するといったものです。
また前提として、このシステムでは氏名などの個人情報とパスワードを非常に機微なものとして扱うものと位置づけています。

要件定義を行っている中で、ある社員の方が「個人情報の入っているデータベースにアクセスするアプリケーションは分けたほうが、セキュリティ的に安全なのでは？」という意見を上げました。
セキュリティの専門家のような方もいないので、なんとなーくな雰囲気で「まぁ確かに」という空気になって話がそのまま進んでいきました。

上記の話を聞いた上で、私が細かい設計を考え始めたところ、「個人情報にアクセスするアプリケーションを分ける」という話をWEBシステムに落とすと「個人情報にアクセスするためだけのwarが必要になるのかな？」と考えました。

その話を踏まえたうえでサーバーとアプリケーションの構成を以下のように書き起こしました。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
WEBサーバー（Apache httpd）
　┗アプリケーションサーバー（Tomcat）
　　┣（１）ログイン・個人情報アクセス.war
　　┗（２）その他の機能（データ表示ページなどを表示する）.war

データベース（**データベースの構成は諸事情で大きく変更することができません。**）
　┣（Ａ）ログイン情報・個人情報を格納するデータベース
　┗（Ｂ）その他の情報を格納するデータベース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

（２）のwarで氏名などの個人情報が必要になった場合、（１）がDBから個人情報を取得して（２）に渡すという想定です。
渡す方法としては、（１）にRest APIのような機能を持たせて（２）からリクエストを送って取得するか、（１）でセッションに個人情報を格納して（２）から参照する方法を考えました。

この内容で周りに確認したところ特に否定的な意見も無かったのでこのまま話が進みました。

しかし、いざ自分で製作を始めると（自分で作っておいてなんですが）この設計に意味があるのかが疑問になりました。

### お聞きしたいこと
①．そもそも「個人情報の入っているデータベースにアクセスするアプリケーションは分けたほうが、セキュリティ的に安全なのでは？」という意見は正しいのでしょうか。
同じサーバーで動いているならこのサーバーがハッキングされた時点で終わりですしあまり意味が無いような気もしますがどうなのでしょうか。
単一のwarファイルから個人情報にアクセスしてそれを表示するよりも安心といえるのでしょうか。
②．①の意見が正しいとして、私の構成は正しいのでしょうか
（Ａ）のように個人情報とログイン情報が同じデータベースに格納されている関係上、個人情報を利用して画面に表示するwarとログイン処理を行うwar分ける必要性があると考えています。
そのため、（１）ではJWTを用いた認証を行い、（２）にアクセスされた場合クライアントがクッキーに持っているJWTを検証してログイン済みかどうかを確認し、ログイン済みであると確認できれば（２）から（１）の個人情報取得用APIに対して同じJWTを含んだリクエストを送って個人情報を取得しようと考えております。
しかし、個人情報を取得するのにいちいちAPIを叩くのは煩雑ですし、（１）個人情報取得用の口を作るのもセキュリティ的にどうなのという気もします。

実際にインターネットに公開されるWEBシステムを0から構築するのが初めてな上、セキュリティを徹底する必要があると上司から言われているので不安です。
知識が乏しく「それはおかしい！」「こうしたほうがいい！」ともいえないため悩んでおります。
この設計に対する問題点の指摘、こういった設計にしたほうがいいというアドバイスをいただければと思います。

なにとぞよろしくお願いします。

【設計？】セキュリティの観点から個人情報にアクセスするwarとそれ以外の機能をもったwarをわけるという考え方

**JavaScriptでハッシュ関数生成値を使用したいのですが**
・標準関数は用意されていないのでしょうか？
・コードを確認されると意味がないから？

**ハッシュ関数を生成するJavaScriptライブラリについて**
・使用しても大丈夫でしょうか？
・コード内容を確認しても、元の値は推測できないという理解で合っているでしょうか？

JavaScriptにはハッシュ関数は用意されていない？ コードを確認されると意味がないから？

Djangoで作成したプロジェクトをHerokuにのせようと思い、初回デプロイは成功しました。
しかしその後修正したコードを再度デプロイしたのですが、Heroku側に正常に反映されません。
※コマンドライン上はうまくいったように見えたのですが、
　Heroku側は初回デプロイ時のまま(既存ファイル編集内容が反映されていない、追加したファイルが存在していない)

以下のように実行したのですが、手順が間違っているのでしょうか。
この事象の原因と正しい再デプロイの仕方をご教示頂ければと思います。

$ heroku login
$ git add . 
$ git commit -m "test"
$ git push heroku master
$ heroku open

Herokuへの2回目以降のデプロイ方法

# 皆様ありがとうございます!
おかげで今まで知らず、見えてもいなかった情報が集まってびっくりしています。ここで質問しなければアクセスするのに何年、はたまた一生かかってもたどり着かなかったと思います<(_ _*)> 本当にありがとうございます＼(*T▽T*)／ 引き続き「こんなのもあるよ!」という情報募集中です(ﾉ´▽｀)ﾉ

xoxoxoxoxoxoxoxoxo
xoxoxoxoxoxoxoxoxo

こんにちは！ PythonをProgateから始めてちらちらとプログラム書いています。しかし作っていく中で、「木を見て森を見ず」な状態に陥っていると感じ、[Python3のドキュメント](https://docs.python.org/3/index.html) を主に参照しつつ、これまで目にした構文などを中心にマインドマップにPythonをまとめてみました。

誤解している部分や漏れているものなどあれば指摘がほしいです。Pythonを俯瞰的に理解して「これはあそこを見ればいいはず」「こういう書き方になるはず」「`import`だけじゃなくて`sudo pip ` もいるはず」などと、調べ方の当たりを楽につけられるようになりたいです。

**現在の理解**
- Python開発の際に必要となるのは文法、フレームワーク、モジュールの知識。
- モジュールには2種類あり、外部ライブラリはimportに加え`sudo pip ~`とする必要がある。
- フレームワークはまだ使ったことはないが、Railsみたいなもの。

マインドマップを編集しました。1画面では収まりきれなかったので、上下に分けて載せています。さらに編集した部分だけスクリーンショットを撮って載せています。ハイコントラストで作業しているので色が反転しています。
マインドマップ上
![PyMindmap1](134e62d9a3d624f91d0b97665a074304.png)

マインドマップ下
![Pymindmap2](800ce0dd952cfd3033667e6f1854ee11.png)

**2018/08/20 6:55にマインドマップを編集して追加**
![0655_1](6650ffbf94264fb6032e5053c6c4be9c.png) ![0655_2](cddf459d72cc541af30fcdb7405e174c.png) ![0655_3](c983e4f420c6de16e44bb2d3d9e86c64.png)

**2018/08/22 16:02にマインドマップを編集して追加**
![俯瞰情報](edd44df55e985be771c1d460ed285abd.png)

**2018/08/26 20:30にマインドマップを編集して追加**
pep8に従ってコードを自動で整形
![autopep8](089270f916021f09e8abd23de8a7ac03.png)

# 開発環境
開発環境は以下のような感じです。
- Windows7
- Python3
- Cloud9またはJupyter

どうぞよろしくお願いいたします。

Python周りを俯瞰したくマインドマップを作ったので誤解している部分、足らない部分をご指摘ください。

### Pythonのイテレータとジェネレータの使いどころはどこですか？？
Pythonを勉強したての頃は、「クラスなんて、どこで使うねん！！関数だけで十分やん！！」みたいに思っていましたが、今は「**イテレータなんて、どこで使うねん！！リストだけで十分やん！！**」と思っています。

下記記載の参考URLを見る限り、メリットは以下の2点と思われました。
0. 省メモリ
　　アクセスされるたびに値を生成するので、メモリの節約になる
1. 処理の記憶
　　現在処理がどこまで行ったか記憶している

```Python
>>> test_iter = iter([1, 2, 3])
>>> for i in test_iter:
        print(i)
1
2
3
>>> for i in test_iter:
        print(i)
>>>
```

*1
https://qiita.com/keitakurita/items/5a31b902db6adfa45a70
*2
http://note.crohaco.net/2016/python-iterator-generator-and-tshirt-me/

Pythonのイテレータ・ジェネレータの使いどころ

### 前提・実現したいこと
```javascript
function (a: string, b: string) {
  if (a === "文字列") {
    if (b === "文字列") {
      // return 文字列
    }
    if (b === "文字列") {
      // return 文字列
    }
    if (b === "文字列") {
      // return 文字列
    }
    ・
    ・
    ・
  }
  if (a === "文字列") {
    ・
    ・
    ・
  }
  ・
  ・
  ・
}
```

上記のような処理をもっとスマートに書きたいのですがよい方法はありますか？

TypeScriptで連続したif文の良い書き方

### 前提・実現したいこと
Pythonでテニスの動画解析ツールをつくっています。

↓の画面のように、GUIでスライダーがあり、スライダーを移動することで動画のフレームが移動し、そのフレームの画像が表示されるというものになっています。

![イメージ説明](43ab04ffe47c99c08c2165fd4973a094.jpeg)

フレーム数が長い動画を扱う場合、メモリが足りなくなるので、動画を細かく分けて扱っています。

できれば１つの動画として扱えるようにしたく、うまいやり方がないか模索中で、ご意見をいただきたいです。

同じ動画を扱うにしても、
フリーソフトのAviutlなどはこういった操作もサクサク動くので、ああいう感じでやりたいなあと思っています。

### 困っていること
①前処理として動画の画像情報をフレーム毎に配列に格納する処理をしています。
②動画解析時にスライダーを移動させると、スライダーの数字に合わせて配列を読みにいってその画像を表示する
ということをやっています。

↓は①のソースコードで、リサイズしてからimageArrayという配列に格納してます。
フレーム数が大きいとメモリが足りなくなるので、start=88000、end=98000と範囲を絞っております。

### ①のソースコード
```python
# 動画ファイル(avi mp4)を読み込んで、各フレームをArrayファイルに格納する
import cv2
import sys
import numpy as np

w, h = 360, 640

start = 88000  
end = 98000  

imageArray = []
fileName = 'test.avi'
video = cv2.VideoCapture(fileName)
if not video.isOpened():
    print("Could not open video")
    sys.exit()
ok, frame = video.read()
if not ok:
    print('Cannot read video file')
    sys.exit()

for i in range(0, end):
    ok, frame = video.read()
    if(start <= i):
        if(ok):
            img_resize = cv2.resize(frame, (h, w))
            imageArray.append(img_resize)

video.release()
cv2.destroyAllWindows()
```

### 試したこと
動画を連番で画像ファイル（jpeg）などで全て保存してから、フレーム毎に画像ファイルを読み込みにいく、というやり方を試してみました。

しかし、画像ファイルを新たにつくることになるので容量が余計に増える、すべて保存するまでに時間を要する、などの課題がありまして、もっとよいやり方がないかなと思っております。

どうか宜しくお願いします。

### 補足情報（FW/ツールのバージョンなど）
参考ですが、Qiitaにこの動画解析ツールの記事を投稿してます。
[Pythonでテニスの動画解析ツールを自作してみた](https://qiita.com/otakoma/items/083ccad0c81a79bef049)

【Python】Aviutlみたいに容量の大きい動画でも、スライダー操作でサクサク画像を表示できるようにしたい

<質問本題>
ヘッダー・フッター・フローティングメニュー・サイドバーを別htmlファイルにして、変更があった場合の手間を省きたい

<条件要望等>
- サーバーに左右されない（PHPやSSIの使用可否など）
- Gulpのようにコマンドプロンプトを使わない
- iframeは使用しない方が良さそう？なので今回は除外でお願いします
- 出来るだけ導入が簡単なものでお願いします

<扱えるもの>
- html
- css
- jQuery
- Javascript


![イメージ説明](76d7c9d1011d55a8e834c88ad43f33f3.png)