OmniAICreator/Qiita-1.07M huggingface dataset:
Pythonの文字列のメソッドについてのメモ

## 環境
Python 3.6.5 :: Anaconda, Inc.

```python
$ python
Python 3.6.5 |Anaconda, Inc.| (default, Apr 26 2018, 08:42:37) 
[GCC 4.2.1 Compatible Clang 4.0.1 (tags/RELEASE_401/final)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
```
このようにインタープリタを起動する。
注意！コードに含まれる「>>>」や「...」はインタープリタの表示を再現しているものなので、SublimeText、VSCode、Pycharmなどのテキストエディタでコードを書く場合は省略可能。

## 任意のワードからリテラルが始まっているか

```python
>>> s = 'My name is Mike. Hi Mike.'
>>> is_start = s.startswith('My')
>>> print(is_start)
True
>>> is_start = s.startswith('Your')
>>> is_start
False
```

## 任意のワードがリテラルのどこにあるのか

```python
>>> s = 'My name is Mike. Hi Mike.'
>>> s.find('Mike')
11
>>> s.rfind('Mike')
20
```

## 任意のワードがリテラル中にいくつ含まれているのか

```python
>>> s = 'My name is Mike. Hi Mike.'
>>> s.count('Mike')
2
```
## リテラルの先頭だけ大文字にして残りは小文字にする

```python
>>> s = 'My name is Mike. Hi Mike.'
>>> s.capitalize()
My name is mike. hi mike.
```

## 全てのワードの先頭を全て大文字にする

```python
>>> s = 'My name is Mike. Hi Mike.'
>>> s.title()
My Name Is Mike. Hi Mike.
```

## リテラル中の文字を全て大文字にする

```python
>>> s = 'My name is Mike. Hi Mike.'
>>> print(s.upper())
MY NAME IS MIKE. HI MIKE.
```

## リテラル中の文字を全て小文字にする

```python
>>> s = 'My name is Mike. Hi Mike.'
>>> s.lower()
my name is mike. hi mike.
```

## リテラル中のワードを任意の別のワードに入れ替える

```python
>>> s = 'My name is Mike. Hi Mike.'
>>> s.replace('Mike', 'Nancy')
```
ムスリム（イスラム教の人）の方と一緒に仕事する場合、宗教上、業務として行うことが難しい（出来ない）事が ありましたのでまとめておきます。



ムスリム（イスラム教の人）の方と一緒に仕事する場合、宗教上、業務として行うことが難しい（出来ない）事がありましたので、まとめておきます。

※ちなみに、今回発覚したのは、食品関係のECサイトの構築が出来ないという理由でした。

※ あくまでも弊社のエンジニアの意見であり、人によってもっと厳しかったり、ゆるかったりがあるようですので、一概には言えないですが、こういう考えがあるという観点で見て頂ければと思います。

## 仕事として受けれないもの

- お酒類を扱うサイト（薬品を除く）
- ギャンブル（くじを含む）
- お肉を扱うサイト（ハラールに限らず）
- 婚活以外の出会い系サイト（風俗関係・街コン・ライブチャットを含む）
- 風俗関係（出会い系サイトを含む）
- 男女問わず肌の露出が多いもの（海・プール・水着・下着など）
- 無金利以外の金融機関
- 占い（おみくじを含む）
- 保険（任意保険）
- 他の宗教関係のもの
- その他（タトゥ・ドラッグ・妊娠中絶など）

## 人によっては受けられないもの（グレー）

- デザインの一部に上述のものが入っている場合、または、主なサービス思想が上述の場合。
- ポイントサイト（ガチャなどがありギャンブル性を疑うため）
- ソーシャルゲーム（同様の理由）
- 温泉など（サイトデザインが女性の肌などが載ってるとアウト）
- 仮想通貨

※ 困った際には教会のようなところで問い合わせることが出来るとのこと
ただ、問い合わせた結果が **問題ない** となったとしても、本人に疑念が
ある場合は断ることもある（危うきに近寄らず）

## 最後に

こういう書き方をすると、イスラムの方との仕事が非常にやりにくく感じる方もいらっしゃるかと思いますが、弊社のエンジニアは非常に優秀ですし、業務上支障は特にありません。
海外の宗教上の事ですし、日本にいるとわからないことが多いかと思います。
出来る、出来ないを明確にすることで健全な業務遂行が出来るかと思いますので、記事としました。

弊社（カラビナテクノロジー）では、今後もムスリムの方の採用は積極的に行なってまいりますので、
福岡でWEBエンジニア・デザイナに興味がある方はぜひ、ご一報ください。
個人学習メモ#8 代表的なデータベースの種類

Samurai様からの引用です。

データベースの基本
https://www.sejuku.net/blog/8763
データベースの種類
https://www.sejuku.net/blog/8964


ログイン機能の仕組みを知りたくてとあるサイトから
・FORM(POST)の知識
・JavaScriptの知識
・データベースの知識
が必要なことがわかりました。

これ以外に必要な知識、オススメのサイトなどありましたら、
教えていただけると幸いです。

今回は
・データベースとは？
・代表的なデータベースは何があるのか
この２点に関してメモを残していきたいと思います。


データベースとは・・・
-
一定の形式で整理されたデータの集まり

複数で共有、利用すること・検索、加工すること

利点
・データを整理して貯める
・データを情報として活用しやすくなる

データ・モデルーこのデータをどうやって整理して管理するかの方法

リレーショナルデータベース（RDB）
テーブルといわれる表形式の構造でデータを管理する関係モデルを使ったデータベース

行＝レコード

列＝フィールド

なぜRDBが使われるのか
・データの重複を避けられること
・検索能力が高い


代表的なデータベース
Oracle Database
-
高機能だが、高額、大規模なデータに使われることが多い

MySQL
-
世界で最も有名なオープンソースデータベースで、基本的に無料で使用することができる。（一部有料）

多くのレンタルサーバーで利用することができるため、市場シェアが高いデータベースになっている。

XAMPPで標準インストールされ、PHPとの相性も非常に良いことが特徴としてあげれる。

PostgreSQL
-
MySQLと同じオープンソースデータベース

大規模商用データベースが持つような機能をもっており、MySQLと並んでとても人気がある。
MySQLに比べて、
関数や機能等が豊富なのも特徴としてあげられる。

SQLite
-
データ保存に単一ファイルのみを使用する軽量データベースです。

中小規模のデータ管理に適しており、今モバイル環境での利用がとても増えてきている。
アプリケーションに組み込んで利用されることを想定していて、Android端末のライブラリとして採用されているのも特徴です。

Microsoft SQL Server
-
MicrosoftがOracleの対抗製品として開発しているデータベース

高機能、高額。

Windows Server やMicrosoftの開発言語との相性が抜群に良い

Microsoft Access
-
Microsoft office製品の一つで、他のoffice製品同様の操作感でデータベースの構築・管理を行うことができます。


FileMaker
-
MacOS,windowsで使用できるデータベース。
グラフ作成機能が充実していて、レポート作成や分析資料作成をしやすいことで人気

iPhoneやiPadとの親和性も高く、好んで利用している人も多くいる。
Dockerについてのメモ


# Dockerについて
## この記事は
Dockerについて、読んだことをまとめた個人的なメモです。
以下の書籍を参考にしてます。

*  [プログラマーのためのDocker教科書 第一版] (https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEDocker%E6%95%99%E7%A7%91%E6%9B%B8-%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%81%AE%E5%9F%BA%E7%A4%8E%E7%9F%A5%E8%AD%98-%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E3%82%88%E3%82%8B%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E3%81%AE%E8%87%AA%E5%8B%95%E5%8C%96-%E9%98%BF%E4%BD%90-%E5%BF%97%E4%BF%9D/dp/479814102X)
*  [Docker実践ガイド] (https://www.amazon.co.jp/Docker-%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-impress-top-gear/dp/4844339621/ref=pd_lpo_sbs_14_img_1?_encoding=UTF8&psc=1&refRID=A60B8Q54Q6XPSG7FXPR0)

また、次のような知識をまとめてます。

* コンテナとは
* Dockerとは
  * Dockerの概要
  * Dockerを支える仕組み
  * Dockerのメリット
  * docker-compese


## コンテナとは
仮想化技術の一つです。ホストOSに論理的な区画を作って、アプリケーションやライブラリーの実行環境を閉じ込め、あたかも個別のサーバーのように使います。ホストOSのリソースを論理的に分離し、複数のコンテナで共有して使います。
この区画のことをコンテナと言いい。コンテナを実現する技術をコンテナ仮想化技術と呼びます。
コンテナはオーバーヘッドが少ないため、軽量で高速に動きます。また、アプリケーションの開発環境や実行環境をパッケージ化して、迅速に配備したり破棄することも可能です。

コンテナ仮想化技術のイメージ図
![コンテナ .png](https://qiita-image-store.s3.amazonaws.com/0/202545/d1d6a807-b066-ed49-7fa9-c733d8fdf129.png)



## Dockerとは
コンテナ仮想化技術で、アプリケーションの実行と管理を行うためのオープンソースプラットフォームです。
以下のような特徴があります。

* Linux上で動作する
* GO言語で書かれている。

記事を書いている段階で、Dockerはコンテナ仮想化技術のデファクトスタンダードになっています。
DockerではOSの上にDockerデーモンと呼ばれるコンテナ管理ソフトウェアを立てて、その上にコンテナを構築します。
コンテナはアプリケーションorライブラリー/ミドルウェアやOS、ネットワークの設定などをひとまとめにしたDockerイメージから作成します。また、作成したコンテナをイメージにすることも可能です。Dockerイメージの正体はアプリケーション実行に必要なファイル群が格納されたディレクトリです。

## Dockerを支える仕組み
### 区画化の仕組み
Dockerの区画化には、Linuxのnamespace機能を用いています。
名前を付けることで、以下のようなプロパティをコンテナに隔離しています。

* PID
  * プロセスごとのID
* Network
  * ネットワークディバイス、IPアドレス、ポート番号、ルーティングテーブル、フィルタリングテーブル
* UID、GID
 * ユーザーID、グループID
* Mount
  * マウントシステム
* UTS
  * ホスト名、ドメイン名
* IPC
  * プロセス間通信のオブジェクト
  
### リソース管理の仕組み
区画化されたリソースの管理は、Linuxの `cgroup` の仕組みを用いています。`cgroup` はプロセスをグループピングして管理する仕組みです。`cgroup` を用いてコンテナが使用できるリソースを制限することで、ホストのリソースを食い尽くすことを防いでいます。

### ネットワークの仕組み
#### コンテナ間の通信
Dockerではコンテナごとに仮想NICが割り当てられています。この仮想NICは`docker0`と呼ばれる仮想ブリッジに接続されており、コンテナ同士の通信を行います。
なお、コンテナどうしの通信にはリンク機能が用いられます。Dockerコンテナにはエイリアスを付けることができ、リンク機能ではそのエイリアスを用いたコンテナ間の通信を可能にします。

#### コンテナと外部ネットワークの通信
DockerではNAPT(Network Address Port Translation)の機能を使って外部ネットワークに接続します。
NAPTはIPアドレスと、ポート番号を変換する機能で、プライベートアドレスとグローバルアドレスを透過的に変換します。

## Dockerのメリット
### 移植性
開発環境や実行環境をパッケージ化することによって、Dockerの動作環境とDockerイメージがあればどこでも同じコンテナを作成することができます。これは開発環境の統一に役立ちます。

### 共有
DockerHubでは作成したDockerイメージを共有できます。また、DockerHubではOSSの公式イメージなどを使えば、比較的簡単にOSSを利用できたりします。

## dokcer-compose
Dokcerコンテナは、通常一つでは完結せず、複数のコンテナの連携によって、1つのシステムを構築します。
ここで、一つ一つのコンテナを手動で設定し起動を行っていると非常に手間になることがあります。ここで登場するのが`docker-conpose` です。`docker-compose`ではコンテナの一括、構築、管理、連携などを行うことができます。


## 終わりに（感想？）
今回はそもそもDockerとはというところから始め、Dockerが動く仕組み、メリット、Dockerコンテナを実際に構築する際のツールなどについて調べてまとめました。
開発環境の構築などでDokcerを使うなら`dokcer-compose`で間に合いそうですが。実際のプロダクトだと、Kubernetesなどのコンテナオーケストレーションと呼ばれるものが使われていたり、Kubernetes環境をクラウドで構築するGKE(Google Kubernetes Engine)等が利用されたりします。
機会があれば、そっちも調べてまとめてみようと思います。
windows ユーザー用 git導入

## gutの操作方法
操作方法には２種類あります：
1.　CUI (コマンド) から操作する
2.　GUI (マウスなど） から操作する

## gitの導入
gitの導入ツールと使える操作方法には以下のように分類できます：

|導入ツール           |CUI  |GUI  |対象      　|
|:------------------|:---:|:---:|:--------:|
|git for windowsのみ |○    |×    |ﾌﾖｳﾀﾞ！　    |
|Source tree        |○    |○    |普通の人   　|
|その他              |○    |○    |こだわりたい人|
なので、SourceTreeの導入をすれば十分です。

1. Github会員登録
2. Source Treeインストール
3. gitコマンドにパスを通す  

##1. Github会員登録手順
https://github.com/  より登録。メールアドレスが必要です。

- フリープランで登録  
<img src="https://qiita-image-store.s3.amazonaws.com/0/231868/44c5a386-9781-83fd-52b2-87f2eb86d33b.png" width=５０%>
- アンケートに答える
- 届いたメールの認証用リンクにアクセスして終わり

##2. Source Treeインストール手順
https://www.sourcetreeapp.com/  からインストーラをダンロードしてインストール。
参考URL:　https://qiita.com/otakeuchi/items/d9719d7bd78a97feb4f4

- インストーラを起動
- 利用許諾契約書
    - Atlassianアカウントを選択してアカウント作成
    - ライセンス同意にチェック
    - データ送信に同意のチェックは外す
- Register account
    - Gitにチェック
    - **Mercurial<font color="Red">*</font>のチェックは外す**
- インストールして終了〜　　

##3. gitコマンドのパスを通す
gitをインストールしてもgitコマンドは使えません。
gitコマンドを使えるようにするにはパスを通す必要があります。

手順：下記通りに進めればできます。
参考URL：http://www.it-tech-box.com/2016/05/sourcetree-git-cmd/

パスをが通せたら、コマンドプロンプトで```git --version```で確認。
バージョンが表示されればOkです。
Django2.0で静的Webページ作成〜リンク編〜

動作環境
macOS Sierra
python == 3.6.4
django == 2.0

#ながれ
リンクを貼るためにやることがいくつかある。

 - プロジェクト(project)のurls.pyを更新する
 - アプリ(app)のurls.pyを更新する
 - viws.pyを更新する
 - htmlにリンクを貼る

はじめましょう！

#プロジェクトのurls.pyを更新する
上段にurlをインポートする指示を追加します。

```python:project/urls.py
from django.conf.urls import url
```

urlpatterns = [ ]には以下のように追加します。

```python:project/urls.py
urlpatterns = [
    url('app/', include(('app.urls', 'pjhoge'), namespace='pjhoge')),
]
```

#アプリのurls.pyを更新する

```python:app/urls.py
from django.conf.urls import url
```

```python:app/urls.py
urlpatterns = [
    url('apphoge', view.apphoge, name='apphoge'),
]
```

#views.pyを更新する

以下を追加する。

```views.py
def apphoge(request):
    return render(request, 'app/hogera.html')
```


#htmlにリンクを貼る

```html
<a href="{% url 'pjhoge:apphoge' %}"> </a>
```

完了。

##参考情報
https://teratail.com/questions/106843
vue-pwa-boilerplate 上の service worker をカスタマイズする

# はじめに

vue で pwa をしようと思うと、 vue-pwa-boilerplate を使うことになると思います。
しかし vue-pwa-boilerplate で `npm run build` 等と deploy を行うと、`dist/service-worker.js` が自動的に生成されてしまいます。

chache の操作や設定は以下の URL にあるように設定ファイルから行うことはできますが、
Push 通知の `notification` などその他イベントの操作方法がどこにも書かれていなかったため、共有します。

- https://qiita.com/gyarasu/items/2f18edc4ae251180d89e#3-vuejs%E3%81%AEspa%E3%82%92pwa%E5%8C%96%E3%81%99%E3%82%8B

## やり方

やり方は簡単で、`build/webpack.prod.conf.js` 内の `SWPrecacheWebpackPlugin` に、
`importScripts: ['path/to/your.js']` を書き、自前で用意した service worker 用の js ファイルを import します。

- 参考
    - https://github.com/vuejs-templates/pwa/issues/62
    - https://github.com/vuejs-templates/pwa/issues/184

## サンプル

```javascript:build/webpack.prod.conf.js
...
    // service worker caching
    new SWPrecacheWebpackPlugin({
      cacheId: 'test',
      filename: 'service-worker.js',
      staticFileGlobs: ['dist/**/*.{js,html,css}'],
      minify: true,
      stripPrefix: 'dist/',
      importScripts: ['/static/mysw.js'] // 自前の service worker スクリプトをインポート
    })
...
```

```javascript:static/mysw.js
self.addEventListener('fetch', function(event) {
  console.log('fetch url : ' + event.request.url);
});
```
PC-88 z80asm


```hello.asm
; z88dk
; z80asm -b -l hello.asm
        org     $b000
start:
        in      a, ($71)        ; メインROMをセレクトする
        push    af
        ld      a, $ff
        out     ($71), a

        ld      hl, msg
        call    $5550

        pop     af              ; ROMの状態を元へ戻す
        out     ($71), a
        ret

msg:    defm    "hello, world", 0
```

`z80asm -b -l hello.asm`
z80asmでアセンブルし、作られた`hello.bin`ファイルをt88ファイルに変換する。(hello.t88)
[バイナリ→T88ファイル作成](http://www.maroon.dti.ne.jp/lance/js/trial/t88make.html)

M88の場合
メニューから[Tools]->[Tape...]を選択し、`hello.t88`を開く。
![hello_t88.png](https://qiita-image-store.s3.amazonaws.com/0/257554/cc92c7c0-62f7-edd6-f729-75fdd6313774.png)

機械語モニタから実行

```hello2.asm
; z88dk / PC-8801 mon
; z80asm -b -l hello2.asm

        org     $b000
start:
        ld      hl, msg
        call    $5550
        rst     $38

msg:    defm    $d, $a, "hello, world", 0
```

![hello_mon.png](https://qiita-image-store.s3.amazonaws.com/0/257554/62357781-726e-838c-a9cd-236e6b0f9bf6.png)
WP Mail SMTP で SMTP Error: Could not authenticate. が発生したときの対処

この記事はContact Form 7 と WP Mail SMTP Settings 使っても送信できないかつ、
SMTP Error: Could not authenticate. ではじかれてしまった場合についての記事。

下記リンク先の「ステップ 2: 次の解決方法を試す」の中で2つの事をやったら治った。
https://support.google.com/mail/answer/78754

+ 「安全性の低いアプリを許可する: 2 段階認証プロセスを使用していない場合は、安全性の低いアプリがアカウントにアクセスすることを許可します。」(※この手は他のサイトでよくあったがこの手順だけでは解決できなかった)
+ 「この手順で解決しない場合は、https://www.google.com/accounts/DisplayUnlockCaptcha にアクセスして、ページに記載されている手順を行います。」

上記二つを行ったことにより、WP Mail SMTPを利用したメールの送信ができるようになった。
Javascriptでオブジェクトの配列から特定の値が配列の何番目かを取得する

```javascript
var dessertList = [
	{ id:1, name:"クッキー" },
	{ id:2, name:"パンケーキ" },
	{ id:3, name:"チョコレート" },
	{ id:4, name:"アイスクリーム" },
	{ id:5, name:"マシュマロ" },
];

var num;
for(var i = 0; i < dessertList.length; i++) {
	if(dessertList[i].name == "チョコレート") {
		num = i;
	}
}
console.log(num); // 2が返ってくる
```

ページングの処理を書くときに必要だったので、
実装してみました。
WSLでmatplotlibやgnuplotでプロットができない

# WSLでGUIのソフトは使えないものか
WSLをダウンロードして, Anacondaをダウンロードして,
matplotlibで意気揚々とサインカーブを描こうと思ったら...

無事にエラーを吐かれました.

## どうしてプロットできないのか
この症状は, WSL自体が出力するディスプレイを認識できないことが原因です.
そこで今回は**VcXsrv**というソフトをダウンロードして, 
出力先のディスプレイを作成しちゃいましょう.

## 追記
先日、WSL2というものが新しく発表になりました。
しかしながらHyper-Vを用いている性質上か、IPアドレスの設定が難しい状況にあります。
使いやすい方法が確立されるまではWSL1を用いていたほうが無難かと思われます。
一応WSL2についての記事を作成いたしましたので、参考にしていただけたらと思います。

[WSL2におけるVcXsrvの設定](https://qiita.com/ryoi084/items/0dff11134592d0bb895c)

# VcXsrvのインストール
つぎのサイトからVcXsrvをインストールしてください
[sourceforge.net](https://sourceforge.net/projects/vcxsrv/)

特に設定はありませんので, ポチポチとしていれば大丈夫だと思います.

# VcXsrvの自動起動設定
1. **xlaunch.exe**という実行ファイルがあると思いますので, 起動します.
2. multiple window を選んで, 次へを選択します.
3. start no client を選んで, 次へを選択します.
4. clipboard を使用したければ, clipboardにチェックを入れて, 次へを選択します.
5. Save configuration を押して, どこかアクセスしやすい場所(デスクトップとか)に保存してください.
6. 完了を押してxlaunchを終了します.
7. 続いて, `Windowsキー + r`を押して, *shell:startup*と入力して検索します.
8. **スタートアップ**というフォルダが開きますので, ここに先ほどxlaunchを用いて作成したファイルを移動してしまってください.

これで, 自動的にVcXsrvがパソコンの起動時に立ち上がるようになりました.

# WSL上のディスプレイの設定
最後にVcXsrvの存在をWSLに教えてあげましょう.

1. WSLを開きます.
2. vim や nano などで`~/.bashrc`を開きます.
3. 開いた.bashrcの最後の行に, 以下のコマンドを追記して保存してください.

```shell:.bashrc
   export DISPLAY=:0.0
```

最後にWSLを再起動すると, 先ほど編集した.bashrcが読み込まれて, 設定が反映されます.

# 最後に
以上でmatplotlibもgnuplotも無事に使えるようになったと思います.
またほかのGUIのプログラムについても使えるようになったかと思いますので, ぜひ楽しんでみてください.

## おまけ
以下のサイトを参考にさせて頂きました.
とても素晴らしいWSLをご紹介されているので, 是非ご覧ください.
[お前らのWSLはそれじゃダメだ](http://xztaityozx.hatenablog.com/entry/2017/12/01/001544)
Tinker Board Sでgst-uninstalledをセットアップする

# 環境
- Tinker Board S
- TinkerOS Debian v2.0.7

# 手順
- 基本的に下記URLの記事を読み進めれば良い
    - https://arunraghavan.net/2014/07/quick-start-guide-to-gst-uninstalled-1-x/
    - gst-buildはmesonや依存ライブラリがうまく入らずビルドできなかったため断念。

# 躓いたところ
- `./gstreamer/scripts/git-update.sh`を実行すると`gst-plugin-base`のビルドに失敗する
    - `gstgldisplay_gbm.h`の`gbm_bo_write`関数に対して`size_t`が見つからないと言われる
- `gstgldisplay_gbm.h`に`#include <stdlib.h>`を追記すればビルドが通るようになる
php開発環境の管理に超便利なLaravel Forgeの始め方 (下)

この記事は[php開発環境の管理に超便利なLaravel Forgeの始め方 (中)](https://qiita.com/MasaGon/items/54bfd67812de9db533a7)の続きです。

# SiteをGitレポジトリと連携する

SiteをGitレポジトリと連携してみたいと思います。今回はButbucketと連携することにします。

![Laravel Forge   PHP Hosting For Artisans (10).png](https://qiita-image-store.s3.amazonaws.com/0/7519/c0f12d84-77a1-a4a9-6eda-9c0f80d34e4d.png)

まずは、My AccountにBitbucketを連携する必要があります。Connect To Bitbucketをクリックすると、必要に応じてBitbucketの認証画面が表示されるので、ログインしてOAuth連携を済ませてください。認証が済むと、BitbucketのOAuth連携アプリケーションにLaravel Forgeが表示されます。

![MasaGon   oauth — Bitbucket.png](https://qiita-image-store.s3.amazonaws.com/0/7519/cb6c780d-c05b-5c16-1c4d-f7a8781b389a.png)

Site設定のAppsからGit Repositoryをクリックして、Repositoryを追加します。

![Laravel Forge   sandoval (15).png](https://qiita-image-store.s3.amazonaws.com/0/7519/0f967f3f-8a93-d5a7-fce8-a6fa2851f443.png)

Repositoryは User名/レポジトリ名 の形式で入植します。composer installが必要なプロジェクトの場合には、Install Composer Dependenciesをチェックしましょう。

![Laravel Forge   sandoval (16).png](https://qiita-image-store.s3.amazonaws.com/0/7519/b3d976ae-6ff6-70c4-691f-66f432633292.png)

正しく接続できると、デプロイ画面に遷移するので、Deploy Nowでデプロイが実行されます。Bitbucketのmasterブランチにコミットされた時に自動的にデプロイされるよう設定することも出来ます（Enable Quick Deploy）。

デプロイスクリプトも表示されているので念のため確認しておいた方が良いでしょう。（レポジトリはsiteのルートに展開されるようなので、public等のパスはレポジトリ内に反映させおく必要があります）

![Laravel Forge   sandoval (19).png](https://qiita-image-store.s3.amazonaws.com/0/7519/b742ce10-a197-4aad-acd8-f5c65e006b67.png)

その他のオプションは説明を読めば理解できると思いますが、Laravel ForgeのTrigger URLにアクセスすることで外部からデプロイを走らせたり、デプロイが終わった後に外部のWebhookをキックするようなことも出来るようです。あとは、DNSにIPを通せば無事アクセス出来ました。

# SSLに対応する

SSL対応もLaravel Forgeを使うと簡単です。通常の認証局用のCSRを作成するのも、証明書を登録するのも管理画面から出来ますが、ここでは無料でSSL化が出来るLetsEncryptを使ってみましょう。

![Laravel Forge   sandoval (22).png](https://qiita-image-store.s3.amazonaws.com/0/7519/351965bc-6da8-af83-7f27-f0c2b68233e3.png)

サイトの設定からSSLに行き、LetsEncrypt(Beta)を選択すれば、後はドメイン名を入れて待つだけです。

![Laravel Forge   sandoval (23).png](https://qiita-image-store.s3.amazonaws.com/0/7519/f2292889-ae39-f26d-2c5d-cd14b615d923.png)

ステータスがActiveになったらサイトにアクセスしてみて下さい。HTTPは自動的にHTTPにリダイレクトされる設定になっているようです。

# その他の機能

その他にも管理画面でコントロールできる便利な機能が揃っているので、phpサーバー管理に苦労しているサバ管にお勧めです。

- サーバーの設定
  - SSH公開鍵の追加
  - Max Upload Sizeの設定
  - OPCacheの設定
  - PHPのアップグレード
  - データベース/データベースユーザーの管理
  - Scheduler (cron) の管理
  - カスタムDaemonの管理
  - firewall(OS)の管理
  - モニタリング (Blackfire.io, Papertrail連携）
  - サーバー情報の第三者への移管

- サイトの設定
  - WordPressの自動インストール
  - Gitレポジトリ連携 (GitHub, Bitbucket, GitLab, カスタム）
  - 自動デプロイ/ウェブフックの管理（Composer install対応）
  - 環境変数ファイル (.env) の編集
  - Que (Worker) の管理 (redis)
  - SSL設定 (LetsEncrypt対応）
  - サイトのリダイレクト設定

- チームの管理 (BUSINESSプランのみ)
  - サークル（グループのようなもの）の管理
  - メンバーの招待（サークルメンバーは無料）
  - 各サークルとメンバー/サーバーとの紐付け

Let's Enjoy Server Management !!

# 本記事のリスト
- [php開発環境の管理に超便利なLaravel Forgeの始め方 (上)](https://qiita.com/MasaGon/items/ab75001477192ecd51b5)
- [php開発環境の管理に超便利なLaravel Forgeの始め方 (中)](https://qiita.com/MasaGon/items/54bfd67812de9db533a7)
- php開発環境の管理に超便利なLaravel Forgeの始め方 (下)
Rails ActionControllerのフィルタ機能は継承元のメソッドにも影響を与えるからこんな実装はするな

# はじめに
初歩的なことなんですが、これが原因で15分くらいバグの原因が突き止められなかったので戒めも込めて書きますた。

## 登場人物
|要素|説明|
|:--|:--|
|User|ユーザー|
|Team|ユーザーが属しているチーム|
|current_user|ログインユーザー|


# こんな実装をしていた

## 各ページの共通ヘッダーにログインユーザーのチーム名を表示したい！

``ApplicationController``内で``@my_team``を取得する``set_team``を実装します。

```rb
class ApplicationController < ActionController::Base

  def set_team
    @my_team = current_user.team
  end

end
```

これでview側では``@my_team.name``みたいな感じでチーム名を取得できます。

まあこれは何の問題もありません。


## Teamの一覧画面と詳細画面を作る！

``TeamsController``を作成して、``index``と``show``を実装します。
チーム情報を取得するロジックは今後使い回す予定があるため``set_teams``と``set_team``を実装して``before_action``で呼び出すことにします。

```rb
class TeamsController < ApplicationController
  before_action :set_teams, only: :index
  before_action :set_team, only: :show

  def index ;end

  def show ;end

  private
  
  def set_teams
    @teams = Team.all
  end

  def set_team
    @team = Team.find(params[:id])
  end
end
```

## お分かりだろうか？
indexにアクセスするとエラーが出ることに...
そう``TeamsController``のアクションでは``set_team``がshowの場合にしか呼ばれないように書かれています。
これは単に``TeamsController``の中にある``set_team``にのみ当てはまるわけではないのです。
継承者との``set_team``にも影響を与えるのです。（当たり前だろって？うるさいなあ）

# 終わりに
名前のつけ方には気をつけないといけないなあ（小並感）

ブログで見たい方はこちら
[Rails ActionControllerのフィルタ機能は継承元のメソッドにも影響を与えるからこんな実装はするな](http://nabesys.com/article/2018/07/25581/)
小ネタ: Breakキーが無いパソコンでSublime TextのCancel Build(Ctrl+Breakキー)を実行する



# 困ったこと
環境:Thinkpad X230 on Windows 7
Sublime Text3上Python/Flaskで開発をしてます。Flaskサーバーの起動・停止をいちいちコマンドから行うのは面倒なのでショートカット・キーで行いたいと思いました。

Sublime TextのBuild Systemのショートカットでは、
![image](https://qiita-image-store.s3.amazonaws.com/0/108535/8364e011-b285-2335-294a-daf09bc8e983.png)

- Buiild (私的にはFlaskの始動)は**Ctrl+B**で一発なのですが
- Cancel Build(同 Flaskの停止)は**Ctrl+Break**です。私のPCのキーボードには**Breakキーが無い**のでショートカットが入力できません。。。

![image](https://qiita-image-store.s3.amazonaws.com/0/108535/d6a8ccd0-ef45-95ff-44f0-f345cebd60a8.png)

- メニューからの操作ならできますけど、面倒だなあ。



# 解決策 - Sublime Text3のキーのバインディングを変える 

同じようなことで悩んだ方はいろいろおられました
[CTRL + BREAK doesn’t stop Build in Windows 7](https://forum.sublimetext.com/t/ctrl-break-doesnt-stop-build-in-windows-7/6052)

「Preference」-「Key Bindings」で
![image](https://qiita-image-store.s3.amazonaws.com/0/108535/5712b8f4-57a3-cd1c-837e-cb7988ebbb96.png)

右側のパネル[^1]に以下の内容[^2]を記入します。

`{"keys": "ctrl+shift+b"], "command": "exec", "args": {"kill": true} }`

![image](https://qiita-image-store.s3.amazonaws.com/0/108535/e2c829c3-bb62-7ef8-b1ec-bf6443d423f6.png)

[^1]: Default(Windows).Sublime-keymap
[^2]: 釈迦説でしょうが、キーの割り当てはお好きにどうぞ。

すると登録したショートカット・キーが有効になり、Flaskが停止できます。

![image](https://qiita-image-store.s3.amazonaws.com/0/108535/ea46a98e-8c54-ba9d-15e5-cf19a48ec994.png)

ちなみにこのウインドウ自体を消したければWindows7では**「Esc」キー**です。

以上です。
Android Studioでビューの基礎知識を学ぶ_4

#はじめに
授業で学んだ事のメモとして残します。
※添付している画像は全てスクリーンショットとペイントで編集しました。

#デザインモードで部品を追加してみる

###デザインモードでの画面作成手順
デザインモードの画面作成の手順は
1.Paletteから画面部品を選択する
2.選択した画面部品をComponentTreeもしくは、デザインエディタ上にドラッグする
3.ドラッグした部品に対してAttributesで属性を設定する

#デザインモードでボタンを画面に配置する
###string.xmlに文字列の情報を追加する
![14.png](https://qiita-image-store.s3.amazonaws.com/0/249280/1fe50d3b-4eff-34a0-f3cf-85e7642335ce.png)

###レイアウトファイルを編集

![a_8.png](https://qiita-image-store.s3.amazonaws.com/0/249280/8cd1ffbd-436c-ac16-f442-f0646eb0821b.png)
1.PaletteからButtonを選択し、

![15.png](https://qiita-image-store.s3.amazonaws.com/0/249280/600bd708-979f-ed03-7778-9d8cec83c4c1.png)
2.選択したButtonをデザインエディタのEditTextの下までドラッグする

![16.png](https://qiita-image-store.s3.amazonaws.com/0/249280/bef69ea0-7cf5-7bda-9bac-05ffd39e3051.png)
すると、このような画面になる

3.配置したButtonに対してAttributesで以下の属性を設定する
ID　[ btSave ]
layout_width　[ wrap_content ]
layout_height　[ wrap_content ]
![17.png](https://qiita-image-store.s3.amazonaws.com/0/249280/67b6c275-26a7-f277-18ca-da12642151bd.png)

![18.png](https://qiita-image-store.s3.amazonaws.com/0/249280/f64eb1a7-aa6e-579f-9dd2-fb96a2426c48.png)
Text欄の右側にある[ ... ]をクリックすると

![19.png](https://qiita-image-store.s3.amazonaws.com/0/249280/44216154-1398-ad7f-e289-bf1227b5193a.png)
このようなウィンドウが表示される
※この画面では、string.xmlで定義した文字列を選択できるようになっている。

![20.png](https://qiita-image-store.s3.amazonaws.com/0/249280/fe3994f6-a924-6af1-9013-72cac9aee227.png)
ここから、先ほどstring.xmlに追加した[ br_save ]を選択してOKをクリックする

![21.png](https://qiita-image-store.s3.amazonaws.com/0/249280/ad5f0f79-5205-3d58-f6eb-f4d1ef306ee3.png)
textの右の所が@string/bt_saveになっているかを確認

![22.png](https://qiita-image-store.s3.amazonaws.com/0/249280/e17b01e0-4f83-76d6-45c5-77397532b498.png)
アプリを起動すると、保存ボタンが追加されている。

#xmlがどうなったのかを確認してみる
レイアウトエディタをテキストモードに切り替えてみると
![23.png](https://qiita-image-store.s3.amazonaws.com/0/249280/aa996382-c62b-2c52-4510-6676c026e285.png)
Buttonタグが追加されている

このように、デザインモードを使って画面作成は可能だが慣れてくればデザインモードの方が早い場合がある。
しかし、それはあくまでXMLでの記述を知っていればこそなのでまずはXMLでの記述に慣れるべきである。
Android Studioでビューの基礎知識を学ぶ_3

#はじめに
授業で学んだ事のメモとして残します。
※添付している画像は全てスクリーンショットとペイントで編集しました。

#画面部品をもう一つ追加する
###レイアウトファイルを編集する
![9.png](https://qiita-image-store.s3.amazonaws.com/0/249280/cba434ec-baec-f678-1b9a-0a4312ff3557.png)
LinearLayoutの上に、赤い枠の内容を追加する。

![10_1.png](https://qiita-image-store.s3.amazonaws.com/0/249280/d2f0d59f-1962-df0d-b851-aeaa9e0d9edd.png)
起動すると、入力欄が表示される

#入力欄の種類を設定する属性について
[ android:inputType ]
これは、入力欄の種類を追加できる属性。

###代表的なinputType属性
text
　通常の文字列の入力
number
　数値の入力
phone
　電話番号の入力
textEmailAddress
　メールアドレスの入力
textMultiLine
　複数行の入力
textPassword
　パスワードの入力
textUri
　URIの入力

これらの値を正しく指定することによりAndroid端末は入力キーボードの表示を自動で変更してくれるようになる。


![11.png](https://qiita-image-store.s3.amazonaws.com/0/249280/8a21b468-9d16-a848-be66-637466c26cd7.png)
※たとえば、先ほどの入力欄を[ phone ]に変更すると

![12.png](https://qiita-image-store.s3.amazonaws.com/0/249280/c8189a25-f81a-c520-31d1-ac2708e6b0a4.png)
このように、キーボードがテンキーになってくれる。
※EditTextではinputTypeを正しく指定することで入力ミスを減らすことができるだけでなく、ユーザビリティも向上する。

#デザインモードについて

![13.png](https://qiita-image-store.s3.amazonaws.com/0/249280/584d5657-f1b1-b33a-bb9b-522c2952dda0.png)
デザインモードにすると、このような画面になる。

###デザインモードの各領域について
①Palette
　画面部品のリストを表示
②Component Tree
　配置された画面部品の階層構造を表示
③ツールバー
　プレビュー表示の見え方を変更できるツール群
④デザインエディタ
　実際のレイアウト
⑤Attributes
　現在選択されている画面部品の属性

デザインエディタには、二種類の画面が表示されている。左側の画面をデザインビュー、右側の青い画面をブループリントビューと呼ぶ。
デザインビューでは、実際にアプリを実行した画面とほぼ同じものが表示されている。
一方、ブループリントビューでは各画面部品の枠線だけが表示されている。
実際の見え方を確認したい場合はデザインビューで、単なる画面部品の配置だけを確認したい場合ブループリントビューの方がわかりやすい。

#デザインモードのツールバー
デザインモードのツールバーには、下の図のように六種類のボタンが並んでいる。
![a_7.png](https://qiita-image-store.s3.amazonaws.com/0/249280/3ad56bec-819f-483c-4dd4-0292474cc8b9.png)

###ツールバーのボタンについて
①デザイン/ブループリント
　デザインエディタでレイアウトを表示する方法をドロップダウンリストから選択できる
②画面の向き
　プレビュー表示の画面を縦向き、横向きに変更できる
③端末のタイプとサイズ
　プレビュー表示の端末タイプを変更できる
④APIのバージョン
　プレビュー表示のAPIレベルを選択できる
⑤アプリのテーマ
　プレビューに適用するUIテーマを選択できる
⑥言語
　アプリを多言語対応している場合、プレビューで表示する文字列の言語を選択できる
Android Studioでビューの基礎知識を学ぶ_2

#はじめに
授業で学んだ事のメモとして残します。
※添付している画像は全てスクリーンショットとペイントで編集しました。

#画面部品の配置を決めるビューグループ
Androidアプリの画面は、Android　SDKで用意された画面部品を配置することで作成していく。これが[ .xml ]ファイルに画面部品タグを記述することになる。
この画面部品には、大きく分けて[ ビュー ]と[ ビューグループ ]の二種類がある。
ビューグループは各画面部品の配置を決めるもので、[ レイアウト部品 ]とも呼ばれる。

###主なレイアウト部品
LinearLayout
　一番扱いやすいレイアウトで、画面部品を縦、横方向に並べて配置
TableLayout
　表形式で画面部品を配置
GridLayout
　グリッド形式で画面部品を配置
FrameLayout
　画面部品を重ねて配置
RelativeLayout
　画面部品を相対的に配置
ConstraintLayout
　RelativeLayoutと同じように、画面部品を相対的に配置

#画面部品そのものであるビュー
一方、ビューは画面部品そのもので、[ ウィジェット ]とも呼ぶ。

###代表的なビュー
TextView
　文字列の表示
EditText
　テキストボックス
　　※一行や複数行、数字のみの入力制限も可能
Button
　ボタン
RadioButton
　ラジオボタン
CheckBox
　チェックボックス
Spinner
　ドロップダウンリスト
ListView
　リスト表示
SeekBar
　スライダー
RatingBar
　☆でレート値を表現
Switch
　ON、OFFが表現できるスイッチ

#画面構成はタグの組み合わせ
Android画面ではレイアウト部品とビュー部品を階層的に組み合わせて使う。
![a.png](https://qiita-image-store.s3.amazonaws.com/0/249280/02ac9f77-9479-2c5e-0012-2ec54d7da121.png)
実際のソースコードではこのようになる。

![ai.png](https://qiita-image-store.s3.amazonaws.com/0/249280/d3edd126-6ce3-6def-7269-b137c929d554.png)
↑わかりやすく図にすると、こうなる。

レイアウト部分は、そもそも画面部品の配置を決めるものなのでその配下に画面部品を含んで使う。この画面部品がそのままXMLのタグとなり、この階層構造のまま.xmlファイルへ記述される。

![a_2.png](https://qiita-image-store.s3.amazonaws.com/0/249280/6fb7c0bf-1892-6651-66f4-383933bf26a3.png)
↑これは1セットになる

注意するべきことは、レイアウトは要素が必要なので開始タグと終了タグで囲むこと。一方、ビュー部品は子要素を持たないものが多いので属性のみのタグを基本としている。属性のみのタグの場合は、終了タグを書かずタグの右カッコの前にスラッシュを入れる。[ <～/> ]←このように記述する。
具体的にどの画面部品がどのようなタグになるかを理解し、それぞれのタグに適切な属性を記述していけば画面作成は可能になる。

#画面部品でよく使われる属性について
###android:id
画面部品のIDを設定するもの。すべての部品に記述する必要はないが、アクティビティ(Javaプログラム)内でこの画面部品を取り扱う場合にはIDを記述する。
　→[ @+id/... ]
こう記述することで、アクティビティ内で[ ... ]の部分の名前で部品にアクセスできる。
例えば
![a_3.png](https://qiita-image-store.s3.amazonaws.com/0/249280/f3101281-b479-5420-1ed0-e7512663cfc5.png)
と記述すると、[ ![a_4.png](https://qiita-image-store.s3.amazonaws.com/0/249280/341fcd2c-8bc0-636b-e8af-4b9c6521790a.png) ]という属性値なので、bt_clickという名前でアクセスできる。

###android:text
画面部品が表示されるときの文字列を設定する。
※表示する文字列は直接記述するのではなく、string.xmlの方に記述する。
例えば
![a_5.png](https://qiita-image-store.s3.amazonaws.com/0/249280/e84812e7-73a5-261c-f650-faa1dea19248.png)
と記述すると、[ @string/h_msg ]という属性値なので、string.xmlに記述したnameの文字列を表示するということになる。

###android:layout-width、height
widthが部品の幅、heightが高さを表す。
![5_1.png](https://qiita-image-store.s3.amazonaws.com/0/249280/345bc344-33ab-00f0-f6b0-c061bca83ce0.png)
これは、すべての画面部品に記述する必要がある。10dpというように数値を記述してもかまわないが、よく使われるのが
[ wrap_content ]と[ match_parent ]の二つ。
wrap_contentはその部品の表示に必要なサイズに自動調整する。
match_parentは親部品のサイズいっぱいまで拡張する。

###android:layout_margin、padding
[ margin ][ padding ]ともに余白を表す。
marginは部品の外側の余白で、paddingは部品の内側の余白である。
![a_6.png](https://qiita-image-store.s3.amazonaws.com/0/249280/2ae6c360-ed97-b94f-d931-0663ec8967d4.png)
↑個別に余白を指定したい場合、[ marginBottom ]といったように記述する。
Android Studioでビューの基礎知識を学ぶ_1

#はじめに
授業で学んだ事のメモとして残します。
※添付している画像は全てスクリーンショットとペイントで編集しました。

#ラベルを画面に配置する

###strings.xmlに文字列情報を追加する
![1.png](https://qiita-image-store.s3.amazonaws.com/0/249280/95c0f9fe-9d3c-25a9-b153-b46f01da1894.png)
まずは[ res/values/strings.xml ]を開く

![2.png](https://qiita-image-store.s3.amazonaws.com/0/249280/3de6d869-223b-5f35-e83e-72178d5564d4.png)
内容を書き換える

###レイアウトファイルを編集する

![3.png](https://qiita-image-store.s3.amazonaws.com/0/249280/3ac88fe2-529f-3bcd-982e-0fab1bff643a.png)
[ res/layout/activity_view_sample.xml ]を開き、画面下にある[ Text ]を選択してテキストエディタを開く

![4.png](https://qiita-image-store.s3.amazonaws.com/0/249280/bda205e4-5623-21c0-8e93-0e7b44184672.png)
開くと、このような画面が出るので次の画像のように書き換える

![5.png](https://qiita-image-store.s3.amazonaws.com/0/249280/6415b8b7-cdde-e4b2-e78c-893451c4d6ec.png)
※13行目にあるbackgroundは、背景色を設定するもの

###アプリを起動する
![6_0.png](https://qiita-image-store.s3.amazonaws.com/0/249280/2784d58c-ad11-6b8a-6485-77ccc00af4c9.png)
エミュレータを起動し、アプリを実行してみると画像のような画面が表示されれば成功
※今回は各画面部品の配置がわかりやすいように色を付けている。全体の背景はグレー、各部品は白。

#レイアウトを編集するレイアウトエディタ

![7.png](https://qiita-image-store.s3.amazonaws.com/0/249280/da2454ad-e191-70f1-d4b7-cec0e301ffeb.png)
この画面の赤い枠の所をレイアウトエディタという。
画面の下に、[ Design ]と[ Text ]というタブがあり、Textタブが選択された状態の事を[ テキストモード ]と呼び、通常のテキストエディタと同じ。
Androidの画面はXMLで記述するため、テキストモードの状態で表示されている内容が本来の姿になる。
このXMLコードをAndroid Studioが解析してグラフィカルに表示してくれるのが[ Design ]タブが選択された状態で、これをデザインモードと呼ぶ。

![8.png](https://qiita-image-store.s3.amazonaws.com/0/249280/e4125d70-62b0-442f-3592-bcaa4ad96587.png)
↑デザインモード画面

デザインモードは便利だがあくまでXMLの記述をわかりやすくしてくれるだけなので、XMLコードでの画面作成が理解できていない状態のままデザインモードに頼りすぎると、自分でも思ってもみなかった画面を作成してしまうことがある為、注意が必要。


---
長いので次に続きます
Selenium grid で chrome node に option を設定する

# 結論

`goog:chromeOptions` に設定する

```rb
  caps = Selenium::WebDriver::Remote::Capabilities.chrome
  caps['goog:chromeOptions'] = { args: ['--incognito'] }

  Capybara::Selenium::Driver.new(app,
                                 browser: :remote,
                                 desired_capabilities: caps,
                                 url: 'http://localhost:4444/wd/hub')
```

# Selenium Grid での問題
[ここ](https://github.com/SeleniumHQ/docker-selenium)の docker を使って、selenium-hub, node の構成で selenium を実行する時の話。[ここ](https://sites.google.com/a/chromium.org/chromedriver/capabilities)にあるように、`chromeOptions` に 起動オプションを設定しても、node に反映されない

```rb
  caps = Selenium::WebDriver::Remote::Capabilities.chrome
  caps['chromeOptions'] = { args: ['--incognito'] }

  Capybara::Selenium::Driver.new(app,
                                 browser: :remote,
                                 desired_capabilities: caps,
                                 url: 'http://localhost:4444/wd/hub')
```

以下の issue にあるように `chromeOptions`　ではなくて `goog:chromeOptions` に設定すると有効になる。
https://github.com/elgalu/docker-selenium/issues/201#issuecomment-355138247

chromedriver の仕様変更の影響らしい
https://github.com/SeleniumHQ/docker-selenium/issues/674
Angular入門 未経験から1ヶ月でサービス作れるようにする

Angular入門記事です。
毎記事実際に動くコードを見ながらAngularを学んでいきます。

インストールから始め、実際にWebサービスを作りながら、しっかりとAngularの使い方解説し、最終的にはプロとしてAngularのコーディングをしていくことができるレベルの知識が身につくことを目指します。

これを気に、Angularの良さを知っていただけると幸いです。

## Angular入門記事一覧

- [**その1. インストール**](https://qiita.com/seteen/items/87b6caf746a65b0397ee)
    - Angularのインストール
        - 実際にAngularをインストールしてプロジェクトを作ります
    - 起動して動作確認
        - 起動して、Webページを表示してみます
- [**その2. ディレクトリ構造とコンポーネントの基礎**](https://qiita.com/seteen/items/ef41c321bff47d66a443)
    - Angularプロジェクトのディレクトリ構成
        - AngularCLIにより生成されるディレクトリ、ファイルの説明を行います
    - コンポーネントの基礎
        - コンポーネントを少し修正して、Angularの開発をどう進めていくのかという初歩を解説します
- [**その3. ルーティング基礎**](https://qiita.com/seteen/items/732bacf604ab8d18a84c)
    - SCSSの有効化
        - プロジェクトのCSSをSCSSに変更します
    - ルーティング基礎
        - 新しくページを作ってページ間の遷移を試します
- [**その4. 　モデルとループと分岐と**](https://qiita.com/seteen/items/445a550e27d9ff76eaec)
    - データ管理基礎（モデルクラスの作成）
    - HTMLでの繰り返し処理（ `*ngFor` ）
    - HTMLでの分岐処理( `*ngIf` )
- [**その5. サービスとTypescriptの基礎**](https://qiita.com/seteen/items/6fcff31179fb9cf0e14d)
    - Typescript基礎
    - データ管理基礎2 ( Angularの `Service` )
- [**その6. ngModelを使ったフォーム**](https://qiita.com/seteen/items/4bc7dbd9b52ca20de63e)
    - HTMLのフォーム要素とTypescriptの連携
    - クリックイベント
    - フォームの送信（submitイベント）
- [**その6.5. URLパラメータの利用とここまで学んだことの実践**](https://qiita.com/seteen/items/7df296c342cdd3045717)
    - URL要素からの値の取得方法 ( `ActivatedRoute` )
    - これまでの内容の実践
- [**その7. Angularのフォーム2 (Reactive foms)**](https://qiita.com/seteen/items/6cf6772aa2b0bfe858b2)
    - ReactiveFormの基礎
    - FormGroup, FormControl
- [**その8. バリデーション**](https://qiita.com/seteen/items/d1525383aaf37322b107)
    - バリデーションの使い方
    - Angularのビルトインバリデーションの種類
- [**その9. カスタムバリデーション**](https://qiita.com/seteen/items/d9aad2edf6c795a135a7)
    - カスタムバリデーションの作り方
    - カスタムバリデーションのディレクティブの作り方
- [**その10. Firebaseを使ったAPI通信1**](https://qiita.com/seteen/items/aa62787d3d47033d3b4c)
    - FirebaseライブラリのAngularプロジェクトへの追加（セットアップ）
    - FirebaseのREST APIの仕様
    - AngularにおけるHTTPのGETメソッド
- [**その11. Firebaseを使ったAPI通信2**](https://qiita.com/seteen/items/6c09a3e342201c6354af)
    - Firebaseへのデータ追加
    - AngularのPOSTメソッド
- [**その12. Firebaseを使ったAPI通信3**](https://qiita.com/seteen/items/7d7028ac4ab8bb754662)
    - Firebaseを使ったデータの更新、削除
    - AngularのPATCH, DELETEメソッド

全18記事を予定しています。

## コメントなど

この記事を通してAngularの良さを皆さんに知っていただきたいと思っているので、わかりにくい部分があったり、もっとこういう説明を追加してほしい、などありましたらコメントや [Twitter](https://twitter.com/seteentw) でDMしていただけると嬉しいです。
Unity 2018で.javaもビルドされるようになった話

Unity2018.2のリリースノートを見ていて
他サイトとかであんまり紹介されてなかったけど便利だなと思った機能

![image.png](https://qiita-image-store.s3.amazonaws.com/0/275100/61ed7fc0-9604-a60b-5e4c-399d663f57c1.png)
Android：UnityプロジェクトでプラグインとしてJavaソースファイルを使用するためのサポートが追加されました。 
これらのファイルはコンパイルされ、APKに組み込まれます。

iOS用プラグインみたいにソースコード入れておけば.aar、.jarを一々作らなくてもすみますよ。

ってことですかね。

地味にパッケージ名の設定とかが面倒で基盤化するのが面倒だったんだけど
これのおかげでわりと気楽に(?)できるようになるかな

##ためしてガッテン
一度適当にAndroid向けでExportする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/275100/1d767971-5bd3-4c47-57d4-5cc361cf0aa0.png)

Assets/Plugins/Androidにエクスポートしたフォルダのsrc/main/AndroidManifest.xmlをコピペする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/275100/a27027ba-a7a0-a5ad-2a08-5c5753d5578e.png)


同一フォルダに
https://docs.unity3d.com/Manual/AndroidUnityPlayerActivity.html
のと同じもの作っとく

ぶっちゃけそれだけだと味気ないのでトーストでも入れとく

```OverrideExample.java:
package 【自プロのパッケージ名】;
import com.unity3d.player.UnityPlayerActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast; ←追加

public class OverrideExample extends UnityPlayerActivity {
  protected void onCreate(Bundle savedInstanceState) {
    // call UnityPlayerActivity.onCreate()
    super.onCreate(savedInstanceState);
    // print debug message to logcat
    Log.d("OverrideActivity", "onCreate called!");
  }
  public void onBackPressed()
  {
    Toast.makeText(this, "テスト", Toast.LENGTH_LONG).show();　←追加
  }
}
```
起動時にログ出力、バックキーでトースト表示するだけ。

配置が終わったらAndroidManifest.xmlを開く
5行目あたりに <activity android:label="@string/app_name"～～ってのがあってその一番うしろに

```
android:name="【パッケ名】.UnityPlayerActivity">
```
というのがあるのでそこを

```
android:name=".OverrideExample">
```
に変更
OverrideExampleはjavaのクラス名

そして普通にビルドする

実機に転送してバックキーを押すとトースト表示さる！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/275100/fc1365dd-bc76-ba87-091a-a71a92c28201.png)


ちなみに
PluginsのフォルダがAssets直下じゃなかったり
Manifestの書式変だったりするとちゃんと動かないので注意
あと地味にjavaコードのpackage のところを間違ってたりするのでそこも注意

##おわり
結局ソースにpackage名を入れてあげないといけないので完全に基盤として分離は難しそうだね
ただ　エディタ拡張でその部分だけパッケージ名に差し替えてからビルドするようにすれば問題はなさそう

jar作るの面倒だったからこれは本当に助かる機能。
npmプロジェクトでBootstrapのインストールがハマっていたエラーと解決方法

```console
 ERROR  Failed to compile with 1 errors                                 14:26:27

 error  in ./node_modules/bootstrap/dist/css/bootstrap.css

Module build failed: BrowserslistError: Unknown browser query `dead`
    at /Users/hogehoge/workspace/test/node_modules/browserslist/index.js:164:11
```


Bootstrap Vueが入らない！なんで？っていうツイートを先日見かけて、
そんなに難しいところあったっけ？と自分も [Getting Started \- BootstrapVue](https://bootstrap-vue.js.org/docs) を試したところ、私もハマりました。
解決方法を調べて記事にしたためている間に直ってしまったようですがメモしておきます。

## TL;DR
今ならnpm updateすると直ると思います


## 原因
問題が発生していたのは、2018年5月1日(Bootstrap v4.1.1)〜2018年7月25日(Bootstrap v4.1.3)の間。

ちなみにこのケースでハマるのは、下記の条件を満たすプロジェクトみたいです。
1.`vue init webpack proj_name` で作ったプロジェクト
2.上記期間に `npm i bootstrap-vue` している

他にも、Vue以外のプロジェクトでハマるのは、現象的に下記のケースかなと。
1.npmで管理している
2.browserlistをprojectで使っている
3.上記期間に `npm i bootstrap` している


[Unknown browser query \`dead\` · Issue \#26876 · twbs/bootstrap](https://github.com/twbs/bootstrap/issues/26876)
[Release v4\.1\.3 · twbs/bootstrap](https://github.com/twbs/bootstrap/releases/tag/v4.1.3)

- 4.1.3
 - Fixed: Moved the browserslist config from our package.json to a separate file to avoid unintended inherited browser settings across npm projects.

とのことですので、Bootstrapのbrowserslistの設定と自分のプロジェクトの設定がコンフリクトすると起きるみたいです。


## 対策1
差し支えなければ `npm update` するとパッケージのバージョンが全部あたらしくなるので直るようです。

## 対策2
`npm update` すると差し支えがある場合は、productionビルド以外のcssのminimizeを止めれば大丈夫とのこと。

Vueのwebpackテンプレートで作ったプロジェクトだとこんな感じで、
css-loader と postcss-loader の minimize を止めてあげればいいみたいです。

```build/util.js
（前略 Line:18 くらいから）
  const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production', //←これを足す
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production', //←これを足す
      sourceMap: options.sourceMap
    }
  }

```

### 参考
- [BrowserslistError: Unknown browser query \`dead\` の対応 \- Qiita](https://qiita.com/himrock922/items/cd6900878eaecbb09709)
- [Unknown browser query \`dead\` · Issue \#26876 · twbs/bootstrap](https://github.com/twbs/bootstrap/issues/26876)
- [Module build failed: BrowserslistError: Unknown browser query \`dead\` · Issue \#266 · browserslist/browserslist](https://github.com/browserslist/browserslist/issues/266)
ある日突然Dockもアプリケーションフォルダも「？」だらけになったら

## 概要
なんで？Dockがハテナだらけなんやが？
設定すらハテナで起動できないよ！
アプリケーションフォルダの中も全滅やんけ！

最近こんな状況になりました。
別ユーザー作ってログインしてみると普通に動くというのもポイントです。

## 対処
* /var/foldersのzz以外削除  
権限とかめんどいので、サクッと行うためにリカバリモードのターミナルから行いました。

## 終わってみて
OSXのアップデートのタイミングと重なったので、何かのファイルを更新できなかったとか？
そういうことかな？と思いますが、リカバリも考えましたが設定もいろいろあってめんどくさかったので、
復活できてよかったです。
【メモ】JS依存なしのオリジナルデザインセレクトメニュー

いままでセレクトメニューのオリジナルデザインはcustomSelect.jsを使っておりましたが、Railsのバリデーションでちょいちょい問題がでたりしたので、いっそのことJSに依存しない方法に変えます（いまさらｗ）

サンプルコードは以下

```HTML:sample.html
<div class="selectOuterCase">
  <select id='test'>
    <option>選択してください</option>
    <option>大変興味がある大変興味がある大変興味がある</option>
    <option>少し興味がある</option>
    <option>興味なし</option>
  </select>
</div>

```

```CSS:sample.scss
.selectOuterCase{
  border: 1px solid #DDD;
  border-radius: 6px;
  position: relative;
  select{
    width: 100%;
    font-size: 16px;
    color: #333;
    background-color: inherit;
    border: none;
    border-radius: 6px;
    padding: 8px 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
  }
  &:after{
    height: 100%;
    font-size: 20px;
    color: #AAA;
    box-sizing: border-box;
    content: '▼';
    background-color: #FFF;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 6px 5px 0;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
  }
}
```

角丸や文字サイズ、▼の大きさ、クリアランス等は適宜調整して使う感じ。

確認環境
Firefox Quantum 61.0.1
iPhone5s iOS10.3
Google Chrome 67.0.3396.99
Edge 41.16299.248.0 win10（virtualbox）
【AWSでエラー対処】CodeDeployでaws deploy pushしたとき、ZIP does not support timestamps before 1980となってpushできなかったときの対処法

## 概要

AWS CLIで

```
aws deploy push
```

を実行すると、

```
ZIP does not support timestamps before 1980
```

と出力されて期待したけっけが得られないときの対処法。

## 原因

ファイルのタイムスタンプがzipでサポート対象外の1980よりも以前のファイルが存在しているために起きている。

## 対処手順

該当のディレクトリで再帰的にファイルのタイムスタンプを更新する。

```
find . | xargs touch
```

※この方法はタイムスタンプが更新されても構わない場合のみ行う

これで `aws deploy push` した際もエラーが出なくなる。

## 検証環境

```
macOS Sierra version 10.12.6
```
Watson Studioで類似画像検索(2)

[前回](https://qiita.com/schiyoda/items/8ae1f84cccf68bd5a728)の記事では事前学習済みのモデルを使用した類似画像検索を実装しました。今回はこのモデルをさらに学習し、類似検索の精度を高めることを試してみます。前回同様以下リンク先の内容を参考にしています。

https://jifuzhao.github.io/2018/04/13/landmark.html
https://github.com/JifuZhao/Landmark-Recognition

# 類似度学習
類似度学習に上記リンク先でも紹介されている triplet loss を使用した方法を使用します。triplet には anchor image(a)、positive image(p)、nagative image(n) を含め、これが与えられた時に、n に比べて p がより a に類似している、という結果になることを目指します。下図ように a、p、q を各々同じCNNに入力した際に、出力される特徴ベクトル f(a)、f(p)、f(n) から triplet loss （損失） を算出し、これが小さくなるようにネットワークを学習していきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/30267a0e-353d-4d32-1739-1728b3f14e23.png)


# 3.1 CNNの学習
前回使用した Inception V3 をベースに、上記の形のネットワークを構築し、triplet lossによる学習を行います。以下のpython のコードをダウンロードして zip に圧縮します。

https://raw.githubusercontent.com/schiyoda/ImageSimilaritySearch/master/3.1_trainInceptionV3Triplet.py

[こちら](https://qiita.com/schiyoda/items/8ae1f84cccf68bd5a728#21-%E7%89%B9%E5%BE%B4%E3%83%99%E3%82%AF%E3%83%88%E3%83%AB%E3%81%AE%E6%8A%BD%E5%87%BA)に記載のとおり、Experimentを作成しネットワークを学習します。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/6b63b84a-7723-4ada-a4e1-8bfe34d13d7c.png)

## 3.1.1 historyの表示(Optional)
以下のURLからNotebookを作成します。
https://github.com/schiyoda/ImageSimilaritySearch/blob/master/3.1.1_VisualizeTrain.ipynb

Notebookを実行すると、学習のhistoryが参照可能です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/c31a4199-2a8b-426f-26c0-a169ac9b0d04.png)

# 3.2 特徴ベクトルの抽出
以下のpython のコードをダウンロードして zip に圧縮します。

https://raw.githubusercontent.com/schiyoda/ImageSimilaritySearch/master/3.2_extractFeatureInceptionV3Triplet0.2.py

[こちら](https://qiita.com/schiyoda/items/8ae1f84cccf68bd5a728#21-%E7%89%B9%E5%BE%B4%E3%83%99%E3%82%AF%E3%83%88%E3%83%AB%E3%81%AE%E6%8A%BD%E5%87%BA)に記載のとおり、Experimentを作成し特徴ベクトルを抽出します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/e3c6376f-63e1-123e-097a-99f2dcc3c463.png)

# 3.3 画像類似度の算出
抽出された各画像の特徴ベクトルから、画像間の類似度を算出します。
以下のURLから新規Notebookを作成します。

https://github.com/schiyoda/ImageSimilaritySearch/blob/master/3.3_predictInceptionV3Triplet0.2.ipynb

セルを全て実行すると以下のように Accuracy が表示され、[前回](https://qiita.com/schiyoda/items/8ae1f84cccf68bd5a728)よりも改善されていることが分かります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/65f6b76c-da15-4159-a7ee-3b4ae259a4f7.png)


検索された画像は以下の通りです。一番最後のQueryとかは学習の結果、精度が上がっているように思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/9847ab8d-8143-7bd8-3665-c4fa1f0093d1.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/fdf2ac3d-f69b-d62f-8a00-1f54495447a2.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/450d852a-339f-dfd7-e0c4-6f52ecbfeeba.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/ec4c04f8-8032-1fb5-1d8f-43dfe15eff36.png)
PingFederateを使ってSAML認証対応してみた

PingFederateと連携して社内向けのコンテンツにSSOログイン機能をつけたい。

### そもそもSAMLとは何なのか。

SAMLは、`Security　Assertion Markup Language`の略で、認証、属性、権限の認可をXMLのフォーマットにて定義し、これらの情報を送信する規約のことです。
今回やりたいことのシングルサインオンや、ID連携等によく使用されます。

わかりやすい説明がここに書いてありました。
https://www.slideshare.net/shinichitomita/saml-34672223

###　シングルサインオンで利用する場合
シングルサインオンは、ユーザーが一度認証を受けることで、連携された他の様々なウェブサービスをその認証を使用して、利用出来る様になります。

Slack,Box,Tableau,Cybozu等の有名サービスでもこれを利用することが可能なようです。

Slack: https://get.slack.help/hc/en-us/articles/203772216-SAML-single-sign-on
Box: https://www.dropbox.com/ja/guide/admin/security/configure-single-sign-on
Tableau: https://onlinehelp.tableau.com/current/online/ja-jp/saml_config_pingone.htm
Cybozu: https://jp.cybozu.help/general/ja/admin/list_externalservices/list_saml/saml_settings.html

### いざ実装するとなると出てくる登場人物

- SP(サービスプロバイダー)
- Idp(IDプロバイダー)
- ACS(アサーションコンシューマサービス)
- ユーザー

図にするとこんな感じ
![スクリーンショット 2018-07-25 14.09.22.png](https://qiita-image-store.s3.amazonaws.com/0/74698/15fe7932-33a2-ae54-25fb-ef5e2068c878.png)


Idp、SPに対して相互に必要となる設定が見えてくると思います。
ACSが行う主な処理は、下記となります。
- Idpからデータを受け取る（XML）
- XMLをparse
- 署名の検証
- Assertionの有効性の確認
- 属性の取り出し

自作はセキュリティホールに繋がるのでおすすめしないとの事。
https://jvn.jp/vu/JVNVU98536678/
https://www.kb.cert.org/vuls/id/475445


### Saml認証のためのライブラリ
- go: [crewjam/saml](https://github.com/crewjam/saml)
- Python: [onelogin/python-saml](https://github.com/onelogin/python-saml)
- Ruby: [onelogin/ruby-saml](https://github.com/onelogin/ruby-saml)
- PHP: [onelogin/php-saml](https://github.com/onelogin/php-saml)

###　今回使ったもの
- [laravel-saml2](https://github.com/aacotroneo/laravel-saml2)

laravel-saml2は、saml認証を行うためのlaravelパッケージです。
設定箇所がまとまっててわかりやすかったので採用しました。
セットアップに関しては、READMEや、下記の記事を参考にしました。
日本語で書いてあります。
[Laravel5でSAMLシングルサインオンする](https://qiita.com/kumapo0313/items/b32daf108d250555382f)

### 設定
saml2_settings.phpの設定では以下の項目を設定します。

- sp
    - NameIdFormat: `urn:oasis:names:tc:SAML:2.0:nameid-format:persistent` <- 固定
    - x509cert:　`証明書文字列` idp側から出力してもらうmetadata参照
    - entityId: `任意の文字列` <-適当でおkだけど後でidp側に登録する
    - assertionConsumerService: `localhost:8000/saml2/acs`　<-　認証後のリダイレクト先のURL(laravel-saml2の場合はこのパスで作ってくれる)。これも後でidpに登録
- idp
    - entityId: idp側から出力してもらうmetadata参照
    - singleSignOnService: idp側から出力してもらうmetadata参照

###　テスト
テストして終わりです。

###　まとめ
Idpは、ActiveDirectoryと連携して動いてたりするので、社畜プログラマーが気軽に触れない感あります。そのあたりは情シスが握ってたりするのですが、担当者がわかってなかったりするケースもあるので、開発者側も、仕組み等を把握しておくとスムーズに色々やれる気がします。

### 参考

wiki: https://ja.wikipedia.org/wiki/Security_Assertion_Markup_Language
Ping KnowledgeBase: https://ping.force.com/Support/PingIdentityKnowledgeHome
pyinstallerでアプリケーションを配布しようとしたらエラー吐かれた

# 何がおきたか
python + wxPythonで作成したGUIソフトウェアをpyinstallerでappファイル化して配布することを試みた。
このappは別のディレクトリから画像やcsvファイルを参照する仕組みになっていたのだが、一度web上にあげたappをダウンロードして起動しようとするとこれらのファイルを参照できず、実行できなかった。

# 原因
pyinstallerから配布用ソフトウェアをアップロードしていたGoogle driveまで色々調べたが、原因はAppTranslocationだった。
AppTranslocationはYosemiteから導入されたセキュリティツールであり、web上の未承認の場所からダウンロードしたソフトを起動すると、AppTranslocationが働き、パスが正常に取れなくなるようだ。実際にパスを表示してみると、
/private/var/folders/\_q/謎の文字列/T/AppTranslocation/謎の文字列/d
となっていた。パスが正確に取れないために、相対パスで指定していた画像やcsvファイルを参照できなかったわけである。

# 解決法
## 簡単な解決法
アプリケーションを一旦別のディレクトリに移動してから元のディレクトリに戻すと治ります。~~なんだそれ。~~

## 厳密な解決法
調査が進んだらまとめます（進んでいません）
LaravelでLOAD DATA LOCAL INFILEできない

[LaravelでDB::statementを実行するとエラーが出る](https://qiita.com/hondy12345/items/4ebf7130bef833d0a3ea)の続きのようなもの

# 事象
LaravelのDB::statementをつかって[LOAD DATA LOCAL INFILE](https://dev.mysql.com/doc/refman/5.6/ja/load-data.html)しようとすると、以下のようなエラーが出る

```shell
$ php artisan command:hogehoge
PDOStatement::execute(): LOAD DATA LOCAL INFILE forbidden (SQL: LOAD DATA CONCURRENT LOCAL INFILE ...
```

# 解決方法
これも設定漏れ

/usr/local/etc/my.cnfはMacの場合。
my.cnfの場所の確認は

```shell
$ mysql --help | grep my.cnf
```

とかでやってくださいー

```conf:/usr/local/etc/my.cnf
[server]
local_infile=true
```

```php:config/database.php
        'mysql' => [
            'driver' => 'mysql',
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'strict' => true,
            'engine' => null,
            'options' => [
                PDO::ATTR_EMULATE_PREPARES => true,
                PDO::MYSQL_ATTR_LOCAL_INFILE => true,
            ],
        ],
```
Arria 10 SoC のベアメタル開発におけるハマりポイント

# はじめに
Arria 10 SoC を使用して Linux ではなく OSレス(ベアメタル)で ARM の評価がしたい、もしくは触ってみたけどよくわからんって人向けにとりあえずサンプルのソフトウェアを動かすところまでを紹介します。
使ったツールは v18.0 です。

# 提供されているサンプルを動かしてみよう
ではさっそく DS-5 を利用して提供されているサンプルを動かしてみましょう。
サンプルはツールのインストール・ディレクトリ(C:\intelFPGA\18.0\embedded\examples\software)とか
ここ([リンク](https://www.altera.com/support/support-resources/design-examples.html#soc-design-examples))とかにあります。

ここでは Altera-SoCFPGA-HardwareLib-Timer-A10-GNU.tar.gz を動かしてみましょう。
DS-5 のインポートメニューで上記を取り込んで実行してみます。

なんかエラーが出る。

```
ERROR(CMD127): そのようなファイルまたはディレクトリはありません: <PATH>\Altera-SoCFPGA-HardwareLib-Timer-A10-GNU\debug-hosted.ds
```

エラーを見ると debug-hosted.ds が無いと言っているがプロジェクトには存在している。単純にファイルを開こうとしてもダメでどうやら権限に問題がある模様。 Makefike.inc を見てみると debug-a10.ds を使用しているだけだったのでこっちを使うことに。

気を取り直してもう一度実行。先ほどのエラーは出なくなったが今度は別のエラーが。

```
ERROR(CMD360): #（<PATH>\Altera-SoCFPGA-HardwareLib-Timer-A10-GNU\debug-a10.ds）:36 次の実行中: wait 30s
! 停止したタイムアウトを待機しています
ERROR(CMD656): スクリプトの実行中にエラーが発生したため、スクリプト <PATH>\Altera-SoCFPGA-HardwareLib-Timer-A10-GNU\debug-a10.ds の完了に失敗しました
```

サンプルなのに動かない。なぜ?　
というわけで、そもそもの仕組みの理解から始めることになりました。トホホ。

# SDRAM コントローラは FPGA 側にある
色々調べてみると原因はここにありました。Arria 10 SoC は SDRAM コントローラが FPGA 側にいるので ARM だけ動かす場合にも FPGA をコンフィグしてあげる必要があるとのこと。

このためツールのインストールディレクトリに格納されている sof ファイルを使うことにしました。
対象のファイルはこれです。
C:\intelFPGA\18.0\embedded\examples\hardware\a10_soc_devkit_ghrd\output_files\ghrd_10as066n2.sof

Quartus を立ち上げるのが面倒なので Embedded_Command_Shell から以下のコマンドでコンフィグします。

```
$ nios2-configure-sof ghrd_10as066n2.sof
```

# 再び DS-5 のサンプルプロジェクトを動かしてみる
さて、ようやくこれで準備が整いました。
が、動かない。と思ってボードをよく見るとなんと DDR が実装されていませんでした。灯台下暗し。

# 再々度 DS-5 のサンプルプロジェクトを動かしてみる
DDR カード実装後、サンプルを実行してみると。(FPGA をコンフィグすることをお忘れなく)

![ds5.png](https://qiita-image-store.s3.amazonaws.com/0/265744/f6e64fb8-743e-1bd3-ca65-6488b6a653ac.png)

はい。この通り動きました。これでようやくソフトウェアの開発が始められます。
今回ハマったおかげで Early Release IO という機能があることもわかりました。こちらについては別途機会があれば紹介します。

この記事が皆さんのお役に立てたのであれば幸いです。

#おまけ
clean するとエラーが。

```
make: *** [Makefile.inc:135: clean] Error 127
```
rm コマンドがこうなっているようなので

```
RM := cs-rm -rf
```

いつものコマンドに変更

```
RM := rm -rf
```

無事エラーがなくなりましたとさ。
Rvizエラー：For frame [ ]: Fixed Frame [map] does not exist

自作したIMUパッケージを使用して、sensor_msgs/Imuトピックを送信しRviz上で確認しようとしたところ以下のエラーが出た。
![Screenshot 2018-07-25 13:41:46.png](https://qiita-image-store.s3.amazonaws.com/0/213130/5cb34da9-bd1d-2ccd-1f2a-99748ab190f1.png)
# 解決策
terminalを開いて、`static_transform_publisher`を起動することで解決できる。

```bash
$ rosrun tf static_transform_publisher 0 0 0 0 0 0 map frame 100

# 書式はstatic_transform_publisher x y z yaw pitch roll frame_id child_frame_id period_in_ms
# period_in_msは100が推奨されている。
```



# 参考
[static_transform_publisher](http://wiki.ros.org/tf#static_transform_publisher)
[参考](http://answers.ros.org/question/195962/rviz-fixed-frame-world-does-not-exist/)