OmniAICreator/Qiita-1.07M huggingface dataset:
Ignite UI for Angular の動的テーマ変更の方法

2018/12/25(Tue) 時点の情報に基づいています
igniteui-angular@7.1.1

前回、[Ignite UI for Angular のライト/ダークテーマの設定方法](https://qiita.com/tkiryu/items/d41c2b8124a194bf6a66)ではテーマを静的に設定する方法をご紹介しました。

今回は、動的にテーマを設定する方法のご紹介です。

[Light と Dark テーマ](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/themes/global-theme.html#light-%E3%81%A8-dark-%E3%83%86%E3%83%BC%E3%83%9E)にも説明はあるのですが、ここではより具体的に、より簡潔に説明したいと思います。

## テーマ切り替えの実装方法
ライトテーマ用のクラス `light-theme` を定義して `igx-light-theme()` をネストします。
ダークテーマ用のクラス `dark-theme` を定義して`igx-dark-theme()` をネストします。

```scss:styles.scss
@import "~igniteui-angular/lib/core/styles/themes/index";

@include igx-core();

body.light-theme {
    @include igx-light-theme($default-palette);
}

body.dark-theme {
    background-color: #333;
    color: #fff;

    @include igx-dark-theme($default-palette);
}
```

## テーマ切り替え用UIの実装方法
ライトテーマ、ダークテーマを切り替えられるように、UIを用意します。使用するコンポーネントはなんでも構いません。例えばここでは `select` タグを使用して以下の用に実装します。

```html:src/app.component.html
<select #select [value]="theme" (change)="themeChange(select.value)">
  <option value="light-theme">light</option>
  <option value="dark-theme">dark</option>
</select>
```

TypeScript側では、バインドする `theme` プロパティ、および、`themeChange` イベントハンドラを定義します。

```typescript:src/app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  theme = 'light-theme'; // デフォルトではライトテーマ

  ngOnInit(): void {
    // AppComponent の初期化のタイミングで body タグに、テーマ用クラスを付与する
    document.body.classList.add(this.theme);
  }

  // select タグの変更に応じて body タグのテーマ用クラスを変更する
  themeChange(newTheme: string): void {
    // 現在のテーマを削除
    document.body.classList.remove(this.theme);
    // 新たに洗濯されたテーマを付与
    document.body.classList.add(newTheme);
    this.theme = newTheme;
  }
```
わざわざ body タグにテーマクラスを付与しているところがポイントです。`@HostBinding` では　`app-root` タグよりも上位の body タグにCSSクラスを付与する方法がありません。`app-root` タグにテーマ用クラスを付与した場合、`app-root` タグで覆われていない部分は、テーマが切り替わらないので、body タグに付与することで、画面全体をテーマ切り替え対象としています。

## 実行結果
[demo](https://igx-grid-theme-change.stackblitz.io)
### ライトテーマ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/70618/8b4a44aa-9630-fc77-2bf8-5203687f12a6.png)

### ダークテーマ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/70618/128a0ec3-80df-9595-42a9-88c91a2613de.png)

## まとめ
Ignite UI for Angular のコンポーネントは、`igx-light-theme()`、`igx-dark-theme()` が用意されているおかげで、非常に簡単に、全体のテーマ切り替えを行うことができるようになっています。

[カスタムパレット](https://qiita.com/tkiryu/items/d41c2b8124a194bf6a66#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%91%E3%83%AC%E3%83%83%E3%83%88)を用意すれば、ライト、ダークだけでなく、さまざまなテーマを用意することも可能です。


## Ignite UI for Angular が気になった方はこちら
デモサイトで様々なサンプルを試すことができますので色々試してみてください！
https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid_virtualization.html
sklearnのエラー: A column-vector y was passed when a 1d array was expected

# エラー内容
```python
clf = GridSearchCV(RandomForestClassifier(),param, cv=kfold_cv,verbose=3)
clf.fit(x_train,y_train)
```

scikitlearnで、Gridsearchを使用したときに、以下のエラーが発生した

```python
A column-vector y was passed when a 1d array was expected
```

# 解決法
以下のように修正する


```python
clf.fit(x_train,y_train.values.ravel())
```


取り急ぎのメモということで。
sbt-git と sbt-buildinfo を使って、アプリケーションから git の commit hash を取得

今日のアドカレ書いてないのに、そのものずばりなエントリがなさそうだったので記録

- Scala 2.12.7
- sbt 1.2.6

```plugins.sbt
addSbtPlugin("com.typesafe.sbt" % "sbt-git" % "1.0.0")
addSbtPlugin("com.eed3si9n" % "sbt-buildinfo" % "0.7.0")
```

- [sbt-git](https://github.com/sbt/sbt-git)
- [sbt-buildinfo](https://github.com/sbt/sbt-buildinfo)

```build.sbt
lazy val root = (project in file("."))
  .enablePlugins(BuildInfoPlugin, GitPlugin)
  .settings(
    buildInfoKeys := Seq[BuildInfoKey](name, version, scalaVersion, sbtVersion,
      "gitSha" -> git.gitHeadCommit.value.getOrElse(""),
      "gitBranch" -> git.gitCurrentBranch.value
    ),
    buildInfoPackage := "hoge"
  )
```
ビルドすると `hoge.BuildInfo`ができるのでアプリケーションから参照できる

```Main.scala
import hoge.BuildInfo

object Main {
  def main(args: Array[String]) {
    println(s"gitBranch: ${BuildInfo.gitBranch}, gitSha: ${BuildInfo.gitSha}")
  }
}
```

古えの時代には、sbt Taskでgitコマンドを叩く荒業をやっていたこともあった

あの頃の私は、もう戻らない
FlaskでReactアプリを走らせる

最近AWSのPython開発環境であるChaliceを触っていて、少しFlaskに興味がわいたので試してみました。お手軽にWebサービスが作れるらしい。とりあえずReactアプリを動作させることだけに目標を絞りました。



#１．Reactアプリ

過去記事「[React Reduxの概要を理解する](https://qiita.com/sand/items/6d02fa7640dd1589ee3d)」で作成したTodoアプリをそのまま流用します。

```
npm run build 
```

buildディレクトリには、build/index.htmlやbuild/static/js/*などdeployに必要なファイルが揃っています。後でbuildを丸ごとflaskディレクトリ（後で作成）にコピーします。



```
cp -r build  flaskディレクトリ
```




#２．Flaskの設定

venvを設定して、flaskをインストールします。venv は virtualenv が Python 3.3 から標準機能として取り込まれたものです。

```
mkdir flask
python -m venv flask
source ./flask/bin/activate
cd flask
pip install flask
```

プロジェクトディレクトリを作成します。

```
mkdir flask-test   # flaskディレクトリを作成
cd flask-test
```

以下がソースです。static_folderやtemplate_folderの指定以外は特に注意する必要はありません。

```python:server.py
# server.py
from flask import Flask, render_template

app = Flask(__name__, static_folder="./build/static", template_folder="./build")

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == "__main__":
    app.debug = True
    app.run(host='0.0.0.0', port=8000)
```


この段階で、「１．Reactアプリ」で作成したbuildを、このディレクトリに、コピーします。

サーバを起動します。

```
python server.py
```


これで ルートパス "/"にアクセスすると、build/index.htmlが読み込まれ、Reactアプリが立ち上がります。

想像したように動作したので、あまりドキュメントを読む必要はなかったですね。


#３．WARNING対策

サーバ起動時に、以下のようなWarningが出たので対策します。

```
WARNING: Do not use the development server in a production environment.
```

環境をdevelopmentに変更します。

```:.flaskenv
FLASK_APP=server.py
FLASK_ENV=development
```

必要なライブラリをインストールします。

```
pip install python-dotenv
```

サーバを立ち上げると、Warningが出ないことがわかります。

```
python server.py
```

今回は以上です。
IBM Cloud PaaS でwordpressを立てて苦労したよもや話

この記事は [IBM Cloud Advent Calendar 2018](https://qiita.com/advent-calendar/2018/ibmcloud) 19日目の記事です。

※※※※※※※※※
時間が足りないので、まずは外枠だけで載せます！
※※※※※※※※※
#はじめに
Wordpressをibmcloudへデプロイする方法がいろいろネットにも転がっているのですが、
現時点でどうか、実際に運用するのにどうしたらよいか、という視点で実際に構築をしてみました。

BMXUGの2018年冬のイベント [IBM Cloud Community Summit 2018イベントWeb](https://bmxug2018winter.mybluemix.net)の中の人をやってみて、いろいろ壁にぶち当たり、くじけた記録です。
実際にwordpressを運用するだけ、を目指すならばこの記事がキット役にたってくれるに違いないです。

#おしながき
## wordpressをIBMCloudのPaaS CloudFoundry上に立てる
## PaaS上のwordpressインスタンスで考えなければならないこと
## 越えられない壁

#おわりに
advent calender・・・年末のバタバタでまだ書き終えてないですが、。一旦25日なので公開です。
KibanaのSpaces移行

#はじめに
Kibana6.5より、Spacesという単位で管理できるようになった
これによって、ごちゃごちゃしていたKibanaが少しは管理しやすくなるのではないかと試してみた

[Managing spaces](https://www.elastic.co/guide/en/kibana/6.x/spaces-managing.html)

Kibana 7.0 alpha2で実施する（6.5.0ではなく申し訳ない）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/159184/0a032c9d-8359-19e2-26f4-fe574a58f70e.png)

# Space作成
Spaceを作成する「Create a space」ボタンを実行し
下記のように設定を行い「Create space」を実行する

![image.png](https://qiita-image-store.s3.amazonaws.com/0/159184/5fc71e78-8380-4a8c-0462-f761d60692d2.png)

完成
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159184/cec75ab4-92e1-a50f-411a-dadfaebbb7f7.png)

# Space変更

作成したTestスペースをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159184/2733766c-277c-17e3-cb2b-8d95f45941f1.png)

変更完了
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159184/99aec34f-07c3-908d-9c5d-a43e72a2c49d.png)

# ダッシュボードやインデックスパターンの移動
「Management」→　「Kibana・Saved Objects」

対象を選択して、「Export」を実行
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159184/eaa6481a-7ddd-3433-41d7-399b8d414d25.png)

「export.json」を保存する

新しく作成したSpaceに切り替えて、同様に「Saved Objects」より「export.json」をImportする

![image.png](https://qiita-image-store.s3.amazonaws.com/0/159184/1cdc8da0-ea64-fc17-968a-6f7443165a73.png)

こんな感じで移動していれば完了です
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159184/335b617a-8708-3b88-1bed-b9bbc280ae0f.png)

#参考資料
[How to Migrate to Kibana Spaces](https://www.elastic.co/blog/how-to-migrate-to-kibana-spaces)
ksnctf 7 Programming 110pt

#問題

https://ksnctf.sweetduet.info/problem/7

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/5df5871a-3c17-386c-5b0b-d83451b5431d.png)

#解いてみた

- ファイルをダウンロードします。cppファイルなのでC++でしょうか。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/3259299c-e403-dc64-1718-44871ad388ff.png)

- ひどいインデントですが、雰囲気はC++です。
- 整形しようと思ったんですが、このまま実行させるのがラクでいいやと思ったので実行させました。
    - ideone.com https://ideone.com/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/7a591cab-5a0d-2fb1-8e2c-a009eefb8a8d.png)

- という結果でした。
- ほかに特に思いつかなかったので検索したところ、面白いものを見つけました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/04fdb28c-3cbd-6f66-48b9-da633ce68b94.png)

- スペースやタブだけのプログラミング言語。。。
- きっとこれに違いない。というかほかに策がないのでこれでやってみる。
- 実行環境を探さねば。。。
- と思ったら、さっきのC++を実行したサイトで実行できることがわかった。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/76b04330-4286-8618-7944-d16a35326849.png)

- 右下にWhitespaceの文字が。
- ということで実行してみる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/a74e2e50-abf0-7bde-1ca6-3e2df00fa004.png)

- stdoutにPINを入力してね風なものが表示されているが、この環境って対話できないっぽい。それとも最初にstdinを設定しておくのか。
- いずれにせよ、何を設定すればよいのか不明。
- まさかデバッグを学ぶ必要があるのか。ネットで調べてみる。
- あった。。。
    - https://vii5ard.github.io/whitespace/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/75f7085f-6603-3cd4-f829-1a85a3304ea3.png)

- ソースまるまるコピペしてRunをクリックすると右にアセンブラみたいな内容が表示されて、下にPINを入力する欄が。
- なんかよくわからんが、Debugの長めの数値33355524と33355454が怪しいのでまずは上の値を入力してみる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/3ab2a194-514a-c075-61bd-0e8e2e2b7be8.png)


- できた。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/f0b84784-4537-dc83-98eb-ab7d89858c89.png)
GCMVを使ってGCログ解析してみよう

# GCMVとは
GCログ(native_stderr.log)を可視化してくれるツールです。私みたいなEclipse初心者向けの記事になっています。
GCログを可視化したい方、GCMVの使い方が分からない方が対象の記事です。
#前提
 - GCログは手元にある
 - Eclipseはインストール済み

#手順
###GCMVをEclipseにインストール
文字通りEclipseを起動


以下のURLにブラウザでアクセス
https://marketplace.eclipse.org/content/ibm-monitoring-and-diagnostic-tools-garbage-collection-and-memory-visualizer-gcmv

**Install**ボタンをドラッグしてEclipseのフレーム内まで持っていき、手をマウスから放します。

![スクリーンショット 2018-12-25 20.50.15.png](https://qiita-image-store.s3.amazonaws.com/0/158076/999352ce-4fa6-9eb5-7ed8-f4be1564398d.png)

インストールダイアログが開かれるので、流れに沿ってインストールします。(スクショ取り忘れました!!)
インストール時にEclipseが再起動されます。おそらく問題なく成功します。

###GCMVを起動
メニューバーの Window > Perspective > Open Perspective > Other > GCMV をクリック

###GCMVを使ってGCログを可視化

メニューバーの File > ファイルのロード　をクリック
GCログのファイルを選択します。

![スクリーンショット 2018-12-25 21.41.40.png](https://qiita-image-store.s3.amazonaws.com/0/158076/da2ff15a-ce1e-9412-7196-7dce08dfacdc.png)

画像の下部のタブを選択すると色々な情報が見れます。
GCMV便利そうですね。

今回の記事はJavaのフルGCにより長時間のアプリ停止が起きている問題に対して、解決策を探っている上でGCログを確認するための作業の一部です。Javaのヒープ関連の専門用語として、`Eden`, `Survivor`, `Old`, `Permanent`, `Stop the world` 等があることを知りました。個性的で面白いですね。
【Rails】simple_calendarが表示するカレンダーの月はstart_dateが制御している

#　はじめに
メモ用。
タイトルの通り。simple_calendarで表示する月をコントロールさせたい場合
start_dateパラメータが制御しているって話。

# simple_calendar
simple_calendarのgemをインストールし、
viewテンプレートのカレンダーを表示させたい箇所に以下を記載する。

```
  <%= month_calendar do |date| %>
    <%= date %>
  <% end %>
```

するとこんな感じで今月のカレンダーが表示される(当時：2018/12/25)
![スクリーンショット 2018-12-25 21.03.53.png](https://qiita-image-store.s3.amazonaws.com/0/251648/b917c66b-629f-2034-fbe6-b5addd88669d.png)
ここで `Previous` をクリックすると、以下のように2018年11月のカレンダーが表示される。
![スクリーンショット 2018-12-25 21.09.54.png](https://qiita-image-store.s3.amazonaws.com/0/251648/628340c8-b765-4775-4e5f-0dcfc3a32b59.png)

非常に便利だが、このままでは例えば10年前のカレンダーを表示させたい場合、`Previous`を120回クリックしなけれあならないことになる。
「2008年12月のカレンダー」と指定することはできないものか。

# start_dateパラメータ
2018年11月の画像のURLを見ると`?start_date=2018-11-25`と、URLクエリでパラメータを送っているのが分かる。
simple_calendarはこの送られてきたパラメータによって何月のカレンダーを表示するかが制御されているようである。
`?start_date=`以降の文字列は`2018-11-1`でも`2018-11-30`でも何でも大丈夫。（ただし、`2018-11-100`や`2018-11-31`などのように暦上存在しない日にちは✖️）

# 使い方
使い方としては、ブログなどのxx年xx月の記事といった使い方が想定できそう。
showでparams[:id]を "2018-12"のような表記として、

ジャンプしたいページとカレンダーの年と月が@year,@monthに代入されているとして、

```
<%= link_to "#{@year}年#{@month}月", blog_path("#{@year}-#{@month}", start_date: "#{@year}-#{@month}-1") %>
```
みたいな感じ。

# 参考情報
- https://github.com/excid3/simple_calendar
- https://qiita.com/mikaku/items/0971442a7308dc669122
Azure CLIコマンドをdocker runと同時に実行して、実行が終わったらコンテナを破棄する

# 公式dockerイメージを使ったazコマンド実行方法

Azure CLIには公式のDockerイメージがあります。
[mcr.microsoft.com/azure-cli](https://hub.docker.com/_/microsoft-azure-cli)

このイメージを使って、docker runでazコマンド実行しようと思ったんですが、使い方を見てみるとazのコマンドプロンプトが立ち上がるだけで、そのあと手動でコマンド実行しないといけない仕様でした。
使い方はこんなイメージ。

* docker run実行

```
$ docker run -it mcr.microsoft.com/azure-cli
bash-4.4# 
```

* az login手動実行

```
bash-4.4# az login
To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code xxxxxxx to authenticate.
```

* 任意のazコマンド実行

```
bash-4.4# az vm list
```

このように対話式だと、Botから実行したり、CIにのせたりできないので、docker run時に目的のコマンドを実行して破棄するようなイメージを作りました。

# azコマンドをdocker runと同時に実行してコンテナを破棄する

* Dockerfileを作ります。
* サービスプリンシパルは事前に作っておいてください。過去に記事を書いたのでご参考まで。(権限は要件に合わせて設定してください)  
[サービスプリンシパル作成](https://qiita.com/shingo_kawahara/items/d7e9c4e395624259c05a#%E8%AA%B2%E9%87%91%E7%94%A8%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%83%97%E3%83%AA%E3%83%B3%E3%82%B7%E3%83%91%E3%83%AB%E4%BD%9C%E6%88%90)

```dockerfile
FROM mcr.microsoft.com/azure-cli:latest

CMD /usr/local/bin/az login --service-principal \
    -u $AZURE_APPLICATION_ID \
    -p $AZURE_SECRET \
    --tenant $AZURE_TENANT_ID > /dev/null && \
    $CMD
```

* buildします。

```
$ docker build -f Dockerfile -t azurecli:v1.0 .
```

* azコマンドを実行します。Secretとかべた書きすると履歴が残っちゃうので、別ファイルに書いておいて実行時に読み込むなりしたほうがよいですね。

```docker
$ docker run --rm -e AZURE_APPLICATION_ID=[Your Application ID] \
                  -e AZURE_SECRET=[Your Secret] \
                  -e AZURE_TENANT_ID=[Your Tenant ID] \
                  -e CMD="/usr/local/bin/az vm start -g [ResourceGroup] -n [VM Name]" azurecli:v1.0
```

* Jenkinsで実行する場合は以下の記事を参考ください。  
https://qiita.com/shingo_kawahara/items/393f3723045644572a85
今さらながら＆うろ覚えながらPepperのアーキテクチャを解説する

うわー！遅なった遅なった！

この記事は [IoTLT Advent Calendar 2018](https://qiita.com/advent-calendar/2018/iotlt_mitz) の 17 日目の記事です。

みやとも と言います！
昔はPepperに携わってましたが、離れて久しいので色々うろ覚えです！

普段はフルスタックエンジニアやったり（というか何でもやる）、RPAやったりしていますが、今日はIoTネタでアドベントカレンダー書きます。
実はPepperのアーキテクチャは結構好きだったので、何かの助けになればと書こうかと思います。
（若干話がソフトウェアよりですが、ご容赦ください..w）

# はじめに
最近全くIoT関連触ってないのでかなりやっつけになりますが、後々ちゃんと触って検証する予定なので、アップデートを乞うご期待ください。。w
今回は仕事してきた中でPepperの中身を見まくっていた時期があり、その内容をシェアしようかと思います.
内容的には古いですが、そもそもPepperのつくりが定石的だけど斬新なので、よければ楽しんでください.

# Pepperってなんぞや？
Softbank Robotics開発（元はフランスのAldebaran Robotics）のコミュニケーションロボット.
呼吸してるっぽく見せるAutonomous Life機能など表現力を高めようとして不気味の谷を若干超えてる気がするロボットです.

## Pepperのアーキテクチャ（OS周り）
もはや需要の有無を気にしなくなってきました！
まずはOS周りから解説しますが、基本的な構造は数のようになっています.
![NAOqi.JPG](https://qiita-image-store.s3.amazonaws.com/0/239882/8e830e18-bd58-b9fa-62d3-86ead9d2528a.jpeg)
### NAOqiOS
PepperはNAOqiというLinuxのGentooディストリビューションをフォークした独自のROSを積んでいます.
NAOqiはアプリケーションとのインターフェース（API）にもなっているので、アプリケーションから受けた命令をDCMに渡してHWを動かしています.
NAOqiのAPIはとても分かりやすいので、一度 [APIリファレンス(en)](http://doc.aldebaran.com/2-5/naoqi/index.html) を見ても楽しいです.

### DCM
NAOqiと各ハードウェアモジュールをつなぐ制御プログラムです.
NAOqiから受けた命令を元にHWを動かしたり、動かした結果（座標とか）をALMemoryというPepperの持つグローバルメモリに格納します.
DCMはハードウェアへの命令を1~10msの間隔で送信し続けるので、連続した動きを表現できています.

### ALMemory
Pepperが持つグローバルなKeyValue形式のメモリ空間です.
多くのアプリケーションのデータやハードウェアの稼動情報はここに格納されています.
また、Eventの発火もできるのでアプリケーションからALMemoryへの値更新をトリガーに別のアクションを起こすみたいな使い方もできます.


## Pepperのアーキテクチャ（API周り）
記憶が、、、限界にちかい。。。
Pepperのアプリケーションは基本的にNAOqiが持っているAL～という名前のAPIをたたくことで色々な機能が呼び出せます.
このAPIによって色々な表現になるわけですが、API設計はとても合理的で綺麗ですので、とても勉強させてもらっていました.

ただ、この辺は普通のアプリケーションと構造は一緒ですね.
Pepperのアプリ開発には [Choregraphe](https://www.softbank.jp/robot/developer/dev-support/documents/) を使用しますが、ここのボックスもAPIのラッパーになっている感じです。

![APL.JPG](https://qiita-image-store.s3.amazonaws.com/0/239882/96faef1c-cdc4-f789-a6eb-e770e9a59ce2.jpeg)


## Pepperのアーキテクチャ（タブレット周り）
### タブレットとの通信について
Pepperの頭には [nginx](https://nginx.org/en/) というWebサーバが搭載されています.
加えて、PepperはqiMessaging.jsというライブラリを保有していて、こいつがWebサーバを介してタブレットとのやり取りをしたり、タブレットからWebサーバを経由してNAOqiのAPIをたたいたりできます。
この辺りは、[PepperをJavaScriptで動かそう！](https://qiita.com/ExA_DEV/items/dd4bda65dfab1e7f5d07) の記事が詳しく解説してくださっています。

qiMessaging.jsさえあれば手持ちのタブレットやスマホからもPepperが操作できるのは、nginx経由で命令が送れるからなんですね.

![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/239882/f38dcfc5-9fc3-6317-c08c-7bc6e85cd484.jpeg)


### タブレットの描画について
PepperのタブレットはAndroid何がしのWebView + Angular.jsを使用しています.
qiMessaging.jsで送信されたデータはAngularで解釈され、ディスプレイに表示される具合です.
凄いゴリゴリですね.
![s.JPG](https://qiita-image-store.s3.amazonaws.com/0/239882/f639055f-42e0-ec16-cfbe-19039ccc0b24.jpeg)

# まとめ
とりとめも無くPepperのアーキテクチャを書いてしまいましたが、意外と中身のアーキテクチャやソースコードを見ればNAOqi APIの綺麗な設計だったり、qiMessagingの斬新なつくりだったり、色々勉強になることが多かったのが実感です.
(タブレットがWebViewベースなのに驚愕はしましたがｗ)

ぜひ色んなプロダクトの中身を見てコードリーディングしてみましょー！
CircleCIでAndroidのビルドが通らない（UnmarshalException）

ハマったのでメモ

CircleCI(2.0)にAndroidの自動テストを組みこもうとしたところ、
Compileでつまづいてしまった。

## エラー内容

主に以下のようなExceptionが発生

```
:app:compileDemoDebugKotlin
Compilation with Kotlin compile daemon was not successful
java.rmi.UnmarshalException: Error unmarshaling return header; nested exception is: 
	java.io.EOFException
	at sun.rmi.transport.StreamRemoteCall.executeCall(StreamRemoteCall.java:236)
	at sun.rmi.server.UnicastRef.invoke(UnicastRef.java:161)
	at java.rmi.server.RemoteObjectInvocationHandler.invokeRemoteMethod(RemoteObjectInvocationHandler.java:227)
	at java.rmi.server.RemoteObjectInvocationHandler.invoke(RemoteObjectInvocationHandler.java:179)
	at com.sun.proxy.$Proxy103.compile(Unknown Source)
    ...
```
```
Caused by: java.io.EOFException
	at java.io.DataInputStream.readByte(DataInputStream.java:267)
	at sun.rmi.transport.StreamRemoteCall.executeCall(StreamRemoteCall.java:222)
	... 60 more
```

たまにdaemonが死んだというメッセージだけ残っているときもありました

```
FAILURE: Build failed with an exception.

* What went wrong:
Gradle build daemon disappeared unexpectedly (it may have been killed or may have crashed)
```

## 原因

メモリ不足。
負荷軽減することでビルド通った。

（メモリ不足になる原因はKotlin側？　バージョンによって結構デグレするっぽい。ちなみに私は `1.3.0` でした）

## 解決方法

### メモリサイズを1.5GBに指定

CircleCIのDockerは2CPU,4GBです。
これの3GB, 4GBを使ってしまうとたぶんOS側のメモリが圧迫されて死にやすい？ので
1.5GBにします。（2GBよりも、これが一番安定していました）

```
    JAVA_OPTS: -Xmx1536m
    GRADLE_OPTS: '-Dorg.gradle.daemon=false -Dorg.gradle.jvmargs="-Xmx1536m -XX:+HeapDumpOnOutOfMemoryError"'
```

なによりdroidkaigi2018の設定なので信用できる（笑

### Environment Variables にBuildFlavorとBuildTypeを追加

|Name|Value|
|:--|:--|
|BUILD_FLAVOR|Production(*)|
|BUILD_TYPE|Release(*)|

(*)各々のプロジェクトにマッチするものを設定してください、これは私のケースです

### circle.yml にFlavorとTypeを指定

```circle.yml
      - run:
          name: Run Complile
          command: ./gradlew assemble$BUILD_FLAVOR$BUILD_TYPE
      - run:
          name: Run Inspection
          command: ./gradlew lint$BUILD_FLAVOR$BUILD_TYPE
      - run:
          name: Run Test
          command: ./gradlew test$BUILD_FLAVOR$BUILD_TYPE
```

### それでもダメなときは

**必要最低限のビルドに止める**
私の場合はテストだけでいいので、`./gradlew test$BUILD_FLAVOR$BUILD_TYPE`　だけにする、とか。


## 課題点

### 安定しない

たまにOOMになっちゃいます。
なのでテストだけにしようかと思っています...

メモリを増やすという手もありますが、従量課金制というのと、**一度有料にしたら戻せない**ので二の足ふんじゃいますよね。

### Releaseビルドまでしたい

すべてのFlavorをDeployまでやろうとするとやっぱりOOMでダメでした。
（私のケースはとりあえずDeploy不要だったので、テストだけやる感じでした）

### パフォーマンス

もう仕方ない気もしますが。
OOM発生しない程度のパフォーマンスが気になると思いますので載せておきます。

build ... 03:19
lint ... 02:43
test ... 01:54
AWS Cloud9がOpen IDEできない(開かない )ときの予想外の原因

https://qiita.com/tu-kun/items/d7b4f1fa19cc93bc5b75

こちらの記事を参考にcloud9を導入

![スクリーンショット 2018-12-25 20.57.35.png](https://qiita-image-store.s3.amazonaws.com/0/325154/0903386d-cd96-fe56-d3fa-a8ca22abd33d.png)

Open IDEをクリックすると導入できるはずだったんだけど、

![スクリーンショット 2018-12-25 21.01.06.png](https://qiita-image-store.s3.amazonaws.com/0/325154/f7ecaef4-1524-47c1-9237-c76dbf8175ed.png)
ずっとこの画面で次に進まない。。
上のオレンジポップアップを読むと、エラーだからサポートに電話して！と書いてある。

＝＝＝＝＝＝＝＝＝＝解決策＝＝＝＝＝＝＝＝＝
Chrome拡張機能のAd Blockを解除してあげると、、、、
![スクリーンショット 2018-12-25 21.04.59.png](https://qiita-image-store.s3.amazonaws.com/0/325154/91b8db30-b455-756d-34a7-0084a3e4db6d.png)
無事開けました。。。
Laravelのbladeで条件によって表示を切り替える

これは [TOWN Advent Calendar 2018](https://qiita.com/advent-calendar/2018/town) 25日目のエントリーです。

今回はお仕事と関係なく、Laravelのお話。

# laravelcollective

2018年においてPHPのフレームワークといえば、Laravel一強な感じもありますがLaravel本体のアップデートも頻繁に行われており、Larvel5からFormはコアモジュールから削除されていて、LaravelCollectiveという別プロジェクトに移管されていたりします。

https://laravelcollective.com/

ちなみにインストールするときには

```
composer require "laravelcollective/html":"^5.X.0"
```

のようにLaravelのバージョンに合わせたバージョンをインストールする必要があります。

# bladeで表示を切り替える

Request::is()でURLの一致判定が行なえます。ワイルドカードも使用可能です。

https://qiita.com/binthec/items/174fcf0320d002d01096

の isActiveUrl と組み合わせることで、こんな感じで共通パーツだけど条件によって表示を切り替える事が可能になります。


```
      @if(Request::is('posts*'))
      <a class="navbar-brand" href="{{ action('PostController@index') }}">{{ __('Roadmap') }}</a>
        <ul class="navbar-nav">
          <li class="nav-item {{ isActiveUrl('posts') }} ">
            <a href="{{ action('PostController@index') }}" class="nav-link">{{ __('List') }}<div class="ripple-container"></div></a>
          </li>
          <li class="nav-item {{ isActiveUrl('posts/create') }} ">
            <a href="{{ action('PostController@create') }}" class="nav-link">{{ __('Register') }}</a>
          </li>
        </ul>
        @endif
```

なお、LaravelのURLでは

http://localhost/blogs

みたいに最後に「/」がつかないケースがあるので、

```
@if(Request::is('blogs/*'))
```

みたいなパターンだとマッチしないことがあります。
【SAPUI5】リストのソートとグループ化

##はじめに
今回は、リストのソート、グループ化の方法についてご紹介します。
Listのプロパティを変更するだけで、簡単に実装できます。

前提：[【SAPUI5】入門編の記事まとめ(2)](https://qiita.com/tami/items/f1537c0e9c81cfaa99e7)

##製品名順にソート
まずは以下のように、製品名順にソートされるようにします。
![WS000072.JPG](https://qiita-image-store.s3.amazonaws.com/0/276021/d8bbc76d-acc7-e8c9-d1c2-90a4f55fcafc.jpeg)

###ソース
App.view.xmlで、Listのプロパティを以下のように追加します。

```xml
							<List 
								id="productList"
								items="{
									path: 'mPricelist>/products',
									sorter: {
										path: 'name'
									}
								}">
```
idは[前回](https://qiita.com/tami/items/5bba3f82cb53c9d311cb)フィルタを実装した際に追加したもので、ソートとは関係ありません。
変更前のitems属性は以下の内容でした。
`<List items="{mPricelist>/products}">`
もともとはpathの内容だけが直接設定されていましたが、今回sorterを追加するのでpathもプロパティ名を明示するようにしました。
sorterには「何順でソートするか」を指定します。今回は製品名順です。
今回はやりませんが、descendingプロパティに"true"を設定すると降順にソートされます。

##カテゴリごとにグループ化
モデルに新しい項目「カテゴリ」を追加し、カテゴリごとにグループ化されるようにします。
![WS000074.JPG](https://qiita-image-store.s3.amazonaws.com/0/276021/08eed580-998e-8ecf-5ad4-06a97ba3e47e.jpeg)

###ソース
まず、Pricelist.jsonファイルに以下のようにcategoryの項目を追加します。
categoryは"Fruits", "Vegetables", "Eggs"の3種類としました。

```json
{ 
	"products" :[
		{
			"name" : "Pumpkin",
			"price": 15.00,
			"currency": "EUR",
			"supplier": "CompanyA",
			"stock": 100,
			"category": "Vegetables"
		},
		{
			"name" : "Apple",
			"price": 200.00,
			"currency": "JPY",
			"supplier": "CompanyB",
			"stock": 99,
			"category": "Fruits"
		},

・・・
```
次に、App.view.xmlでListのプロパティを以下のように変更します。

```xml
							<List 
								id="productList"
								items="{
									path: 'mPricelist>/products',
									sorter: {
										path: 'category',
										group: true
									}
								}">
```

グループ化もsorterのプロパティの一種なので、カテゴリでグループ化すると製品名順のソートは失われてしまいます。
製品名順でソートしつつカテゴリでグループ化したい場合はどうするのかについては、別の機会に調べてみることにします。

##Listのプロパティには何が設定できるのか
ソート、グループはListのプロパティに設定できることがわかりました。
しかし、[Listのリファレンス](https://openui5.hana.ondemand.com/#/api/sap.m.List/methods/Summary)を見ても、プロパティに何が指定できるかは書いてありません。
Listオブジェクトの作成時、mSettingsとして色々なプロパティを指定することができるようですが、具体的な設定値は[実装サンプル](https://openui5.hana.ondemand.com/#/entity/sap.m.List)などを参考にするしかないのかもしれません。今のところのモヤモヤポイントです。
![WS000073.JPG](https://qiita-image-store.s3.amazonaws.com/0/276021/194e78e0-ef57-84b1-ba2c-c477fc5dba1e.jpeg)

##参考にしたページ
[Get Started: Setup and Tutorials-Walkthrough-Step 25: Sorting and Grouping](https://sapui5.hana.ondemand.com/#/topic/c4b2a32bb72f483faa173e890e48d812)
プロダクトマネージャー名言に学びたい『大切なのは「プロダクトが誰を救わないか」を決めることです。』#ScrapBox #tikTok #Qiita #FaceBook #Twitter #PM


#InspiredBy

[小さな会社のPMになったあなたへ - Qiita](https://qiita.com/Terryy/items/b3a26517b584cdbec70d)

>大切なのは、「プロダクトが誰を救わないか」を決めることです。
>万人に向けたプロダクトは、結局誰にも刺さらないものになってしまいます。


# たとえばScrapBoxが誰を救わないか？

- ソーシャルで「いいね」がついて自己承認欲求をチャージしたい俺
- カテゴリ分け、タグ付けしてコンテンツを整理したい俺
- 見出し、段落、テーブルなどで資料的な整形をしたい俺

# たとえばtiktokが誰を救わないか？

- 15秒を超えてだらだらと喋りたいおじさんis俺
- 動画をゲームセンターのように使いたくない、真面目な勉強家の俺
- 素早い動きをすることが出来ない、身体的能力がイマイチな俺

# たとえばQiitaが誰を救わないか？

# たとえばFacebookが誰を救わないか？

自由記入欄。

# たとえばTwitterが誰を救わないか？

自由記入欄。


# あなたがサービスを使うたび「このサービスは誰を救っていないだろう」と考えてみよう

もっとプログラミングだけじゃなくて、サービスについて考えてみないか？

---

[サービスyumainaura - Google Search](https://www.google.co.jp/search?q=%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9yumainaura&oq=%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9yumainaura&aqs=chrome..69i57.7601j0j7&sourceid=chrome&ie=UTF-8)











<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
TreeViewで登録したアイコンの背景色が透明にならない場合は...

#はじめに
[System.Windows.Forms.TreeView](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.forms.treeview) の Nodes.[Add](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.forms.treenodecollection.add) メソッドなどで追加した TreeNode へ [System.Windows.Forms.ImageList](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.forms.imagelist) を介してファイルのアイコンを登録させたとき、方法によっては背景色が透明にならず、灰色や黒色の四角枠となってしまう場合があります。その解決方法を示します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/100206/a95ca9be-a7e1-d351-2092-177a359c7db6.png)

#解決法（コード）
```CSharp
// NG
imageList1.Images.Add(System.Drawing.Icon.ExtractAssociatedIcon(filePath));

// GOOD
imageList1.Images.Add(System.Drawing.Icon.ExtractAssociatedIcon(filePath).ToBitmap());

```
[System.Drawing.Icon.ExtractAssociatedIcon](https://docs.microsoft.com/ja-jp/dotnet/api/system.drawing.icon.extractassociatedicon) メソッドの戻り値は [System.Drawing.Icon](https://docs.microsoft.com/ja-jp/dotnet/api/system.drawing.icon) 型ですが、[Icon.ToBitmap](https://docs.microsoft.com/ja-jp/dotnet/api/system.drawing.icon.tobitmap)メソッドにより [System.Drawing.Bitmap] (https://docs.microsoft.com/ja-jp/dotnet/api/system.drawing.bitmap) 型に変換して渡せば、背景は透明になります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/100206/5d2305bb-c6bc-633b-3c68-d7261ad96b42.png)


#おわりに
これだけの記事ですが、お探しの方もいらっしゃると思いますので投稿してみました。技術情報向けマイクロブログサービスがあると嬉しいなぁ...
初心者向け。 #jquery #javascript ファイルを読み込むとは何なのか？

[拝啓 本当は Qiita を書きたいのに、まだ迷っているあなたへ。 - Qiita](https://qiita.com/YumaInaura/items/4d2c602d59c62daa9344) を例にする。

# ページを右クリックして「ソースを表示」みたいなのを選んで見る。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/3cc5abac-a57f-c05c-8238-99498cfb36b2.png)

# HTMLタグが出てくる。

これが裏側でWebページを作っている「基本部品。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/73bd6cb9-16f2-92d0-7ba7-d8dd1dcacb82.png)


# ページをブラウザ検索で「 .js 」というキーワードで検索してみる

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/e5c2a6e8-c73f-87a4-f971-36bd98d546bd.png)

# これが javascript ファイルの記述

jquery でも何でも、HTMLタグの「基本部品」の中に「javascriptファイルを読み込む」っていう指示が書いてある。それがこういうやつ。

jquery関係ない例になってしまって申し訳ないが、こいつで説明。

```
<script async="" src="https://cdn.bigmining.com/private/js/qiita_bigmining.js"></script>
```

# Javascriptファイルに直接アクセスしてみる

これがjavascriptファイルの本体。

ただのテキストファイルであることが分かる。

改行がぜんぜんなくて読みにくいけど、ファイル容量節約のために圧縮されている。なので開発の時はもっと読みやすい。

https://cdn.bigmining.com/private/js/qiita_bigmining.js

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/70bb19c1-f811-dce3-cc62-225f22bb4ab8.png)

# どうやって動いてるの？

GooleChromeとかのWebブラウザがこの「ただのテキスト」を解釈して、いろいろやっている。

Jquery など javascript のファイル自体は、このようにただの文字の集合に過ぎない。


# 良さげな本

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/e082db94-8354-efa5-9f48-11984863f99b.png)

[jQuery最高の教科書 | 株式会社シフトブレイン |本 | 通販 | Amazon](https://www.amazon.co.jp/jQuery%E6%9C%80%E9%AB%98%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%82%B7%E3%83%95%E3%83%88%E3%83%96%E3%83%AC%E3%82%A4%E3%83%B3/dp/4797372214/ref=sr_1_1?ie=UTF8&qid=1545737970&sr=8-1&keywords=jquery)

# link

[Qiitaでいいねが付かない？リアルSEOな口コミで拡散！って口実で人類平和を目的にプログラマ同士のゆるコミュニティを作りたい大阪Web開発システムエンジニア。 - Qiita](https://qiita.com/YumaInaura/items/07b0c1230d18052aef9d)












<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
[C] enumを戻り値とする関数

知らなかったのでメモ

```c:main.c
#include <stdio.h>

enum TestEnum
{
    Hoge = 1,
    Huga = 2,
    Piyo = 3,
    Zero = 0
};

enum TestEnum testReturnEnum(){
    return Hoge;
}

int main (){
    printf("Enum return: %d", testReturnEnum());
    return 0;
}
```

結果

```
Enum return: 1
```

うん
じゃあ定義外の数値を返そう

```c:main.c
enum TestEnum testReturnEnum(){
    return 5;
}
```

結果

```
Enum return: 5
```
普通に実行できる 定義外でもintであればとりあえずいいのか
シニア世代エンジニアはどこへ行く

[シニア世代(Over 40)ITエンジニア Advent Calendar 2018](https://qiita.com/advent-calendar/2018/seniors) 24 日目 の記事 です。

40 歳を過ぎたら、この業界では **シニア** だと知りました。
にも関わらず、迫り来る契約期限...。
チョット悩み、ジタバタし、結局は(消極的ながら)イチバン無難な選択をしてしまったのですが、エンジニア転職を前提に、やっておいた方がよさそうなことをまとめてみます。

# スキル磨き/広げ

新しい技術やトレンドがものすごい量とスピードで次々と現れます。
すべてをキャッチ＆ウォッチすることは難しいと思いますが、キーワードを押さえ、スタンダードになりそうな技術はざっくりとでも知っておくことが必要です。
(どの技術が発展し、定着するかを見極めるには、経験が役立つかも知れません)

その上で、基盤とするスキルはできるだけ磨き、必要なら広げ、経験と抱き合わせで武器にできるとよいのだと思います。
技術要素に依存しない普遍的な「手法」や「考え方」も、錆びないようにときどき研ぐことを忘れずに。

# ポートフォリオ

**目に見える** 評価基準を公開することも大切なようです。
目に見えるものだけでしか図ってもらえないタイミングがあります。

ポテンシャルを評価してもらうことは難しい年頃ですので、即戦力をアピールできるものがあるとよいのだと思います。

OSS 活動や技術的な発信も要素の 1 つで、これらを評価対象に含めるところが多い印象を受けています。
(恐らく「(指標として)評価しやすいから」という理由であって、内容を深掘っているかどうかまではわかりません...)

エントリした後で、カジュアルでも通常でも面談していただける(会ってもらえる)ところまでどう持っていくか、自分でもまだ課題なのですが。

# コミュニティ

大規模なカンファレンスだけでなく、最近は業後や土日に小規模な勉強会や技術的コミュニティのオフ会なども多く開催されています。
エンジニアネットワークを広げるためにも、情報や動向、雰囲気を感じるためにも、まず参加してみるのは意味がありそうです。
若い年代の参加者が多いはずですから、その中でやっていけるのかの手応えを感じることもできると思います。

SNS などで、発信・交流することも可能であればやった方がよいでしょう。
「独りではない」ことに気付くだけでも力になります。

----

一応まとめ的に、
ここ 2,3 ヶ月の反省：

- やった(できた)こと
  - エンジニアとしての twitter アカウントを作った
  - 一般的なものと緩いもの複数企業にエントリした (→ 採用面談までは進まず)
  - コミュニティのオフ会的な集まりに 2,3 回参加した (→ まずは一歩踏み出した)
  - 久々に資格試験を受験＆合格した (→ 本命は手強いけれど)

- やらなかった(できなかった)こと
  - アウトプットの充実(1) 技術的なブログを始める (→ 準備まではしたが、記事は挙げられず)
  - アウトプットの充実(2) OSS 活動を始める (→ こちらも仕込み中...)

来年はさらに「動く」年にすべく、留まらずに貪欲に自分を磨き、アウトプットを積みたいと思っております。
次の Advent Calendar では「どこに行ったか」が書けるといいな！

PS. 年末年始休暇中の(技術書以外の)課題図書は
[『0才から100才まで学び続けなくてはならない時代を生きる 学ぶ人と育てる人のための教科書』(落合陽一/小学館)](https://www.shogakukan.co.jp/pr/yoichiochiai/)
になりました。
Encrypted Credentialsに設定した変数を環境毎に出し分けたい

##Encrypted Credentials
Rails5.2より `config/secrets.yml` の代わりに入った 
`config/credentials.yml.enc` です。
(他の方の丁寧な記事がたくさんありますので、詳しい説明は割愛します。)

Rails6.0からは公式サポートされそうです。
参考: Add support for multi environment credentials.
https://github.com/rails/rails/pull/33521


環境毎(production, development等)に異なる値をファイル内で
簡単に出し分けできたらと考えていました。

##方法
以下のような書き方をしてみました。

```yml:config/credentials.yml.enc 
development:
  hoge: hoge123456

production:
  hoge: hogehoge123
```

これを以下のように呼んでみます。

```rb
Rails.application.credentials[Rails.env.to_sym][:hoge]
```

##結果
実行環境
Rails 5.2.2
Ruby 2.5.3p105 (2018-10-18 revision 65156) [x86_64-darwin15]

```
$ bundle exec rails c
Loading development environment (Rails 5.2.2)
[1] pry(main)> Rails.application.credentials[Rails.env.to_sym][:hoge]
=> "hoge123456"


$ bundle exec rails c -e production
Loading production environment (Rails 5.2.2)
[1] pry(main)> Rails.application.credentials[Rails.env.to_sym][:hoge]
=> "hogehoge123"
```

うまく出し分けできてそうです！😃
大量のREST APIコールをasyncioで高速化してみた

これは [Fujitsu Advent Calendar 2018](https://qiita.com/advent-calendar/2018/fujitsu) 16日目 の記事です。(今年も大幅遅刻です。ごめんなさいごめんなさいごめんなさい。)
ほんでもって、時間切れが近いのでとりあえずソースだけ貼って一旦公開しますっ。解説は後で(できる限り25日のうちに)書く。(ごめんなさいごめんなさいごめんなさいごめんなさい。)

```python
import asyncio
from functools import partial
import gitlab
from datetime import datetime
import config

def main():
    gl = gitlab.Gitlab(config.gitlab_server, config.gitlab_token)
    groups = gl.groups.list(all=True, as_list=True)
    global loop
    loop = asyncio.get_event_loop()
    results = loop.run_until_complete(gather_results(groups))
    progress('Finished')
    for members in results:
        for project in members:
            print('%s: %d (%s)' %(project, len(members[project]), ','.join([m.username for m in members[project]])))
    loop.close()

async def gather_results(groups):
    coroutines = [asyncio.ensure_future(get_a_group(group)) for group in groups]
    results = await asyncio.gather(*coroutines)
    return results

async def get_a_group(group):
    members = {}
    progress('Start processing Group: %s' % group.full_path)
    members[group.full_path] = await loop.run_in_executor(None, partial(group.members.list, all=True, as_list=True))
    projects = await loop.run_in_executor(None, partial(group.projects.list, all=True, as_list=True))
    for project in projects:
        members[project.path] = await loop.run_in_executor(None, partial(group.members.list, all=True, as_list=True))
    return members

def progress(msg):
    print('%s: %s\n' %(datetime.now().isoformat(), msg))

if __name__ == '__main__':
    main()
```

教訓: 暮れも押し迫りイベント目白押しなこの時期にアドカレ書いてる時間なんかとれんがな。(11月中に書きましょう。)
Angular プロジェクトのファイル構造に関する考察

# 結論から
この記事はAngularのプロジェクト開発において、できるだけコンポーネントをモジュール化し、それをimportしていく形でプロジェクト開発していくほうが色々幸せになれるよというお話です。

# 比較
Angularの開発において大きく分けて2パターンの方法で開発できます。

- パターン1: rootモジュール(lazy loading時のloadChildrenの指定先のようなもの)配下の全てのコンポーネント（孫、ひ孫等含め）をdeclareして使用する
- パターン2: それぞれのコンポーネントをモジュール化し、そのモジュールを直属の親コンポーネントのモジュールにimportする事で使用する。

## パターン1

```
root
├── root.component.html
├── root.component.scss
├── root.component.ts
└── root.module.ts
child
├── child.component.html
├── child.component.scss
└── child.component.ts
```

```ts:root.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { RootComponent } from './root.component';
import { ChildComponent } from '../child/child.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    RootComponent,
    ChildComponent,
  ],
})
export class RootModule { }
```

## パターン2

```
root
├── root.component.html
├── root.component.scss
├── root.component.ts
└── root.module.ts
child
├── child.component.html
├── child.component.scss
├── child.component.ts
└── child.module.ts
```

```ts:root.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { RootComponent } from './root.component';
import { ChildModule } from '../child/child.module';

@NgModule({
  imports: [
    CommonModule,
    ChildModule
  ],
  declarations: [
    RootComponent,
  ],
})
export class RootModule { }
```

```ts:child.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ChildComponent } from './child.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    ChildComponent,
  ],
  exports: [
    ChildComponent
  ]
})
export class RootModule { }
```

----
上記2パターンで全く同じ結果になるプロジェクトをモノレポで参考として[開発してみました。](https://github.com/cilly-yllic/angular-project-file-structure-consideration)

開発には適度なのソースコードを必要とするため、[Angular Material](https://material.angular.io/components/categories)で紹介されているexample集を集めたものにしています。

# パターン2の方が良いとする理由
```
~example-one/src/app/roots/categories.module.ts

~example-two/src/app/roots/categories.module.ts
```

上記二つのファイルを比較していただければ一目瞭然ですが、パターン1において

- categories.module.tsに全てのコンポーネントをdeclareしているため、そもそも読みづらくなります
- コンポーネントを削除したい、一部を編集したいとなった場合に不要となるモジュール（今回の場合 Angular Material等）を把握できないので、不使用でimportしてしまうという状況に陥る蓋然性が高くなる。
- lazy loadingを使用し複数のrootモジュールを利用している場合などで、複数のモジュールでコンポーネントを共有する場合、結局そのコンポーネントをモジュール化する事が必要になる。

# ビルド結果

パターン1
![スクリーンショット 2018-12-20 12.56.14.png](https://qiita-image-store.s3.amazonaws.com/0/117677/e9aac05e-33f0-cc4c-7367-9c046e158149.png)

パターン2
![スクリーンショット 2018-12-20 12.56.24.png](https://qiita-image-store.s3.amazonaws.com/0/117677/306bb285-2bb7-024b-e0b2-700389bd6d31.png)

ほぼ一緒ですね。

# まとめ
パターン1からパターン2への移行は意外と骨が折れます。
因みに、AppModule内で独自モジュールをimportし、且つlazy loadingを利用している場合パターン2への移行時にそこまわりの構成を考え直さないといけなくなります。

パターン1でもプロジェクト開発は進められます。共有するコンポーネントのみモジュール化するという方法でも問題はないでしょう。
しかし、可読性や開発効率等において僕自身はパターン2での開発をおすすめします。
PHPerが『40万PV／1時間』を捌いた際のApache設定を晒す

これはAdventure Advent Calendar 2018の12日目の記事です。（後追い）

株式会社アドベンチャーに所属してます。
航空券予約サイト[skyticket（スカイチケット）](https://skyticket.jp/)を運営してますので、どうぞよろしくお願いします。

今月、PHP7.3がリリースされました。
パフォーマンスがさらに向上したようで、ますますPHP愛が深まります！

そんなPHPに夢中な私ですが、前職ではインフラっぽいことも少しやってました。

今回の記事は、そんな4年前の昔話になりますが、恥ずかしながら『40万PV／1時間』を捌いた際のApache設定を晒すことにします。

チューニング内容はサイト次第で正解が違ってきますが、こんなチューニングでもなんとかなったよー、って感じの参考程度になれば幸いです。

# Apacheのこと、まだ見捨てないでー！

今回はApacheの話になります。

Webサーバー市場のシェア率が30％を越え、勢いの止まらない人気のnginxのおかげで、シェア率の低下が進むApacheですが。。。ぜんぜん使える子なんだからねっ！

# prefork MPM の初期値について
apache2.4系の初期値は以下になります。
apache2.2系は、
MaxRequestWorkers → MaxClients
MaxConnectionsPerChild → MaxRequestsPerChild
で置き換えてください。

```
StartServers               5
MinSpareServers            5
MaxSpareServers           10
ServerLimit              256
MaxRequestWorkers        256
MaxConnectionsPerChild 10000
```

[prefork - Apache HTTP サーバ バージョン 2.4](https://httpd.apache.org/docs/2.4/ja/mod/prefork.html)で、以下のように書かれています。
> このMPMは非常に自律的なので、このMPMの設定ディレクティブを調整する必要はほとんどないでしょう。もっとも重要なことは、MaxClientsが、予想される同時リクエスト数を十分扱えるぐらいは大きいけれども、全プロセスに十分な物理メモリが確実に行き渡る程度には小さい値にする、ということです。

よく理解もせずに、この数値をいろいろいじったのはいい思い出です。

実際、勘所がわかった頃には、月数百万PV程度のPHPサイトであれば、メモリ1GBのサーバで、ほぼ初期値で運用できてました。

ただ、その程度のメモリですと、MaxRequestWorkersが256到達前に悲鳴あげますので、それなりの値に変えると同時に、KeepAliveTimeoutについても考慮が必要です。

※誤解のないように書いておきますが、アクセス数だけで判断せず、要件や体制など、総合的な判断で適切なサーバ構成にしてくださいね。

# KeepAliveTimeoutについて

KeepAliveはデフォルトで『On』です。理由がない限りは『On』のままで利用することが多いかと思います。そこでKeepAliveTimeoutについてです。

KeepAliveTimeoutの初期値は『5』です。持続的な接続で次のリクエストが来るまでサーバが待つ時間、つまり、プロセスが5秒間占有されます。

もう使わないプロセスだったとしても、5秒間はプロセスが居残り、その分のメモリが消費されている状態になります。

サーバのメモリが不十分な場合は、たとえば、KeepAliveTimeoutを『2』にする事で、プロセス数が減って、メモリ不足が解消できるかもしれません。

逆にKeepAliveTimeoutを減らす事で、逆にプロセス数が多くなるような場合は、適正な値を探ってください。

# MaxRequestWorkersの適正値を探る

まずは、Apacheが使えるメモリの総量（メモリの空き容量）がどのくらいか調べます。わかりやすいサイトがあったので、詳しくはそちらをご覧ください。

[【RHEL】linuxメモリのfreeとmeminfoの関係を図解し利用率の計算方法を説明してみる](http://nopipi.hatenablog.com/entry/2015/09/13/181026)

次にApacheの子プロセスが、どのくらいメモリを喰うか調べます。これもわかりやすいサイトがありましたので、詳しくはそちらをご覧ください。

[メモリの共有分を考慮してApacheのメモリ使用量を割り出す](https://www.greptips.com/posts/1108/)

 - CentOS 7.6
 - Apache 2.4.35
 - PHP 7.3.0
 - MariaDB 10.2.20
 - メモリ 1GB

上記の環境で、小規模なシステムを設置して、プロセスを増やして計測すると、
Apache（子プロセス）が使えるメモリ＝570MB
プロセス占有メモリ平均＝3MB
でした。

実際に運用していくと、570MB全てがApacheに使えるわけではないので、仮に510MBとすると、

510 ÷ 3 ＝ 170

なんて数字が出せたりします。

MaxRequestWorkersの適正値を探るにあたり、多少の指針にはなりそうです。

# 本題の設定を晒す

『40万PV／1時間』をサーバ1台で捌いた当時の設定

 - CentOS 6.3
 - PHP 5.3
 - Apache 2.2
 - メモリ 32GB

```
<IfModule prefork.c>
StartServers           30
MinSpareServers        20
MaxSpareServers        70
ServerLimit          5200
MaxClients           5200
MaxRequestsPerChild  4000
</IfModule>

KeepAliveTimeout 3
```

MaxClientsの値を5200にしてますが、普通にこれ書くと怒られます。

実はCentOS 6（RHEL6）のデフォルトのプロセス最大数（ulimit）が1024に設定されているからなんです。（RHEL7はデフォ4096）

というわけで、ulimitの設定が必要なのですが、わかりやすい説明がされているサイトがありましたので、詳しくはそちらをご覧ください。

[httpdプロセス数の上限を、ulimitを設定して増やせるようにする方法](https://takeshiyako.blogspot.com/2013/01/httpdulimit.html)

この晒しが参考になって、幸せになれる人がいたら嬉しいです。
SOMにおける六角形マップの実装

# 初めに
Kohonenにより提唱されたSOMですが、その仕組みを説明するサイトは多々あれど六角形マップ(ヘキサマップ)の実装に関する説明がないため、私を含め初学者にはどのように六角形マップを実装すればよいのかわからないと思います。
ネット上の少ない情報をかき集めて無事実装することが出来ましたので、今回は備忘録を兼ねて記事にしようと思います。

# なぜ六角形マップなのか
SOMはノード間の距離で類似度を表現しているため、隣接するノード間の距離は全て同じであることが望ましいです。
四角形マップは実装が簡単という素晴らしい長所があるのですが、上下左右方向のノードと、斜め方向のノードとでは距離が$\sqrt{2}$倍異なることになるという欠点があります。
六角形マップでは隣接するノードの距離は全て等しいのですが、実装方法がわからず今まで避けていました...  

# SOMとは
SOM(Self Organizing Maps)とはKohonenにより提唱されたニューラルネットワークの一種で、
入力層と出力層の2層構造をとります。
用途としてはデータの可視化、次元圧縮、クラスタリングで使用されます。
(詳細な説明は[Wiki](https://ja.wikipedia.org/wiki/%E8%87%AA%E5%B7%B1%E7%B5%84%E7%B9%94%E5%8C%96%E5%86%99%E5%83%8F)をご確認ください)

# SOMの一般的なアルゴリズム
単純なSOMを例にアルゴリズムを説明します。
入力データを$X$($M×N$次元のデータ)、学習回数を$T$とすると、以下のステップを繰り返すことで学習をしていきます。
1. 出力層の各ノードを乱数で初期化する
2. 入力データ$X$から ベクトルを1つ選ぶ
3. 2.で選択したベクトル$\boldsymbol{x}$に一番似ているノードを探索し、勝者ノードとする
4. 勝者ノードの含む近傍ノードを$\boldsymbol{x}$に近づけるように学習する
5. 2.-4.を全入力データに関して繰り返す
6. 上記2-5を$T$回繰り返す

3.で勝者ノードを探索する際に、何をもって似ているとするかですが、一般的にはユークリッド距離が使われます。距離については[ここ](https://www.albert2005.co.jp/knowledge/data_mining/cluster/cluster_summary)などを参考にしてください。

その他、近傍や学習係数などの細かい部分は参考になりそうなサイトを挙げておきますので適宜参照してください。
http://www.brain.kyutech.ac.jp/~furukawa/data/SOMtext.pdf
http://www.sist.ac.jp/~kanakubo/research/neuro/selforganizingmap.html

# 出力層の生成
説明のために、出力層のサイズを8×8とします。
通常であれば8×8=64個のノードが存在することになりますが、六角形マップでは以下の図のように半分しか使いません(黄色が有効なノード、灰色が無効なノードと考えてください)。
![Map1.png](https://qiita-image-store.s3.amazonaws.com/0/329392/23875d2b-50e4-7f71-e4f4-1b68d63e5969.png)

縦方向の添え字をh、横方向の添え字をwとすると、有効なノードは以下の式で簡単に識別可能です。

```
if(h + w % 2 == 0)
{
    // 有効なノード
}
else
{
    // 無効なノード
}
```

そのため、六角形マップで実装するためには、[SOMの一般的なアルゴリズム](#SOMの一般的なアルゴリズム)の1.で出力層の各ノードを初期化する際、有効ノードだけ初期化すれば良いことになります。

# 学習
学習では勝者ノードを含む近傍ノードを更新していくわけですが、
六角形マップでは隣接ノード間の距離は全方向で等しいため、近傍半径が1だった場合、勝者ノードと隣接するノードの計7ノードを更新すればよいことになります。
勝者ノードの座標を(X, Y)、近傍半径をrとすると、コードは以下のような感じになります。

```
for (int h = Y - r; h <= Y + r; h++)
{
    for (int w = X - r; w <= X + r; w++)
    {
        // 勝者ノードと現在注目しているノードとのハミング距離を計算
        hammingDist = Math.Abs(h - Y) + Math.Abs(w - X);

        // ハミング距離が近傍半径以内なら更新対象
        if (hammingDist <= r)
        {
            // 有効ノードかをチェック
            if ((h + w) % 2 == 0)
            {
                // ノードを更新する
            }
        }
    }
}
```

# 学習後
学習が完了するとこんな感じの六角形マップが得られます。
![map2.png](https://qiita-image-store.s3.amazonaws.com/0/329392/89e55204-cdc5-c6b9-95a1-cd4689fc41ab.png)

# ソース一式
[Github](https://github.com/fantamo/SOMcs)にアップしておきました。
C#(UWP)で作った汚いソースですが動きはわかると思います。

# 参考リンク
六角形マップを実装するにあたり参考になったサイトは以下です。  
http://ninagreen.hatenablog.com/entry/2015/11/14/193417
http://blogs.wankuma.com/izmktr/archive/2009/06/26/176657.aspx
https://teratail.com/questions/129504
http://keekerdc.com/2011/03/hexagon-grids-coordinate-systems-and-distance-calculations/
かっこ内の文字列を消す関数

	Private Function かっこ内の文字列を消す(Input_St As Variant) As Variant
	  Dim Return_St As Variant
	  Dim i As Long
	  Dim str As String
	  Dim write_switch As Long

	  write_switch = 0

	  For i = 1 To Len(Input_St)
	    str = Mid(Input_St, i, 1)
	    If str = "<" Or str = "（" Then
	      write_switch = write_switch + 1
	    End If

	    If write_switch = 0 Then
	      Return_St = Return_St & str
	    End If

	    If str = ">" Or str = "）" Then
	      write_switch = write_switch - 1
	    End If

	  Next i

	  かっこ内の文字列を消す = Return_St

	End Function
アドベントカレンダーを通じて「過去の自分に会える日記」を開発

12月1日からの25日間、「[kota matsuokaの1人アドベントカレンダー ~Pythonで0からサービスを開発~ Advent Calendar 2018](https://qiita.com/advent-calendar/2018/renttle)」を書いてきました。(実は2日分さぼって、まだ全部埋まってません。)

このカレンダーの内容を多く使って、サービスを作っています。この記事は、最終日の記事なので、そのサービスの紹介をしたいと思います。

「過去の自分に会える日記」をつけられる LINE Botはこちら↓
<a href="https://line.me/R/ti/p/%40vfz7725m"><img height="36" border="0" alt="友だち追加" src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png"></a>
Web版は[こちら](https://renttle.jp/about)

<img src="https://qiita-image-store.s3.amazonaws.com/0/185039/1a837af2-a18f-3d91-e0f5-ce84e0746aa0.jpeg" width=50%>

## 目次
- Renttle Diary とは
- Renttle Diary の使い方
    - 今日の日記の投稿機能
    - 過去の日記の閲覧機能
- 作成した経緯

## Renttle Diary とは
毎日異なる質問に答えながら、日記をつけていくアプリです。質問は、自分の生活や自分の嗜好に関するものが多いです。自分の生活を振り返ったり、見つめ直すきっかけにしていただけると幸いです。
(もちろん、質問の回答以外の物事を日記として投稿しても問題ありません。)

毎日、自分の言葉で日記を残すことで、あなたの人生がここに蓄積されていきます。

## Renttle Diary の使い方
機能は大きく分けて、2つあります。
「**今日の日記の投稿機能**」と「**過去の日記の閲覧機能**」です。

## 今日の日記の投稿機能
上の「LINEの友だち追加」ボタンからLINE Botを友だち追加して、それと見比べながら、読み進めてください。

### LINEから日記を投稿する
<img src="https://qiita-image-store.s3.amazonaws.com/0/185039/149bd922-f89b-0f2f-9b9f-a3448ce2e663.png" width="30%">

LINEのチャット画面下部の「メインメニュー」を選択すると、リッチコンテンツが表示されます。
その左上「LINEから投稿」を選択すると、今日の質問がメッセージとして出力されます。

その質問の回答を、通常のメッセージ送信と同じように送れば、それが今日の日記として保存されます。

このあたりの機能は、[アドベントカレンダーの前半の記事](https://qiita.com/kotamatsuoka/items/c4e651f1cb6c4490f4b8)を見れば、実装できます。

### Renttle内の専用ページから日記を投稿する
もう一つ、日記を投稿する方法があります。それは、専用ページに遷移してから、投稿する方法です。

<img width="30%" alt="Image_from_iOS__3_.png" src="https://qiita-image-store.s3.amazonaws.com/0/185039/bf14b327-88d0-a7af-61c8-86043cdd9e97.png">


先程と同じように「メインメニュー」を選択して、「専用ページから投稿」を選択すると、**専用の投稿ページ**に遷移するためのメッセージが送られてきます。

## 過去の日記の閲覧機能
日記ですから、もちろん見返すことができます。

### ランダムな過去の日記
日記の投稿時と同様に「メインメニュー」を開き、「**過去の日記【ランダム】**」を選択します。
そうすると、過去に自分が投稿した日記がランダムに**1件**が抽出されて、「その日の質問」と「その日の日記」がメッセージとして送信されます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/185039/e67654e7-18d0-c4d9-e8fd-94b70d01be61.png" width=30%>

### 今日と同じ質問に答えた日記
日記の投稿時と同様に「メインメニュー」を開き、「**過去の日記【同一日】**」を選択します。
そうすると、過去に自分が投稿した日記で**今日の質問と同じ質問に答えた日の日記**が**全て**、メッセージとして送信されます。

<img width="30%" alt="Image_from_iOS__2__2.png" src="https://qiita-image-store.s3.amazonaws.com/0/185039/e5065848-a4dc-bcd5-7027-67fde528bd00.png">

## 作成した経緯
日頃の生活を有意義に過ごしている人たちや、社会的に成功している人たちの多くは、「日記」をつけたり、「メモ」をこまめに取ったりしています。

その目的は人それぞれで、
「思考の整理をしたり」
「その日の出来事を忘れないように文章として残しておいたり」
「自分の考えを言語化したり」
「流れ行く生活を目に見えるものに変換して見返したり」
など、様々だと思います。

そんな素敵な習慣を身につけるためのきっかけになれれば、嬉しく思います。ぜひ、使ってみてください。

<a href="https://line.me/R/ti/p/%40vfz7725m"><img height="36" border="0" alt="友だち追加" src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png"></a>

僕自身も約一年前に、このような形式の紙媒体の日記を友人にもらって、毎日書いています。一年前に自分が書いた**夢**や**目標**、**ちょっとした感情の記録**に刺激を受けながら、今日をより良い一日になるように行動しています。
そうやって、**今の自分が過去の自分に背中を押される人**が一人でも増えたら、嬉しいです。

#### P.S.
まだ埋まっていないアドベントカレンダーも近々ちゃんと投稿するので、少々お待ちを。
世界初の"培養"ステーキの生産へ - イスラエルのスタートアップ

原文 - [Israeli Company Claims Invention of First ‘Lab Grown’ Steak](https://learningenglish.voanews.com/a/israeli-company-claims-invention-of-first-lab-grown-steak/4704238.html) : 2018/12/19

イスラエルの会社であるAleph Farmsは、実験室で「成長する」世界初のステーキを生産したと発表した。

テルアビブ（イスラエルの人口第2位の都市）に本拠を置くAleph Farmsの研究者たちは、動物を屠殺しない方法で食用肉の製造に成功したと発表した。同社の発明は「本物の牛ステーキの食感と構造」であると主張している。

Shulamit Levenbergは、Aleph Farmsの共同創設者であり最高科学責任者。彼女は、同社の製品は「クリーンミート」だと考える。これは、清潔で管理された環境で育ち、動物を殺す必要がないためだ。

培養肉生産に反対する者の中には、「クリーンミート」という用語を用いるべきでなく、「合成肉(synthetic meat)」がより正確な表現であると主張する。多くの企業が、野菜をベースにした製品でリアルな肉の代用品を作り出そうとしてきた。他にも、米国を拠点とするJust社のような企業も、研究室で培養された牛肉を生産する計画を行っている。

このプロセスは、科学者が実際の牛から細胞組織を集めることから始まる。 Aleph Farmsは、これは動物に害を与えることなく簡単に終えるとしている。それから抽出された細胞は成長するための栄養分を与えられ、分裂、培養が進められていく。

そうして培養された細胞は3D技術を使用して、ステーキチップ(注：意訳。原文では"realistic tissue"）に形作られる。同社によれば、3週間という短い期間で肉片を製造することができ、１枚の製造にかかる費用は約50ドルとのこと。

Levenbergによると、これまでラボで培養される動物肉は、たいてい1種類または2種類の細胞組織の単純な構造に限られているそうだ。これでは本物のステーキと同様の食感、形、味を楽しめる肉を生産するのは難しい。そのため、これまでのところ細胞培養で作られた食肉製品の開発は、(１種類または２種類の肉をブレンドすればよい)ひき肉に限られていた。

Levenbergによると、Aleph Farmsはこれまで食べられてきたステーキと同様の「4種類の動物細胞」を使用して、筋肉、脂肪および結合組織を含む、ステーキの同じような特性を含む肉片を作り出すことができた。同社はこの生成手法を、消費者が望む牛肉に食感を近づけるための重要なものだと考える。

[Aleph FarmsのWebサイト](https://www.aleph-farms.com/)には、ステーキの調理、下準備、食べ方に関するビデオが掲載されている。

更に生産コストを下げるために、同社はまだ技術開発を続けていく方針。ステーキ製品は2年以内に販売される予定だ。 Aleph Farmsは、この生産方法によって、これまでの牛肉の生産に必要な土地、水、食料資源の量を大幅に減らすことを期待している。

国連食糧農業機関(FAO)は、肉の需要は2050年までに70％近く増加すると予測している。それにより世界中で資源不足を引き起こし、環境に悪影響を及ぼす可能性があると述べる。

2018年の初め、オランダのMosa Meat社は2021年までに培養肉を製造、レストラン向けに販売する計画を発表した。同社は2013年に発表して以来世界で初めてラボで培養肉からハンバーグを製造した。

Mosa Meat社も同様のプロセスを使って牛肉を作るが、Mosa Meat社はステーキではなく、主にハンバーガーを作るための牛挽き肉製品の発売を開始する予定だ。

同社は、培養肉の生産プロセスでは、これまでの食肉生産よりも96％少ない温室効果ガスの排出量にとどまり、加えて、99％少ない土地と96％少ない水で生産できるとしている。(編集：Bryan Lynn)