OmniAICreator/Qiita-1.07M huggingface dataset:
[Swift4]スクロールビューの使い方

こんばんは、東條です。

久しぶりの投稿となりますが、
スクロールビュー使ってみたいなって人向けに簡単な使い方を書いておきます。

#1.はじめに
今回はストーリーボードは使わず、コーディングで全部やっていきます。
(コーディングでやった方がなんか安心感あっていいよね。)

#2.全体のソースコード
全体のソースコードはこんな感じになります。

```swift:ScrollView.swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //UIScrollViewのインスタンス作成
        let scrollView = UIScrollView()
        
        //scrollViewの大きさを設定。
        scrollView.frame = self.view.frame
        
        //スクロール領域の設定
        scrollView.contentSize = CGSize(width:1000, height:1000)
        
        //scrollViewをviewのSubViewとして追加
        self.view.addSubview(scrollView)
    }


}
```

これだけです。
簡単に一つずつ説明しますと、

#3.解説
##3-1.スクロールビューのインスタンス化

```swift:ScrollView.swift
        //UIScrollViewのインスタンス作成
        let scrollView = UIScrollView()
```

ここでスクロールビューのインスタンス化を行います。
部品扱う時のおまじないみたいなやつですね。
これをしないとスクロールビューを扱えません。


##3-2.スクロールビューのサイズを設定
```swift:ScrollView.swift
        //scrollViewの大きさを設定。
        scrollView.frame = self.view.frame
```
ここでスクロールビューのサイズを決めます。
全画面スクロールさせたいので、viewと同じサイズに設定しています。

##3-3.スクロールビューの範囲を設定
```swift:ScrollView.swift
        //スクロール範囲の設定
        scrollView.contentSize = CGSize(width:1000, height:1000)
```
ここでスクロールビューのスクロールする範囲を決めます。
今回は縦にも横にもスクロールさせてみたかったので、
適当に幅と高さに1000を入れています。(シミュレータはiPhone7設定)

もし縦スクロールだけを行いたい！といった場合には、

```swift:ScrollView.swift
        //スクロール領域の設定
        scrollView.contentSize = CGSize(width:self.view.frame.width, height:1000)
```

こんな感じにすることで、横には移動しなくなります。

##3-4.スクロールビューの追加
```swift:ScrollView.swift
        //scrollViewをviewのSubViewとして追加
        self.view.addSubview(scrollView)
```

最後に、ここまで設定してきたスクロールビューを
ビューに追加して、完成です。

#4.おわりに
今回紹介したものは基本的な部品の追加方法なので、
ちょっとやったことある人なら当たり前のような内容かもしれませんね。

でももしSwift初めてみたけどストーリーボードでしか部品作ったことない人とか、
そういった方のヒントとなれば嬉しいです。
NagiosでWindowsの監視

## 概要
- **Nagiosサーバー(Linux)** から **Windows Server**を監視する設定のメモ
- 構成の把握は↓の画像で。　当記事は **Nagios -> Windows Server**間の設定のみ
![nrpe-vs-nsclient.png](https://qiita-image-store.s3.amazonaws.com/0/83907/6a8bcd6b-4f6d-be72-5b1a-202d4708ef53.png)

### 手順

Naigosサーバーの設定は省略。
**check_nrpe**プラグインが使用できればよい。

#### 1.　WindowsServerにログインする
リモートデスクトップ接続は、↓を参考にさせていただきました。
https://qiita.com/nekonoprotocol/items/ea7eb537a6785c3846d0

#### 2.　InternetExplorerを開く
ファイルをダウンロード出来るように設定変更。

```
 [インターネットオプション] -> [セキュリティ]タブ -> [レベルのカスタマイズ] を開き
 [ダウンロード] の [ファイルのダウンロード] を [有効にする]。
```

#### 3.　NSClient++ のインストール
ダウンロードは↓から、バージョンは**Lastest**を選ぶ。
URL:https://www.nsclient.org/download/

インストール時の設定は必要最低限。

```
 [Generic] -> [Typical] ->
 
 IP   : 監視サーバーIP
 PASS :
 Enable Common Check plugins    : enable
 Enable NRPE Server(check_nrpe) : enable
 Secure : safe mode
 
 ->[install]
```

#### 4.　NSClient++ 設定ファイルの修正

```
ディレクトリ ： C:\Program Files\NSClient++
ファイル ： nsclient.ini
```
設定前にファイルの操作権限を変更する必要があるかもしれません。

```
[/settings/default]
allowd hosts = NagiosサーバーのIPアドレス

[/settings/NRPE/server]
verify mode = none
insecure = true
allow arguments = true
allow nasty characters= true

[/modules]
※全て enabled に変更

[/settings/external scripts]
allow nasty characters = true
```

設定ファイルを変更したのでNSClient++を再起動する必要がある。

```
Windowsメニュー検索から
  [サービス] -> [NSClient++] -> 右クリック[プロパティ] -> [ログオン]タブ
デスクトップとの対話をサービスに許可 を On にする。
  [NSClient++] まで戻り、右クリック[再起動]
```

#### 5.　ポートの解放

```
デフォルトのNRPEポート番号は5666

[windowsファイアウォール] -> [受信の規則] -> [新しい規則]
からポート番号5666を開ける。
```

#### 6.　設定確認
Nagiosサーバーから疎通確認する。

```shell
　./check_nrpe -H [WindowsServerのIPアドレス]
I (0.5.2.35 2018-11-01) seem to be doing fine...
```
【Ruby】コーディングメモ（ループ処理など）

##環境
ruby 2.4.1p111

##ループ処理(for in do end)

``` sample.rb
for i in 0..10 do
    puts "ループ変数＝#{i}"
end

#（出力結果）
ループ変数＝0
ループ変数＝1
ループ変数＝2
ループ変数＝3
ループ変数＝4
ループ変数＝5
ループ変数＝6
ループ変数＝7
ループ変数＝8
ループ変数＝9
ループ変数＝10
```

##配列ループ処理

``` sample.rb
employees = ["Yamada", "Tanaka", "Satoh"]
for emp in employees do
  print(emp + "¥n")
end

#（出力結果）
Yamada
Tanaka
Satoh
```

##ループ処理(while do end)

``` sample.rb
i = 0
while i <= 10 do
    puts "ループ変数＝#{i}"
    i+=1
end

#（出力結果）
ループ変数＝0
ループ変数＝1
ループ変数＝2
ループ変数＝3
ループ変数＝4
ループ変数＝5
ループ変数＝6
ループ変数＝7
ループ変数＝8
ループ変数＝9
ループ変数＝10
```
【Ruby】2.5.1インストールメモ(Ubuntu)

#環境
Ubuntu 16.04.2 
32bit

#Rubyのインストール

- 作業用ディレクトリを作成する

```
mkdir workdir
```

- 公式サイトからインストーラ（ソースコード）の[ruby-2.5.1.tar.gz]をダウンロードして、上記、作業用ディレクトリにコピーする

https://www.ruby-lang.org/ja/downloads/

- 解凍する

```sh
tar xvf ruby-2.5.1.tar.gz

```

- ソースコードをコンパイルしてインストール

```sh
cd ruby-2.5.1/
# インストール.先を指定
./configure --prefix=/usr/local/ruby
make
sudo make install
```

- インストールパスを環境変数PATHに設定

```
export PATH=/usr/local/ruby/bin:$PATH
```

- インストールされているか確認

```
ruby-v
```

- 結果、以下となり正常にrubyがインストールされている事を確認できました。

```
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
```
【Ruby】コーディングメモ（日付の取得、編集など）

##環境
Ubuntu 16.04.2 
32bit

##現在時刻の取得

``` date.rb
nowDateTime = Time.now
```

##タイムゾーンをUTCとし、現在の年月日時分秒を出力する

``` date.rb
nowDateTime = Time.now
puts "現在の年月日時分秒（UTC）：#{nowDateTime.utc}"
```

###出力結果

``` 
現在の年月日時分秒（UTC）：2018-09-24 09:56:31 UTC
``` 

##タイムゾーンの時刻を設定し、年月日時分秒を出力する
- 協定世界時との 時差を、秒を単位とする整数か、"+HH:MM" "-HH:MM" 形式 の文字列で指定
- 未指定の場合はシステムロケール時刻となる。今回はロケールを明示的に'Asia/Tokyo'(+0900)に設定

``` date.rb
nowDateTime = Time.now
puts "現在の年月日時分秒（Asia/Tokyo）：#{nowDateTime.localtime("+09:00")}"
```

###出力結果

``` 
現在の年月日時分秒（Asia/Tokyo）：2018-09-24 18:56:31 +0900
``` 

##年の出力

``` date.rb
nowDateTime = Time.now
puts "現在の年：#{nowDateTime.year}"
```


###出力結果

``` 
現在の年：2018
``` 

##月の出力

``` date.rb
nowDateTime = Time.now
puts "現在の月：#{nowDateTime.month}"
# この表記も可能→puts nowDateTime.mon
```

###出力結果

``` 
現在の月：9
``` 

##日の出力

``` date.rb
nowDateTime = Time.now
puts "現在の日：#{nowDateTime.day}"
# この表記も可能→puts nowDateTime.mday
```

###出力結果

``` 
現在の日：24
``` 

##時の出力

``` date.rb
nowDateTime = Time.now
puts "現在の時：#{nowDateTime.hour}"
```

###出力結果

``` 
現在の時：18
``` 

##分の出力

``` date.rb
nowDateTime = Time.now
puts "現在の分：#{nowDateTime.min}"
```

###出力結果

``` 
現在の分：56
``` 

##秒の出力

``` date.rb
nowDateTime = Time.now
puts "現在の秒：#{ nowDateTime.sec}"
```

###出力結果

``` 
現在の秒：31
``` 

##昨日の日付を取得して出力

``` date.rb
today = Date.today
puts "昨日：#{ today - 1}"
```

###出力結果

``` 
昨日：2018-09-23
``` 

##明日の日付を取得して出力

``` date.rb
today = Date.today
puts "明日：#{ today + 1}"
```

###出力結果

``` 
明日：2018-09-25
``` 


##年月日フォーマット
- フォーマットのパラメータの詳細は以下参照下さい

http://pubs.opengroup.org/onlinepubs/009695399/functions/strptime.html

``` date.rb
nowDateTime = Time.now
puts nowDateTime.strftime("%Y年%m月%d日 %H時%M分%S秒")
```

###出力結果

``` 
2018年09月24日 18時56分31秒
``` 

##曜日判定

``` date.rb
nowDateTime = Time.now

#日曜日である場合に true を返します。
puts "日曜日であるか？：#{ nowDateTime.sunday?}"

#月曜日である場合に true を返します。
puts "月曜日であるか？：#{ nowDateTime.monday?}"

#火曜日である場合に true を返します。
puts "火曜日であるか？：#{ nowDateTime.tuesday?}"

#水曜日である場合に true を返します。
puts "水曜日であるか？：#{ nowDateTime.wednesday?}"

#木曜日である場合に true を返します。
puts "木曜日であるか？：#{ nowDateTime.thursday?}"

#金曜日である場合に true を返します。
puts "金曜日であるか？：#{ nowDateTime.friday?}"

#土曜日である場合に true を返します。
puts "土曜日であるか？：#{ nowDateTime.saturday?}"
```

###出力結果

```
日曜日であるか？：false
月曜日であるか？：true
火曜日であるか？：false
水曜日であるか？：false
木曜日であるか？：false
金曜日であるか？：false
土曜日であるか？：false
```
##1月1日を1とした通算日(1から366まで)

``` date.rb
puts "1月1日を1とした通算日：#{nowDateTime.yday}"
```

###出力結果

```
1月1日を1とした通算日：267
```

##起算時からの経過秒数
- 起算時とは協定世界時(UTC、もしくはその旧称から GMT とも表記されます) の 1970年1月1日午前0時のこと

``` date.rb
nowDateTime = Time.now
puts nowDateTime.tv_sec 
``` 

###出力結果

```
1537782991
```

##起算時から任意の秒数が経過後の時刻を算出する

``` date.rb
puts Time.at(2000000000) 
``` 

###出力結果

```
2033-05-18 03:33:20 +0000
```

##参照
https://docs.ruby-lang.org/ja/latest/class/Time.html
任意の正方行列の２乗の固有値と固有ベクトル

# 概要
以下の事についてよく忘れてしまうのでメモしておきます．

>任意の正方行列 $A$ の固有値を $\lambda$，固有ベクトルを $\boldsymbol{x}$ とすると，
$A$ の２乗 $A^2$ の固有ベクトルは $\lambda^2$, 固有ベクトルは $\boldsymbol{x}$ である．

# 証明
仮定より，
$$
A \boldsymbol{x} = \lambda \boldsymbol{x}
$$
である．ここで両辺に左から $A$ をかけ，整理すると，
$$
\begin{align}
AA \boldsymbol{x} &= A\lambda \boldsymbol{x} \\\
A^2 \boldsymbol{x} &= \lambda A \boldsymbol{x} \\\
A^2 \boldsymbol{x} &= \lambda (\lambda \boldsymbol{x}) \\\
A^2 \boldsymbol{x} &= \lambda^2 \boldsymbol{x} \tag{1}
\end{align}
$$
式(1) に注目すると，固有値，固有ベクトルの定義から $\boldsymbol{x}$ は$A^2$の固有ベクトルに， $\lambda^2$ は$A^2$の固有値となっていることが分かる．よって，

任意の正方行列 $A$ の固有値を $\lambda$，固有ベクトルを $\boldsymbol{x}$ とすると， $A$ の２乗 $A^2$ の固有ベクトルは $\lambda^2$, 固有ベクトルは $\boldsymbol{x}$ であると言える．

# 一般化
２乗だけでなく，一般化した $n$ 乗についても言うことができます．
>任意の正方行列 $A$ の固有値を $\lambda$，固有ベクトルを $\boldsymbol{x}$ とすると，
$A$ の $n$ 乗 $A^n$ ($n=2, 3, \cdots$) の固有ベクトルは $\lambda^n$, 固有ベクトルは $\boldsymbol{x}$ である． 

数学的帰納法より示すことができます．
VSCodeでGitレポジトリの初期化メニューが表示されない（Gitが未インストール）

# Gitがインストールされていることを確認しましょう

VSCodeをインストール後に起動した際、Gitのインストールも促されるようです。
しかし私の場合、インストール後に以後表示しない旨を選択したためか、下図右上のレポジトリの初期化ボタンが表示されませんでした。
（インストール後一月以上経過していたため記憶なし）
なぜ表示されないのか調べたのですが、これについての解が見つけられず。
VSCodeとGitのインストールの経過を載せている記事見て、まさかと思ってCortanaさんにGitを調べてもらったらない・・・
VS2017をインストール済みであったため、Gitはインストール済みの認識でしたorz
以後表示しないを選択したら徹底的にやるのね・・・

ということで、結論としてはGitがインストールされているか確認しましょう(;^_^A
インストール済みであれば、下図右上にメニューが表示されるようになります＼(^o^)／


![VSCodeでGitレポジトリ初期化.PNG](https://qiita-image-store.s3.amazonaws.com/0/310578/c944f819-6a21-d6d0-df9a-80139096ebca.png)
リフレクションを利用した初期化処理を共通にしたい

##動機
DBのテーブル用にクラスをデザインしたらDDLなどを自動生成するようにしたかった


##できたもの
```C#
    public abstract class BaseClass
    {
        //派生クラスのプロパティの中身を格納するDictionary
        protected static Dictionary<Type, string> dic = new Dictionary<Type, string>();

        //staticコンストラクタ
        static BaseClass()
        {
            //サブクラスをまとめて初期化
            var subClasses = AppDomain.CurrentDomain.GetAssemblies().SelectMany(s => s.GetTypes()).Where(t => t.IsSubclassOf(typeof(BaseClass)));

            foreach(var t in subClasses)
            {
                //リフレクションを利用した共通の初期化処理
                dic.Add(t, t.Name);
            }

        }

        //本当はここに書きたい
        //public static string Name { get { return dic["ここの引数が見つからない"]; } }

    }

    public class ClassA : BaseClass
    {
        //ここに書きたくない
        public static string Name { get { return dic[System.Reflection.MethodInfo.GetCurrentMethod().DeclaringType]; } }
    }

    public class ClassB : ClassA
    {
        //多重継承するとnewが必要になる
        public new static string Name { get { return dic[System.Reflection.MethodInfo.GetCurrentMethod().DeclaringType]; } }
    }
```


##感想
うまく行かなくて悲しい


##追記
下のような場合、コンパイルすると自動でB.GetInt()はA.GetInt()に変換されるらしい。
参考→[stackoverflow](https://stackoverflow.com/questions/2081612/net-determine-the-type-of-this-class-in-its-static-method/5012880#comment2012858_2081642)
詰んでた(´・ω・`)

```C#
class A
{
  public static int GetInt(){}

}
class B : A {}
```

##とりあえず
上のstackoverflowの質問にも幾つか興味深い回答があったけど、それぞれ欠点があったので見送り
派生クラスを綺麗にするために、プロパティという形を諦める

```C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;

namespace Namespace
{

    public abstract class BaseClass
    {
        //共通プロパティの中身を格納するDictionary
        public static Dictionary<Type, string> dic = new Dictionary<Type, string>();

        //staticコンストラクタ
        static BaseClass()
        {
            //サブクラスをまとめて初期化
            var subClasses = Assembly.GetAssembly(typeof(BaseClass)).GetTypes().Where(t => t.IsSubclassOf(typeof(BaseClass)));

            foreach (var t in subClasses)
            {
                //リフレクションを利用した何らかの処理の代わり
                var value = t.Name + "ですよ";

                //格納
                dic.Add(t, value);
            }

        }

        public static string GetName<T>() where T : BaseClass
        {
            if (typeof(T) == typeof(BaseClass)) { throw new ArgumentException("BaseClassは入れないで"); }
            return dic[typeof(T)];
        }
    }

    public class ClassA : BaseClass
    {
        //派生クラスは綺麗にできた(｀・ω・´)
    }

    public class ClassB : ClassA
    {
        //派生クラスは綺麗にできた(｀・ω・´)
    }

    static class Program
    {
        /// <summary>
        /// アプリケーションのメイン エントリ ポイントです。
        /// </summary>
        [STAThread]
        static void Main()
        {
            System.Diagnostics.Debug.WriteLine(BaseClass.GetName<ClassA>());//ClassAですよ
            System.Diagnostics.Debug.WriteLine(BaseClass.GetName<ClassB>());//ClassBですよ
            System.Diagnostics.Debug.WriteLine(BaseClass.GetName<BaseClass>());//ArgumentException(´・ω・`)
        }
    }
}

```
参考になったURL保管用スペース（自分用）

#振り返った時の為に、参考になったURLを羅列（都度更新）

Biopythonのインストール
https://qiita.com/hukuhuku11111a1/items/c6f995fb993ec51a6ec3

BiopythonでFASTAファイル操作
https://qiita.com/sato32ha6/items/6b762b0d0314a5db7dc3
ソフトウェアにおける不確定性原理

###不確定性原理
観測すると観測しているものに影響が出て正しい結果にならない原理である。
Wikipediaでは、観察者効果というのが正しいらしいが、ここでは原理の方を使う。

###デバッグだけ動作しない問題
デバッグだけにおいて、結果が正しくなくなることがある。
正しくないというのは他の言葉で言えば、ソフトは正しい動作をするがデバッグ中は正しく動作しないという意味である。
そしてそれを確認するには、ソフトでなく、外部から観測するしかない。
RTOSだけでなく、通信プロトコルなどにおいて、タイミングが定義されている場合、デバッガを動作されるだけで、タイミングが乱され、間違っていないプログラムが動作しないと言う結果になってしまう。
printfを入れただけで、動作しなくなってしまう場合もある。
まともなOSもない組み込み系の場合、とてもデバッグがしにくい。

###バグがなくても動作しない可能性は沢山ある
上記では一例を挙げたが、他にも動作しないことは沢山ある。
計算機を深く理解しないと、それらの問題に対応できない。
書いたプログラムだけを見ていたら、バグはないので絶対に対応策にたどり着けないのである。
RTOS、マルチスレッド、タスク、優先度、プロトコル、全部を見て何が悪いか推測するしかない。
Amazon LinuxのCyberduck接続方法について

会社でAmazon Linux（vagrant）を使った際、CyberduckのSFTP接続で少しつまずいたので、備忘録がてら接続方法を以下にまとめておきます。

##問題

自宅でCentOS7（vagrant）を使って接続した際、

サーバー：192.168.33.10
ユーザー名：vagrant
パスワード：vagrant
SSH Private Key：なし

で接続できたのに、Amazon Linuxで接続する場合に上手くいかない。

##解決

Vagrantfileがあるディレクトリで、vagrant ssh-configを入力。
すると各情報が表示される。

```
HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile /Users/itanikazuhiko/vagrant_centos7/.vagrant/machines/default/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL
```

必要な情報は、「HostName」、「User」、「Port」、「IdentityFile」の4つ。
それらの情報をCyberduckの「新規接続」画面で入力。接続方法は「SFTP」を選択。
※パスワードは空欄でOK。

<img width="595" alt="Cyberduck.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/310577/26b5694d-8fd0-eb8c-7bbc-e4cd2d484a34.jpeg">

「SSH Private Key」は「選択」をクリックするとファイル選択画面になるので、「command + shift + g」で検索バーを表示させ、IdentityFileのパスをコピペして入力。

これで接続できました。
sqlite3起因でrails server失敗した場合

Ruby on Railsの初心者です。
```
$ rails server
```
環境構築をしていて、サーバー起動に失敗TT
↓のエラーに引っかかりました。

```
Traceback (most recent call last):
        43: from bin/rails:4:in `<main>'
・
・
・
         1: from C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/activesupport-5.2.1/lib/active_support/dependencies.rb:287:in `block in require'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/bootsnap-1.3.2/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:32:in `require': cannot load such file -- sqlite3/sqlite3_native (LoadError)
```

半日苦戦してようやく解決、
どうやら新しいバージョンのRubyがリリースされたけれど、sqlite3の方がそのバージョンに対応していないときに起こります。
参考：https://teratail.com/questions/44920

```
$ gem uninstall -a sqlite3
$ gem install sqlite3 --platform=ruby
```
-------------------------------------------
再び入力
```
$ rails server
```

http://localhost:3000/
にアクセス
![Yay!You're on Rails!.PNG](https://qiita-image-store.s3.amazonaws.com/0/229719/2c89308c-85ad-ebcc-bfaa-e4b191e8a3a4.png)



成功です:heart_eyes:
BeautifulSoupを使ったxml編集あれこれ

# はじめに
BeautifulSoupでxmlの要素取得についてはググればいくらでも出てくるが、それを使ってxmlの編集なんかはあまり出てこず。。
今回、2つのxmlを使って要素の挿入を行ったので備忘録として残しておきます。
(今後他にも編集が必要になれば都度更新していきます)

# やりたいこと
以下の2つのxmlを使う。sample2.xmlのfoodタグを、sample1.xmlのfoodタグとgroupタグの間に挿入する

```xml:sample1.xml
<?xml version="1.0" encoding="UTF-8" ?>
<foods>
  <food id="123">
    <name>バナナ</name>
    <color>黄色</color>
  </food>

  <group>
    <name>果物</name>
    <color>なし</color>
  </group>
</foods>
```

```xml:sample2.xml
<?xml version="1.0" encoding="UTF-8" ?>
<foods>
  <food id="456">
    <name>ぶどう</name>
    <color>紫色</color>
  </food>

  <group>
    <name>果物</name>
    <color>なし</color>
  </group>
</foods>
```

# やったこと
簡単にできた

```python:test.py
from bs4 import BeautifulSoup

# ファイルの読み込み
f1 = open('sample1.xml','r')
soup1 = BeautifulSoup(f1, 'html.parser')
f1.close()

f2 = open('sample2.xml','r')
soup2 = BeautifulSoup(f2, 'html.parser')
f2.close()

# sample2.xmlから<food>タグを取得
new_tag = soup2.food

# sample1の<group>タグの上に挿入
soup1.group.insert_before(new_tag)
```

アウトプット

```xml:output.xml
<?xml version="1.0" encoding="UTF-8" ?>
<foods>
 <food id="123">
  <name>バナナ</name>
  <color>黄色</color>
 </food>
 <food id="456">
  <name>ぶどう</name>
  <color>紫色</color>
 </food>
 <group>
  <name>果物</name>
  <color>なし</color>
 </group>
</foods>
```
leafletを鍛える。その17

#概要

leafletを鍛えてみた。
マーカーをアニメーションしてみた。

#写真

![](http://jsdo-static-contents.s3.amazonaws.com/images/capture/u/g/u/ugug.jpg?t=1541319020)

#サンプルコード

```
var map = L.map('map').setView([37.913961, 140.142267], 17);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: 'OSM'
}).addTo(map);
var line = L.polyline([[37.913961, 140.142267], [37.913961, 140.142267], [37.913106, 140.142664], [37.912716, 140.141612]]);
map.addLayer(line);
var animatedMarker = L.animatedMarker(line.getLatLngs());
map.addLayer(animatedMarker);
```

#成果物

https://embed.plnkr.co/PScRoIAbCoa8cczz/


以上。
boostへの道

boostを使うと便利そう。
https://www.boost.org

何を使うとよくって、何はまだ使わない方がいいかを確認するために、使ってみる記録。

Macintoshではhomebrewが入って入れば導入は簡単。

```
$ brew install boost
```



Boost を用いた ISO 8601（RFC 3339）フォーマットの日付出力
https://qiita.com/satosystems/items/662f11c31ccc7d43ae1e


[Boost] Boost.SIMDを使ってみる(MKLとの比較ベンチもあるよ)
https://qiita.com/kktk-KO/items/182ced5606da535e8b33

[Boost] static_vectorとsmall_vector
https://qiita.com/shohirose/items/54d75b12abd452ee2786

boost.asioでSSL
https://qiita.com/YukiMiyatake/items/10bd55bbbc0e93e9db56

boost::regexの怪
https://qiita.com/COHENZ/items/be27b4190682e8df53a3

boost::multi_array で快適多次元配列生活
https://qiita.com/StoneDot/items/45f3288ae464ac6567f7

【C++】boost::program_options でerrorをcatchする時にオプション名を表示させる
https://qiita.com/RyuichiroNakato/items/005b5c155293f42f6789

#文書履歴(document history)
ver. 0.10 初稿 20181104 夕
ver. 0.11 URL追記 20181104 夜
jQueryについて殴り書きメモ

#ライブラリについて
一から作るの大変だが、別プロジェクで同じような機能を使いたい場合がある。
そんな時に、よく使用する機能や効果（それらを実現するプログラム）をあらかじめ作成しておき、再利用できる形にまとめておく。
それを***ライブラリ***っていう。
（Rubyではライブラリ＝Gem）

#ライブラリのメリット
そうした他者が作成したライブラリであっても、自分のアプリに導入すれば、同じプログラムを作ることなく
そのライブラリの機能を即座に使用することができるので、作業時間を大幅に効率化できる。

なお***jQuery***はの中身は「JavaScriptで記述された、様々な機能や処理を実現するための膨大なコード群」である。



#プラグインってなんぞや
***本体のソフトウェアにオプションとして追加するためのソフトウェア***
目的は機能の拡張。
ライブラリだけでは実現できない機能を実現するためのプログラムのまとまり。
コンセントにプラグを差し込むように、必要な時に必要なだけ機能を追加できる。

###ライブラリ、プラグインまとめ
***ライブラリ***：Webページに実装できる「機能」や「効果」などをひとまとめにしたプログラムのまとまり
***プラグイン***：ライブラリの「機能」や「効果」を拡張するために追加するプログラムのこと。ライブラリをベースにして、ライブラリにはない機能を付け加えたい場合、プラグインを追加する。プラグインはライブラリがなければ利用できない。


#jQueryの特徴と広く利用される理由
・CSSの書式を応用できて、DOM操作が簡単
　＊HTML要素を操作したり、書き換えたりする作業を***DOM操作***といいます。
　　jQueryはこのDOM操作が簡単にできるように作られている。

・ドキュメントが豊富なので、検索すればすぐ欲しい情報が出てくる。
・プラグインが豊富
・コード量を少なく抑える。
・jQueryはMITライセンスのためフリーで利用できる。
　＊MITライセンスとは誰でも無償かつ無制限にソフトウェアを扱ってよいとするオープンソースの代表的なライセンスの１つ。


#jQueryを使用するには？
jQueryはJSのライブラリなので、jQueryのファイル（JSのファイル）を用意し、
　使用するHTML内で読み込むだけで使用できるようになります。




###コード例文

```
$(function(){　　　　　　　　　　　←$はjQueryのものであるという識別子
  $('#typo').css('color', '#ebc000');　  ←$('#typo’)という命令の対象に、css()メソッドで２つの引数を与えている。
});
```

```$()``` という関数の中に('#typo’)というセレクタの引数を渡している。

```$()``` は「HTML要素を元にして、jQuery独自の要素を生成する」という機能を持っている***関数***。HTMLの要素を指定する方法として、CSSのセレクタを指定できる。
この$()関数によってjQueryの形式に交換された要素のことを「jQueryオブジェクト」と呼びます。

$()は「***関数***」といい、.css()は「***メソッド***」というが、ドットがついているものはメソッド、ついていないのは関数と理解しておけばいい。



#jQuery処理の中れ
１：$()関数で命令の対象となるHTML要素をjQueryオブジェクトに交換
２：そのjQueryオブジェクトに対してメソッドを呼び出して変更を加える

この流れはどのメソッドを使用しても変わらない。


#まとめ
①$()関数でHTML要素（セレクタ）を指定し、命令の対象となるjQueryオブジェクトにする。
②そのjQueryオブジェクトに対してjQueryメソッドでを呼び出して、変更を加える。
③.ドットはjQueryオブジェクトとjQueryメソッドをつなぐ役割がある。
曜日指定でLogic Appsを実行する

#概要
以前の記事『[Logic Appsを定時実行させる](https://qiita.com/yossihard/items/586c4112b057b58fbc84)』で作成した処理、
しゃちょーから日曜は処理させなくていいからと言われた・・・。
ということで、Logic Appsを曜日指定で実行するよう変更した際の備忘録

#トリガーの設定
1. 繰り返しトリガーの頻度設定を「週」に設定する。
![曜日指定で実行.PNG](https://qiita-image-store.s3.amazonaws.com/0/146789/a6bdaa14-ee22-950f-025f-3e408b807349.png)

2. 詳細オプションの設定曜日に実行したい曜日を設定する。
![曜日指定で実行2.PNG](https://qiita-image-store.s3.amazonaws.com/0/146789/54e439ec-da9e-7fd8-6c4f-7b4691ca5b3c.png)


ちなみに、間隔を「2」にすると、2週毎に（つまり隔週で）指定した曜日に
アクションが実行されるとのこと。

繰り返しトリガーに関する公式説明は、以下のページに記載されています。
→[定期的に実行されるタスクとワークフローを Azure Logic Apps で作成、実行する](https://docs.microsoft.com/ja-jp/azure/connectors/connectors-native-recurrence)
コマンドラインでPNGやJPEGのDPI(PPI)を変える方法

# コマンドラインでPNGやJPEGのDPI(PPI)を変える方法

画面をスクリーンキャプチャしたものはMacだと144dpiや72dpi、Windowsだと96dpiだったりします。これを印刷用の300dpiにするにはMacの場合、ImageMagickを使うのが一般的ですが、脆弱性の問題が色々あるのでインストールしたくありません。それ以外だと、プレビューを使ってもできますが、GUIなのでファイルが大量にあるときなど面倒です。

PythonのPillowを使ってコマンドラインで変換できるようにしました。

```python:dpiconv.py
#!/usr/local/bin/python3
from PIL import Image

if len(sys.argv) != 5 or sys.argv[1] != "-d" or int(sys.argv[2]) == 0:
    print("usage: %s -d <dpi> input_pic output_pic" % sys.argv[0])
    quit(1)

_dpi = int(sys.argv[2])

im = Image.open(sys.argv[3])
im.save(sys.argv[4], dpi = (_dpi, _dpi))
```

Pillowのインストールはこちらを参考にしてください。
https://note.nkmk.me/python-pillow-basic/
欠損値の処理について

kaggleの[Data Preparation & Exploration](https://www.kaggle.com/bertcarremans/data-preparation-exploration/notebook)からの気づき

## 特徴量の扱い
Pandasを使って特徴量をあらかじめそれぞれ定義している。
訓練データをtrainとしているとき、すべてのデータを以下のように処理することで、それぞれに固有の特徴を可視化することができる。

```python

data = [] #データの入れ子
for f in train.columns:　#特徴量の名前をfに入れている
    # Defining the role
    if f == 'target':　#特徴量の名前がtargetなら、役割（role)をtargetにする
        role = 'target'
    elif f == 'id':　　#idならidにする
        role = 'id'
    else:
        role = 'input'　#上記以外なら、すべて訓練するべきデータ（input）
         
    # Defining the level #roleごとに数値に意味を与えている。二値、カテゴリデータ、離散値、連続値。
    if 'bin' in f or f == 'target':
        level = 'binary'
    elif 'cat' in f or f == 'id':
        level = 'nominal'
    elif train[f].dtype == float:
        level = 'interval'
    elif train[f].dtype == int:
        level = 'ordinal'
        
    # Initialize keep to True for all variables except for id
　　#keep がTrueの特徴量をいじる。
　　#data[(data.role == "id") & (data.keep)]とすれば、data.keepがTrueなら操作できるし、Falseなら操作を免れることができる。
    keep = True
    if f == 'id':
        keep = False
    
    # Defining the data type 
    dtype = train[f].dtype
    
    # Creating a Dict that contains all the metadata for the variable
    f_dict = {
        'varname': f,
        'role': role,
        'level': level,
        'keep': keep,
        'dtype': dtype
    }
    data.append(f_dict)
    
meta = pd.DataFrame(data, columns=['varname', 'role', 'level', 'keep', 'dtype'])
meta.set_index('varname', inplace=True)
```
##欠損値の処理
欠損値の処理は基本的に除去するか、補完するか（たぶん他にもあるけど）。
欠損を除去するのはpd.drop()を使えばいい。欠損値がやたら含まれている特徴量があれば、まるごと除去すればいい。
データを完全なものとして扱おうとしてすべての欠損値を除去してしまうと、使えるデータがなくなってしまう。多すぎる欠損値はさっさと列ごと（pd.drop(axis=1))で削除する。

補完の場合は二択。
1.平均値（特徴量が連続値の場合）
2.最頻値（特徴量が離散値の場合）

これを実行するのに便利なのが、

```python

from sklearn.preprocessing import Imputer

#missing_valueを変更すること。Nanなど。
#平均値
mean_imp = Imputer(missing_values=-1, strategy='mean', axis=0)

#最頻値
mode_imp = Imputer(missing_values=-1, strategy='most_frequent', axis=0)

#適用する
#ravel()を使うと、配列を一元化する。元のデータを破壊するので、pamdasのデータも変更されている？
data["columns_name"] = mean_imp.fit_transform(data[["columns_name"]]).ravel()
data["columns_name"] = mode_imp.fit_transform(data[["columns_name"]]).ravel()
```
Imputerは欠損値を処理する。これを使うと簡単に色々な処理が実行できる。
gitクライアントを便利にする方法

#GItクライアントを便利にする方法
以下のことを実現します。
**Gitコマンドの自動補完**
**Gitのプロンプトの表示を変更**

Windowsの場合、デフォルトでは２行表示されているものが１行に出来たり、素敵。
![20170921125254.png](https://qiita-image-store.s3.amazonaws.com/0/192134/17d0ba53-71d0-2d3c-d87b-31400cbdd105.png)
↓
![20170921125506.png](https://qiita-image-store.s3.amazonaws.com/0/192134/2d12459d-8538-79c4-d624-a6071acc5b64.png)

##やり方
vi ~/.bashrc

```bash:.bashrc
source .git-completion.bash
source .git-prompt.sh

# プロンプトに各種情報を表示
GIT_PS1_SHOWDIRTYSTATE=1
GIT_PS1_SHOWUPSTREAM=1
GIT_PS1_SHOWUNTRACKEDFILES=
GIT_PS1_SHOWSTASHSTATE=1

############### ターミナルのコマンド受付状態の表示変更
# \u ユーザ名
# \h ホスト名
# \W カレントディレクトリ
# \w カレントディレクトリのパス
# \n 改行
# \d 日付
# \[ 表示させない文字列の開始
# \] 表示させない文字列の終了
# \$ $
export PS1='\[\033[1;32m\]\u\[\033[00m\]:\[\033[1;34m\]\w\[\033[1;31m\]$(__git_ps1)\[\033[00m\] \$ '
#export PS1='\[\033[m\]\[\033[37;1m\]\W\[\033[m\]\[\033[1;33m\]$(__git_ps1)\[\033[00m\]\$ '  #コンパクト
##############

```
https://gist.github.com/ryokwkm/2f2e77d607f536445ab53e180a2a1655

設定ファイルはこれでOK
後は、最初の２行で読み込んでいるファイルをダウンロードしましょう。
.git-completion.bash
.git-prompt.sh


```bash:install
#ダウンロード
wget https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash -O ~/.git-completion.bash
wget https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh -O ~/.git-prompt.sh
#macの場合、パーミッションを変えるのを忘れずに
chmod a+x ~/.git-completion.bash
chmod a+x ~/.git-prompt.sh
```


・Macでこれだけだと読み込まれない場合、.bash_profileファイルに以下のコードが必要。
存在しない場合は新規作成する。
Mac OS Xはデフォルトで.bashrcを読み込まないらしい

```bash:~/.bash_profile
if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi
```

##PS1の設定 解説
bashには、プロンプトを制御するために「PS1」という環境変数が使用されている。
このPS1変数は、exportコマンドを使いさまざまな特殊文字コードを利用すれば、表示形式を変更することが可能

**GIT_PS1_SHOWUPSTREAM**
現在のブランチがupstreamより進んでいるとき`>`
遅れているとき`<`
遅れてるけど独自の変更もあるとき`<>`を表示

**GIT_PS1_SHOWUNTRACKEDFILES**
addされてない新規ファイルがあるとき`%`を表示

**GIT_PS1_SHOWSTASHSTATE**
stashになにか入っている(stashed)とき`$`を表示

**GIT_PS1_SHOWDIRTYSTATE**
addされてない変更(unstaged)があったとき`*`
addされているがcommitされていない変更(staged)があったとき`+`を表示
tmuxのsynchronize-panesをtoggle化する方法

# モチベーション

タイトルの通り、`synchronize-panes`をキーバインドひとつで切り替える方法が見当たらなかったので書きました。

# 環境
- tmux 2.8
- Ubuntu 18.04

# 19/2/4追記

@umesoya様にコメントの通り、

> setw synchronize-panes

でトグルできちゃいますので、表示メッセージにも対応できるようにする場合は

```
bind a setw synchronize-panes \; display "synchronize-panes #{?pane_synchronized,on,off}"
```

で完了です。

ものすごくすっきりですね！

@umesoya様、ありがとうございました。

とりあえず以下は非効率な内容ですが、いちおうそのままにして残しておきます。

（追記終わり）

- - -

# 本題（いまとなっては昔の話）

tmuxを使うなら当然複数のペインを使うことになると思います。

そうすると面倒なのがディレクトリ移動。全部のペインでcdコマンドを打っていくのが大変で、「一発で全部移動できないのか！」と検索することになります。

そうすると出てくるのがやはり`synchronize-panes`で、Prefixキーを入れた後に

```
:set-window-option synchronize-panes on
```

と入力すれば全部のペインの入力が同期化するので、いちいちひとつずつのペインにcdコマンドを入力するような不毛な作業もなくなります。

問題はこのコマンドがかなり長いことで、ほとんどのひとが.tmux.confに何らかのキーバインドを割り当てる方向に進むと思います。

ところが調べてみると↓のように

```conf:~/.tmux.conf
bind a setw synchronize-panes on
bind b setw synchronize-panes off
```

複数のキーを割り当ててOnOffを実現させる、といった情報しかなく、これで問題なければいいのですが、やはりひとつのキーでトグル可したほうが利便性も高く、キーも消費しないので安心安全なのは言うまでもありません。

というわけで試行錯誤の結果、↓のようになりました。

```conf:~/.tmux.conf
bind a \
  if-shell "tmux show-window-options synchronize-panes | grep off" \
  "setw synchronize-panes on" \
  "setw synchronize-panes off" \;\
  display "synchronize-panes #{?pane_synchronized,on,off}"
```

これで、Prefix+aでsynchronize-panesをトグル可し、かつ切り替えの時にステータスラインにメッセージを表示できるようになりました。

なかなか癖の強い機能ですが、個人的にはこの設定でわりと利便性が上がったかな、と思います。
Railsのテーブル構成を見る

[annotate](https://github.com/ctran/annotate_models)というgemを使いました。

## いつ、どうして使ったか
保守されていないアプリケーションの機能改善などでエンティティの定義を知りたい時にクライアントツールを使って確認するのが大変だった。

## 導入方法
Readmeに記載がある通りにGemfileに追記。

```ruby:Gemfile
group :development do
  gem 'annotate'
end
```

### migration時に自動で実行する
`rails g annotate:install` を実行すると `lib/tasks/auto_annotate_models.rake` というrakeタスクが生成され、 migration時に実行されるようになる。

### その他の設定
ファイルの最下部にアノテーションしたいので設定を before　から after　に変更

```ruby:lib/tasks/auto_annotate_models.rake
      'position_in_routes'        => 'after',
      'position_in_class'         => 'after',
      'position_in_test'          => 'after',
      'position_in_fixture'       => 'after',
      'position_in_factory'       => 'after',
      'position_in_serializer'    => 'after',
```

## 補足
ファイルに不要な記述が増えるのでmigrationの実行が少しだけ遅くなる、ファイルの容量が大きくなります。
JUCEチュートリアルを始めたての人向けに役立つコードスニペット

# JUCEチュートリアル

JUCEは機能が豊富な分、チュートリアルが提供されています。本記事の執筆時点で62個のチュートリアルが用意されていますが、これでも全てのクラスの使い方が網羅されているわけではありません。
チュートリアルに付属のプロジェクトファイルPIP形式、ZIP形式で提供されていますが、個々の開発環境についてまでは触れられていないため、開発環境によっては期待通りに動いてくれないケースに遭遇することがあります。
本記事では、そのようなトラブルの一例について解決方法を紹介します。

https://juce.com/learn/tutorials
 
![JUCE tutorials.PNG](https://qiita-image-store.s3.amazonaws.com/0/93566/18959c66-772b-2d16-813f-7132e6bee5e2.png)


# 音が出ない場合

原因としては、JUCEアプリケーションにおけるオーディオの出力先のデバイスが設定されていないことが挙げられます。特にプロジェクトを新規作成したときなどは、参照すべき設定値などを取ることができず、オーディオデバイスの設定が存在しないせいで、出力自体が無効化されているケースに遭遇します。

以下に、JUCEアプリケーションでのオーディオデバイス設定パネルを表示するためのコードスニペットを示します。

#### オーディオデバイス設定パネルを表示するコードスニペット

```
void showDeviceSetting()
{
	AudioDeviceSelectorComponent selector(deviceManager,
		0, 256,
		0, 256,
		true, true,
		true, false);
	selector.setSize(400, 600);

	DialogWindow::LaunchOptions dialog;
	dialog.content.setNonOwned(&selector);
	dialog.dialogTitle = "Audio/MIDI Device Settings";
	dialog.componentToCentreAround = this;
	dialog.dialogBackgroundColour = getLookAndFeel().findColour(ResizableWindow::backgroundColourId);
	dialog.escapeKeyTriggersCloseButton = true;
	dialog.useNativeTitleBar = false;
	dialog.resizable = false;
	dialog.useBottomRightCornerResizer = false;
	dialog.runModal();
}

```


この関数をメインのコンポーネントのコンストラクタ内で呼び出すようにしましょう。

```
 MainContentComponent()
        :   state (Stopped)
    {
        ~中略~
        setAudioChannels (2, 2);
        startTimer (20);

        showDeviceSetting();

    }
```

showDeviceSetting関数が呼び出されると、以下のパネルが表示されます。

![AMPanel.PNG](https://qiita-image-store.s3.amazonaws.com/0/93566/df0e558d-823b-08a0-0e2e-b91fc1d550ff.png)


実行環境に合わせてオーディオデバイスの設定を変更しましょう。

![AMPanel2.PNG](https://qiita-image-store.s3.amazonaws.com/0/93566/4bb5d43f-6e44-4181-9592-d25d2414fa13.png)
cmdでcd desktopが効かなくなってしまった時の対処法

今回はcmdでcdコマンドが異常な挙動が発生したので備忘録として共有します！

##エラー内容
 the system cannot find the path specified

## 早速結論 原因はOneDriveにあった。
原因はOneDriveのデスクトップ共有機能にあった。
そもそもcdというコマンドは作業ディレクトリを移動するために使われるものである。
よってこのコマンドに関するエラーはディレクトリに関係するものだと考えられる。

## 本当にディレクトリが変わっているか確認してみる。
確認方法を箇条書きで紹介します！

1:File Explorerを開く。
2:Desktopを右クリック
3:Desktop Propertiesを開く。
4:Locationを確認する。
5:OneDriveという記載があったらアウト。
※表記が英語の場合。

##肝心な直し方。
直し方は簡単でOneDriveの共有設定にて、Desktopの共有を外せば完了です。

1:OneDriveの設定画面を開く。
2:フォルダー選択をクリック
3:Desktopのチェックマークを外す。

完了！！

これで、Locationを再確認するとしっかりと治っています。
また、cmdでコマンドを実行しても作業ディレクトリを移動できます。
vagrant起動後にTeratermでSSHアクセスしたい場合

vagrant起動後に「vagrant ssh」でやってたけどTeratermでアクセスしたいという時がある
そんな時の備忘録

# 1. アクセスするipアドレス、ユーザ、ポート番号、秘密鍵の場所を確認

vagrant ssh-configでホストの情報を確認

```
c:\testVM>vagrant ssh-config
Host default
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile c:/testVM/.vagrant/machines/default/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL


c:\testVM>
```

# 2. Tera Termを起動してログイン

Tera Termを起動する。
ホストとポート番号を入力してOKをクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/227176/483d1d9c-4b25-c3b4-9bb6-76e5b59c109b.png)

ユーザ名と秘密鍵の場所(IdentityFileの値)を入力してOKをクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/227176/bea18ee3-e2be-e4e7-c5e2-c2bf362d8d8d.png)

無事に接続完了

![image.png](https://qiita-image-store.s3.amazonaws.com/0/227176/f59c9337-58fe-9f7d-2fc0-e4bdfbbae148.png)
モバイルシステム技術検定（２級・１級）受験記録

# はじめに
ソフトウェア開発とは直接関係がないベンダ検定試験ではあるが、
携帯端末向け・IoT機器向けのソフトウェア開発者にとって必要となってくる下記のような情報に触れるきっかけになってくれました。

- 常に外部ネットワークにつながっていない機器に対しての対応
- この資格の後ろ盾になっている国内３大キャリアと、通信機器ベンダの最新提供サービス内容
- Wi-Fi, PANなLANと、LTEなどのネットワーク提供内容・サービスの違い

この試験のことを書いた記事が少ない（Qiita以外の場所も含めて）ので、
せっかくならと記事に書き留めています、

この記事を書いた段階では、２級は合格済み、１級の受験を終え合格発表を待っている状態です。

# 検定試験概要
そもそもこの検定のざっくり説明ですが...検定ウェブページに概略があったので、それを引用。

> モバイルシステム技術検定はIT関連業務に従事している方々やモバイルシステムの業務に携わる方々を対象に設けられた制度です。
モバイルシステムの提案、構築運用改善をより効果的、効率的に行うために必要となる技術知識・情報を習得していただくこと、さらにこの分野における優れた技術者として活躍していただくことを狙いとしています。

[引用元 : [MCPCの検定](http://www.mcpc-jp.org/kentei/index.html)]

より短く説明すれば、モバイルシステムの業務にかかわっている方向けの試験です。
モバイルシステムはとても複雑で、注意事項がたくさんあるから、
 **危ないところを覚えてくださいね！**という感じの内容ですね。


# 試験概要
## ２級
２級の範囲を取得するレベルとして、公式サイトに以下のような説明文があります。
> モバイルシステムを構成するワイヤレス通信ネットワーク、モバイル端末（ハード、ソフト）、モバイルコンテンツとサービス、セキュリティなどのモバイル関連技術についての概要を理解。

これらの内容を広く薄い知識を求められる検定内容となっています。
また、この範囲を4択問題100問を100分の間に解いていかないといけないので、
何かを計算して答えを導くというよりかは、瞬発的に答えを選択する必要がある内容となっています。

基本情報試験をまるっと、モバイルネットワークの世界に置き換えたような試験内容と範囲です。
これからソフトウェアの世界に入る人にとっては、有益な情報が多いのではないかと思いますが、
現役で活動している方にとっては、構える必要がない内容かもしれません。
ただ、１級を受験するには２級の合格が必要なので、１級を取得したいかたは取得する必要があります。


## １級
１級の範囲を取得するレベルとして、公式サイトに以下のような説明文があります。
> モバイルシステムを構成する要素について十分理解し、モバイルシステムの適応業務の内容分析、 最適システムの提示、システム改善計画の提示、運用の指導を行うに必要な知識。

１級は実践的な知識、現状把握の方法などが求められます。
下記の３科目に分かれていますが、
**現状ソフトウェア開発に関わっている方であれば、「ネットワーク」のみが新しい範囲で、
のこりの２科目は痛いほど身に染みていらっしゃると思うので、
この検定の解説本の「ネットワーク」章だけを見てみるだけでもいいかもしれません。**

> ＊ネットワーク：
モバイルシステムを構成する無線アクセスネットワーク技術、コアネットワーク技術、IP技術および移動体通信サービスなどが出題されます。
＊端末・アプリケーション：
モバイルシステムを構成する各種端末機器の要素技術、構造と開発手法およびシステムアプリケーションの要素技術、開発手法などが出題されます。
＊モバイルシステム：
システム要件定義、システム開発、システム運用、モバイルシステム関連の法制度などが出題されます。

# まとめ
そもそもがこの資格試験のメインターゲットは、この資格の後ろ盾の３大キャリアと通信ベンダやその関係会社の方々だろうから、
ソフトウェアエンジニアの方にとって幸せになる範囲ではありません。

ただ、IoT機器やその関連サービスを作るうえで、
お客さんにも開発や営業にもこの知識をもった人が１人もいない状況だと、
さすがにうまくいく光景が見えてこないと思っています。

世の中にこんな検定があるということを、覚えていただければ幸いです。
composer の  「secure-http false」(global 対応)

composer 使うたびに
> Your configuration does not allow connections to http://packagist.jp/packages.json. See https://getcomposer.org/doc/06-config.md#secure-http for details.

って出て、その都度

```json:composer.json
    "config": {
        "secure-http": false
    }
```
ってするのがめんどくさくなったので、グローバルに突っ込むことにしました。
で、忘れるので、メモ。

```
composer config --global secure-http false
```

そのうち、外せるんかなぁ。。。良い子は真似しちゃいけない設定ですｗ
werckerで急にHost key verification failed. になったのでメモ

先日まで問題なく通ってたのになぜかfailedになってしまったので、さくっと対応。

```terminal
Host key verification failed.
fatal: Could not read from remote repository.
```

## 原因

```yml:wercker.yml
    - add-to-known_hosts:
      hostname: bitbucket.org
      fingerprint: 97:8c:1b:f2:6f:14:6b:5c:3b:ec:aa:46:46:74:7c:40
```

上記部分の処理の際に

```terminal
Searching for keys that match fingerprint 97:8c:1b:f2:6f:14:6b:5c:3b:ec:aa:46:46:74:7c:40
Skipped adding a key to known_hosts, it did not match the fingerprint (35:ee:d7:b8:ef:d7:79:e2:c6:43:9e:ab:40:6f:50:74)
Added a key to /etc/ssh/ssh_known_hosts
```

今まではこんなログが吐かれてましたが

```terminal
Searching for keys that match fingerprint 97:8c:1b:f2:6f:14:6b:5c:3b:ec:aa:46:46:74:7c:40
Skipped adding a key to known_hosts, it did not match the fingerprint (SHA256:RezPkAnH1sowiJM0NQXH90IohWdzHc3fAisEp7L3O3o)
Skipped adding a key to known_hosts, it did not match the fingerprint (SHA256:zzXQOXSRBEiUtuE8AikJYKwbHaxvSc0ojez9YXaGp1A)
```

こんな感じに変わってたので、下記対応でMD5からSHA256に変更して解決

```yml:wercker.yml
    - add-to-known_hosts:
      hostname: bitbucket.org
      fingerprint: zzXQOXSRBEiUtuE8AikJYKwbHaxvSc0ojez9YXaGp1A
      type: rsa <--- ついでだし追加しておいた
```

```terminal
Searching for keys that match fingerprint zzXQOXSRBEiUtuE8AikJYKwbHaxvSc0ojez9YXaGp1A
Added a key to /etc/ssh/ssh_known_hosts
```
駐車禁止マークの対処方法

#経緯

購入時点でHigh Sierraが入ったMacをクリーンインストールしようとしたら、
駐車禁止マークが出て、1日はまってしまったため、解決方法をここに記載しておきます。

ちなみに、最終的にアップルに電話で問い合わせました。
勝手に全然つながらないイメージでいたのですが、
予約ができて、すぐにつながり30分ほどで解決してくれました。

#結論

電源OFFの状態から
(shift) + option + command + R + 電源ボタン 長押し ※1
→ 地球儀登場(ここでネットにつなぐ)
→ 待つ...
→ ユーティリティ画面が登場(command + Rの時同じ画面)
→ ディスクユーティリティでボリュームを削除
→ os再インストール

※1: shiftを押すと、PC購入時のOS、押さないと、最新OSがインストールされます。
(最新のMojaveじゃなくてHigh　Sieraがよかったのでshifｔを押して実行しました。)

アップルに案内されたサイト
https://support.apple.com/ja-jp/HT204904


##解説

駐車禁止マークは「禁止サイン」というようで、
起動に必要なシステムフォルダが検出されなかったという意味です。
参考：https://support.apple.com/ja-jp/HT204156
(このページ行ってもよくわからず、あたふた。)

禁止マークが出ているときは内部の起動システムではダメなので、
ネットにある起動システムを使う必要があるということらしいです。

command + R を押してユーティリティ画面に行って、上の手順を行っても
内部の起動システムを使うため、うまくいかないということらしいです。


##備考

「禁止サイン」が表示されてもcommand + Rを押すとユーティリティ画面が表示されます。
そこでOS再インストールをすると「prebootを作成できませんでした。」というエラーが出ます。
僕は、このエラーの解決方法を先に調べ始めてしまったため、1日はまってしまいました。

USB買ってきて、USBインストーラーをWindows環境で作るとかしてました。

参考：Windows環境でMac OS Xのリカバリーメディア（USBメモリ）を作成する
http://www.bitcoin20xx.xyz/entry/2018/04/02/155503
OSは「OS名 Freedownload」とかで調べて海外サイトからsierraをダウンロードしました。

ちなみに、電話で聞いたらPC購入時より古いOSは入らないらしいです。。。完全に意味がなかった。。。
FLOCSSでCSS設計に秩序を持たせる(サンプルサイトあり)

# 概要
FLOCSSでLPを作ったので、自分なりの作法とその感想について記述します。<br>(<a href="http://rin-develop.jeez.jp/flocss/">サンプルサイト</a>あり)

# FLOCSSについて
詳細は下記のリポジトリをご覧ください。
https://github.com/hiloki/flocss
## 提唱者
https://twitter.com/hiloki
##より詳しい使い方などはこちらの記事を参考にしてください。
https://qiita.com/sueshin/items/dcbaf3d8a0adb6b087db


### 導入前後の開発ディレクトリ

現行の私の開発環境

```html:build.txt
base
	_reset.scss
	_setting.scss
component
	ここにコンポーネント系scssファイルを追加していく。
fonts
	フォント系のファイル
helper
	mixinなど
inc
	パーツをディレクトリごとにimportする。
	_component.scss
	_layout.scss
	_page.scss
layout
	ここにレイアウト系scssファイルを追加していく。
page
	ページ単位のscssファイル
style.scss
	全体のファイルをimport
vendor
	外部APIなど専用ディレクトリ
```


新しくFLOCSS用に作成したレイアウト

```html:build_new.txt
base
	変更なし
fonts
	変更なし
helper
	変更なし
inc
	変更なし
object
	layout　 l-プレフィックスのscssファイル
	component　c-プレフィックスのscssファイル
	project p-プレフィックスのscssファイル
	utility u-プレフィックスのscssファイル
page
style.scss
vendor
```

# 導入経緯

HTML,CSSは容易に破綻することがしばしば問題になっていました。
その破綻を完全に防ぐことはできないが、設計ルールをもたらすことで少しでも防いで行こうという試みが,BEMやSMACSS、そして今回導入したFLOCSSなどのCSS設計ルールです。
私自身も短いエンジニア経験ではありますが、すでに設計ルールの重要性を痛感しております。


「現行の私の開発環境」　を見て頂ければお分かりかと思いますが、
基本CSSパーツを増やす時は、[component]ディレクトリに追加していきます。
プレフィックスなども無く、リードエンジニアが自由に記述していきます。
現在の職場では多くても二人、常に近くにエンジニアが居る状態ですので、このような設計方法でも特に問題ありません、むしろ細かな設計ルールを決めすぎないことで、誰でも構築に参加しやすいようにしています。

ではなぜ、私がFLOCSSを導入したかと言いますと、上記のcomponentにファイルを増やし続けるとおおよそcomponentディレクトリにファイルが70~100ファイルになります。
これくらいの数ですと、まだファイルを追うことも難しく無いですが、今後もっと大規模なサイトになった場合、秩序も無いままファイルが増え続けてしまうことへの懸念があり、
また、コンポーネント同士の上書きが発生した場合、コンポーネントファイルの中にコンポーネントファイルを上書きする必要がありクラス名の追跡が難しくなるなどの問題がありました。

提唱者のReadmeを見て頂くと、FLOCSSは基本ルールを持ちつつもある程度開発現場によって可用性を認めています。
私の場合常に
layout
project
component
の記述順をルールとしています。

```html:index.html
基本パターン

<div class="l-layout">
	<div class="p-project">
		<span class="c-component"></span>
	</div>
</div>


c-componentを上書きする場合

<div class="l-layout">
	<div class="p-project">
		<span class="p-project_component c-component"></span>
	</div>
</div>

c-componentにモディファイアをつける場合

<div class="l-layout">
	<div class="p-project">
		<span class="c-component -is-red"></span>
	</div>
</div>


```

# メリット　デメリット

メリット
Layout
Project
Component
の階層を守るのでコンポーネントの中のコンポーネントなど複雑になりにくい。
思い切ってprojectのパーツにすることでカンプ合わせが結果的に楽になった。
ファイルの検索が楽
軽い縛りがあることでCSSを書くことが楽になった。

デメリット
複数人で開発する場合、後から開発に参加してくる人にはある程度の説明が必要
ルールがある以上共通認識がないと破綻する。
結局のところComponent、Projectの切り分けは最後は個人の裁量になってしまう。
(これはどの設計思想でも避けられない気がします。)

# サンプルサイト
ここまでは簡単な自己開発環境の説明でしたが、いざ初めて導入した時は、
これがはproject?component?となり結構迷ってしまいました。
今は導入実績が数件になり、ある程度自分の中でルール化ができますが、最初は中々戸惑うことも多いかと思います。
ですのでこちらのURLに私がLP想定したテストサイトを公開します。

caution!!!
実際に公開されているサイトの流用になるため、本来存在した要素の削除、不必要なプロパティが適用されています。
デザインそのものよりも、class名の付け方や、projectとcomponentの粒度の参考にして頂ければと思います。
FLOCSS使ってみようという方へ少しでも足しになればと思います。

http://rin-develop.jeez.jp/flocss/
2. numpyの配列(備忘録)

＊作成中＊

markdownよりhtmlでかいたほうが楽な気がしてきた。
勉強したことをアウトプットする、簡単にそれができるようにしたいね

<!--
2. numpyの配列(備忘録)
-->
# はじめに

## ipythonを起動する

```
$ ipython
```


## numpyをimportする

```
In [1]: import numpy as np
```


## 配列をつくる

```
In [2]: x = np.array([range(x, x + 4) for x in [1, 3, 5, 7]])
```

```
In [3]: x
Out[3]:
array([[ 1,  2,  3,  4],
       [ 3,  4,  5,  6],
       [ 5,  6,  7,  8],
       [ 7,  8,  9, 10]])

```

# numpy配列の属性

```
In [4]: x.ndim
Out[4]: 2

In [5]: x.shape
Out[5]: (4, 4)

In [6]: x.size
Out[6]: 16

In [7]: x.dtype
Out[7]: dtype('int64')

In [8]: x.itemsize
Out[8]: 8

In [9]: x.nbytes
Out[9]: 128
```

# numpy配列のインデックス操作

```
In [10]: x[1, 2]
Out[10]: 5

In [11]: x[2]
Out[12]: array([5, 6, 7, 8])

In [13]: x[-1]
Out[13]: array([ 7,  8,  9, 10])

In [14]: x[2, -1]
Out[14]: 8
```
負の数も使える。



# numpy配列のスライス操作

```
In [15]: x[:2]
Out[15]:
array([[1, 2, 3, 4],
       [3, 4, 5, 6]])

In [16]: x[2:]
Out[16]:
array([[ 5,  6,  7,  8],
       [ 7,  8,  9, 10]])

In [17]: x[2:, 1]
Out[17]: array([6, 8])

In [18]: x[2, 1:]
Out[18]: array([6, 7, 8])

In [19]: x[:, 0]
Out[19]: array([1, 3, 5, 7])

In [20]: x[0, :]
Out[20]: array([1, 2, 3, 4])
```

配列の中の部分列を取り出す操作。
特に重要なのは最後２つ。それぞれ、行、列を取り出す。


# numpy配列のビュー

```
In [21]: x_sub = x[:3, :3]

In [22]: x_sub
Out[22]:
array([[1, 2, 3],
       [3, 4, 5],
       [5, 6, 7]])

In [23]: x_sub[1, 1] = 999

In [24]: x_sub
Out[24]:
array([[  1,   2,   3],
       [  3, 999,   5],
       [  5,   6,   7]])

In [25]: x
Out[25]:
array([[  1,   2,   3,   4],
       [  3, 999,   5,   6],
       [  5,   6,   7,   8],
       [  7,   8,   9,  10]])
```
ということで、部分列は元の列のポインタになっていることがわかる。

大きな配列の一部分だけ編集したいときは、
このように必要な部分だけ取り出す。

コピーが必要なときは以下のように。


# numpy配列のコピー

```
In [26]: x_sub = x[:3, :3].copy()

In [27]: x_sub
Out[27]:
array([[  1,   2,   3],
       [  3, 999,   5],
       [  5,   6,   7]])

In [28]: x_sub[1, 1] = 888

In [29]: x_sub
Out[29]:
array([[  1,   2,   3],
       [  3, 888,   5],
       [  5,   6,   7]])

In [30]: x
Out[30]:
array([[  1,   2,   3,   4],
       [  3, 999,   5,   6],
       [  5,   6,   7,   8],
       [  7,   8,   9,  10]])
```


# numpy配列の形状変更

数値の配置を変更するときに使う。例えば要素9のベクトルを3*3のベクトルにしたかったりするときに使う。

```
In [31]: np.arange(9)
Out[31]: array([0, 1, 2, 3, 4, 5, 6, 7, 8])

In [32]: np.arange(9).reshape(3, 3)
Out[32]:
array([[0, 1, 2],
       [3, 4, 5],
       [6, 7, 8]])
```

# numpy配列の連結

複数の配列を連結する。やり方３つ。

```
In [33]: a = np.arange(6).reshape(2, 3)

In [34]: a
Out[34]:
array([[0, 1, 2],
       [3, 4, 5]])

In [35]: b = np.arange(6).reshape(2, 3)

In [36]: b
Out[36]:
array([[0, 1, 2],
       [3, 4, 5]])

In [37]: c = np.concatenate([a, b])

In [38]: c
Out[38]:
array([[0, 1, 2],
      [3, 4, 5],
      [0, 1, 2],
      [3, 4, 5]])
```

```
In [39]: d = np.array([91, 92, 93])

In [40]: d
Out[40]: array([91, 92, 93])

In [41]: e = np.vstack([a, d])

In [42]: e
Out[42]:
array([[ 0,  1,  2],
       [ 3,  4,  5],
       [91, 92, 93]])
```

```
In [43]: f = np.array([[99],[99]])

In [44]: f
Out[44]:
array([[99],
       [99]])

In [45]: g = np.hstack([a, f])

In [46]: g
Out[46]:
array([[ 0,  1,  2, 99],
      [ 3,  4,  5, 99]])
```


# numpy配列の分割

複数の配列を分割する。やり方３つ。
BioPython（Seq）使い方

Qiita初投稿です。
今回は、Bioinfomaticsをやる上で使うと便利なBioPythonの勉強（独学）で得た知識をアウトプットしたいと思い、投稿しました。


<h2>Bioinfomaticsとは</h2>
Bioinfomatics(バイオインフォマティクス)は、簡単に言えば、生物学＊情報のようなもの。生物学で得たデータ（実験結果など）を情報学（プログラミングなど）を使って、解析していくもの

すごく、アバウトではあるが、こんな感じの認識

<h2>BioPythonとは</h2>
pythonライブラリの一つであり、バイオインフォマティクスを行うためにとても便利！（これ以外にも、BioRubyなどもある）
チュートリアル： https://biopython.org/

<h2>学習の進め方</h2>
biopython系の本が少ない（あっても英文）ため、公式の[チュートリアル](http://biopython.org/DIST/docs/tutorial/Tutorial.html)を見ながら（Google翻訳機能などを使いながら）、理解できた部分から、書いていこうと思います。


その前に・・・・
<h3>環境構築方法(Anaconda)</h3>

```
conda install -c anaconda biopython 
```

とりあえず、Anacondaを使って、biopythonを入れておく。（これがないと話が始まらない）


<h3>Seq</h3>

```seq.py
from Bio.Seq import Seq
my_seq = Seq("AGTACACTGGT")
my_seq  #=>Seq('AGTACACTGGT')が返り値
```
これは使えば、配列がどのような構造式を持っているのかを区別することができる


> 引用(https://bi.biopapyrus.jp/python/biopython/seq.html)
>> BioPython で塩基配列またはアミノ酸配列を扱うとき、Seq 型で扱うことが推奨されている。Seq 型でシーケンスを取り扱うことで、例えば AAGAAGA という配列をあったとき、これが DNA なのか、RNA なのか、それともアミノ酸なのかを区別できるようになる

他にも・・・

```seq2.py
from Bio.Alphabet import generic_dna, generic_protein
my_dna = Seq("AGTACACTGGT", generic_dna)
my_dna #=> Seq('AGTACACTGGT', DNAAlphabet())のようになる
```

seq2.pyでは、generic_dnaを使って、"AGTACACTGGT"を'DNA型'として名前をつけたような感じです。

このように、Seqは、入力された（取得した）配列がどの構造式を持っているかを表すことができる

※間違いがあったら、ご指摘いただけるとありがたいです

今後、このように得た知識をアウトプットしていきたいと思っています！
PyGraphvizをmacOSにインストールする

当方はcondaではなく、pipenvを使って環境を作っている。
今回、networkxを使うために、Pygraphvizをpipでインストールしようとした時に、

```
pygraphviz/graphviz_wrap.c:2987:10: fatal error: 'graphviz/cgraph.h' file not found
#include "graphviz/cgraph.h"
         ^~~~~~~~~~~~~~~~~~~
1 error generated.
error: command 'clang' failed with exit status 1
```
などと表示されて、前に進まなかったので、備忘録としてインストール法を書き残しておく。
なお、virtualenvを使用している場合、同様の問題が起きるらしい。
ネット上に色々とやり方が載っているが、バージョンが古かったりと色々と問題があるので、こちらを参考にしてほしい。

#筆者の環境
* macOS Mojave 10.14.1
* Python 3.7.0
* Graphviz 2.40.1
* PyGraphviz 1.5

# インストール

## Graphvizをインストール
まずHomebrewを使ってGraphvizをインストールする。

```shell

brew install graphviz
```

## PyGraphvizをインストール
次に、pipにライブラリのインストール場所を指定してインストールをする(環境によってはインストール先が微妙に異なるかもしれない)。ここで管理者権限になっていないとエラーが起きる。

```shell
sudo  pip install --install-option="--include-path=/usr/local/include/" --install-option="--library-path=/usr/local/lib/" pygraphviz
```

# インストール確認
最後にimportをしてみてエラーが出なければインストール完了。

```shell

Python 3.7.0 (default, Oct  2 2018, 09:18:58)
[Clang 10.0.0 (clang-1000.11.45.2)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> import pygraphviz
>>>
```
【VirtualBox】Extension Packのインストールに失敗する

```
機能拡張パッケージ"/path/to/foo.vbox-extpack"のオープンに失敗しました。
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/132486/f1e07158-ff3c-341b-8dd3-9acc38c9ab57.png)

まず、名前を元に戻す。
リネームしてしまうと使えなくなる。
それでも無理な場合は次を試す。

```
・Virtual Box起動時に管理者権限で起動する
・C:\Program Files\Oracle\VirtualBox\ExtensionPacks下にフォルダがない状態にする
```

ホストがLinuxの場合、VirtualBoxはsudoで起動する必要があることに注意。
Huawei Nova 3をdocomo回線で使う方法

先日，Huawei Nova 3を購入したのですが，SIMを挿入しただけでは電話しかできなかったので，備忘録も兼ねて設定した内容を書いておきます．
##データ通信を有効にする方法

`設定`→`無線とネットワーク`→`モバイルネットワーク`→`アクセスポイント名`を表示します．
![Screenshot_20181103-182732.jpg](https://qiita-image-store.s3.amazonaws.com/0/254869/20596bcd-dbef-593c-1510-7e11946346eb.jpeg)
普通ならこの一覧にあるのですが，残念ながらdocomoは無いので右上のメニューを開いて`新しいAPN`をタップします．
![Screenshot_20181103-182738.jpg](https://qiita-image-store.s3.amazonaws.com/0/254869/fa98a737-1368-b653-763a-df5f317dd359.jpeg)
下記の内容で設定します．

|設定箇所|設定内容|
|:-:|:-:|
|名前|(SPモードとかわかりやすい名前)|
|APN|spmode.ne.jp|
|認証タイプ|CHAP|
先程のアクセスポイント一覧から設定した名前を選択すればデータ通信ができます．
##キャリアメールを受信する方法
元WindowsPhoneユーザーなのでOutlookアプリでの設定を書いてますがどれも同じだと思います．

| 設定箇所 | 設定内容 |
|:-:|:-:|
| IMAPホスト名  | imap.spmode.ne.jp:993  |
| IMAPユーザー名  | キャリアメールのメールアドレス  |
| IMAPパスワード  | [ここ](https://www.nttdocomo.co.jp/service/docomo_mail/security/)を参照  |
|  SMTPホスト名 | smtp.spmode.ne.jp:465  |
| SMTPユーザー名  | キャリアメールのメールアドレス  |
| SMTPパスワード  | [ここ](https://www.nttdocomo.co.jp/service/docomo_mail/security/)を参照  |
##おわりに
ここまで書いて気付いたんですけど，docomoでHuawei P20 Proを買うと2年間縛りができる代わりにHuawei Nova 3の半額なんですね・・・・・
JavaでWebページを表示する方法

クロスアビリティ [Winmostar](https://winmostar.com/jp/)サポートチームです。

#1. JavaでWebページを表示
JavaのデフォルトGUIであるJavaFXでは、Webページを表示する機能があります。この記事では、その方法を紹介します。Webページは、WebViewというクラスを使って表示できます。以下はサンプルコードです。

``` java
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class WebTest extends Application {

    private WebView webView;

    @Override
    public void start(Stage stage) {
        this.webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        webEngine.load("https://x-ability.co.jp");

        BorderPane pane = new BorderPane(this.webView);
        Scene scene = new Scene(pane, 500, 500);

        stage.setScene(scene);
        stage.setMaximized(true);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}
```


#2. URLの更新
WebViewに設定したURLを更新するには、WebEngine#loadを使います。

``` java
    private void updateURL(String url) {
        WebEngine webEngine = this.webView.getEngine();
        webEngine.load(url);
    }
```


#3. ページを進む／戻る
表示中のページを進むまたは戻るときは、WebHistory#goを使います。


``` java
    private void goForward() {
        WebEngine webEngine = this.webView.getEngine();
        WebHistory webHistory = webEngine.getHistory();
        webHistory.go(+1);
    }

    private void goBackward() {
        WebEngine webEngine = this.webView.getEngine();
        WebHistory webHistory = webEngine.getHistory();
        webHistory.go(-1);
    }
```


#4. ウィンドウを閉じる
Webページからウィンドウを閉じるイベントが発生した場合に、JavaFXのウィンドウを閉じる処理を実装します。WebEngine#setOnVisibilityChangedを使います。

``` java
    @Override
    public void start(Stage stage) {
        ... 省略 ...
        stage.show();

        webEngine.setOnVisibilityChanged(event -> {
            if (!event.getData()) {
                stage.hide();
            }
        });
    }
```


#5. ポップアップを表示する
Webページからポップアップを表示するイベントが発生した場合に、JavaFXにて新規ウィンドウを表示する処理を実装します。WebEngine#setCreatePopupHandlerを使います。

``` java
    @Override
    public void start(Stage stage) {
        ... 省略 ...
        stage.show();

        webEngine.setCreatePopupHandler(config -> {
            WebView webView2 = new WebView();
            WebEngine webEngine2 = webView2.getEngine();
            webEngine2.load("about:blank");

            BorderPane pane2 = new BorderPane(webView2);
            Scene scene2 = new Scene(pane2, 500, 500);

            Stage stage2 = new Stage();
            stage2.setScene(scene2);
            stage2.show();

            return webEngine2;
        });
    }
```