OmniAICreator/Qiita-1.07M huggingface dataset:
Sketch & Zeplinでエンジニアと仲良くなる。

# 概要
こんにちは。デザイナーの塚本です。
弊社ではデザインツールとしてSketchを導入しており、個人的にも毎日触っているので今回、**Sketch Advent Calendar 2017**に参加しました。

デザインの仕事をしているとデザイナーとエンジニアの間でうまくデザインの共有ができていなかったり、そもそも認識の違いがあったり。。。結果、心穏やかではない状況に陥ってしまったという話を聞くことがあります。

その原因のほとんどがおそらくデザイナーからエンジニアに渡す仕様書がうまく機能していないことにあるかと思われます。

この記事ではそういった問題を解消し、より円滑に仕事を進めてデザイナーがエンジニアと仲良くなろう！という視点のもと筆を執るならぬキーボードを叩きたいと思います。
具体的にはZeplinというツールを用いたデザインの共有方法を紹介していきます。

# Zeplinとは
まず初めに簡単にZeplinというツールの紹介をします。

![zeplin.png](https://qiita-image-store.s3.amazonaws.com/0/207054/4c1e09cf-7964-ac97-3615-ee229a5cd396.png)


ズバリ、仕様書の代わりになるツールです。

SketchファイルをZeplinにインポートするだけで、以下の画像のようにZeplin上で自動的にコンポーネント間の距離やfont-sizeなどの情報が生成され、仕様書ができてしまいます。

<img width="875" alt="スクリーンショット 2017-12-07 13.04.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/207054/d96cd77d-527d-ec1c-6693-e25d7f00b4ec.png">


# Zeplinを導入するメリット
それではZeplinを導入するメリットを挙げていきたいと思います。自動的に仕様書ができてしまうというだけでもメリット爆発ですが、もう少し細かく見ていきたいと思います。

- 前述しましたが、仕様書が自動的に作成されます。結果、仕様の記載漏れというヒューマンエラーを防げる。
- Zeplin上でデザインデータを共有できるので、「Sketchのソフトがないからファイルを開けない」「デザインデータをいちいち画像に書き出して送付する」「デザインデータをダウンロードして開く」といった手間が無くなる。
- デザインデータ上にコメントを追加できる機能があるので、修正が出てきた場合やエンジニア側から疑問点が出てきた場合、デザイナー・エンジニア間でコミュニケーションが取りやすい。メールやチャットでテキストで説明する必要がなくなる。

<img width="849" alt="スクリーンショット 2017-12-07 13.11.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/207054/81927342-1d12-e7c7-93dd-57244ead3cdb.png">


- 変更履歴が残っているので、どこを変更したかを確認できる。
- 仕様書を作成する時間が極端に削減されるので、より良いデザインやコンテンツ作りに使う時間が生まれる。仕様書作成というフローはあくまで制作側で発生・完結するものなので、ユーザー体験には関わってきませんよね。その時間が削減されるのはデザイナーにとっては嬉しいですね。

このようにデザイナーとしても嬉しい点が多々ありますが、エンジニアとのコミュニケーション効率もかなり上がると思っています。

# 運用事例
弊社ではZeplinでより円滑に認識を共通化するため、Sketchのアートボード名をサイトマップのパスベースにしています。例えば、商品ページであれば、パス名が```/products```、アートボード名も```/products```といった具合です。

モーダルウィンドウを使う場合はパスが存在しないので、アートボード名としては```/products_modal```として現状、対応しています。

レスポンシブデザインの場合、PCとMobileでそれぞれ、```pc-/products```や```mobile-/products```としています。

命名規則に関してはまだ改善の余地があるのではないかと考えているので、何かいいアイデアや事例等があれば、ぜひ教えていただければ幸いです。

# 最後に
Zeplinを用いたデザインの共有方法を紹介しましたが、いかがでしたでしょうか。

これからもどんどん他のツールが誕生・強化されていくことが想定されますが、個人的にはZeplinを用いるのは現状のベストプラクティスだと感じています。

Sketchは導入しているけど、デザイン共有に苦慮している方はZeplinを導入してみてはいかがでしょうか。仕事の効率化はもちろん、デザイナーとエンジニアがもっと仲良くなるでしょう！
公共Galaxyサーバー（微生物以外）

[前回](https://qiita.com/haruosuz/items/2e8692869887be8a808d)は、微生物関連の公共Galaxyサーバーをご紹介しました。今回は、他の公共Galaxyサーバーの一部（リピート配列、化学、融合転写物、コドン、系統解析、RDFに関連）をご紹介します。

### [RepeatExplorer](https://galaxyproject.org/public-galaxy-servers/repeatexplorer/)
真核生物NGSデータにおける反復配列（トランスポゾン）の検出。

![](https://galaxyproject.org/public-galaxy-servers/RepeatExplorerHomePage300.png)

### [Chemical Annotation Retrieval Toolkit (CART)](https://galaxyproject.org/public-galaxy-servers/chemical-annotation-retrieval-toolkit-cart/)
化学物質アノテーション検索

![](https://galaxyproject.org/public-galaxy-servers/CART.png)

### [ChimeRScope](https://galaxyproject.org/public-galaxy-servers/chimerscope/)
トランスクリプトーム配列（RNA-seq）データにおける融合遺伝子の検出

- 論文 [Li Y et al. Nucleic Acids Res. 2017 "ChimeRScope: a novel alignment-free algorithm for fusion transcript prediction using paired-end RNA-Seq data."](https://www.ncbi.nlm.nih.gov/pubmed/28472320)

![](https://galaxyproject.org/public-galaxy-servers/chimerscope.png)

- [Fusion Gene Analysis | 株式会社理研ジェネシス](https://rikengenesis.jp/contents/ja_JPY/sequencing_fusiongene.html)
- [Fusion Gene解析｜タカラバイオ株式会社](http://catalog.takara-bio.co.jp/jutaku/basic_info.php?unitid=U100006933)

### [Codon Harmonizer](https://galaxyproject.org/public-galaxy-servers/codon-harmonizer/)
異種遺伝子発現のためのコドン改変

- 論文 [Claassens NJ et al. PLoS One. 2017 "Improving heterologous membrane protein production in Escherichia coli by combining transcriptional tuning and codon usage algorithms."](https://www.ncbi.nlm.nih.gov/pubmed/28902855)

### [kmer-SVM](https://galaxyproject.org/public-galaxy-servers/kmer-svm/)
サポートベクターマシン（SVM）を使用

![](https://galaxyproject.org/public-galaxy-servers/kmer-SVM.png)

- [k-mer countingに関するメモ - Qiita](https://qiita.com/antiplastics/items/c1532474e943ac2d1b0a)

### [MGEScan](https://galaxyproject.org/public-galaxy-servers/mgescan/)
真核生物ゲノム配列中の[長い末端反復 (Long terminal repeat, LTR)](https://ja.wikipedia.org/wiki/長い末端反復) を同定

![](https://galaxyproject.org/public-galaxy-servers/MGEScanVideoStart.png)

### [Osiris](https://galaxyproject.org/public-galaxy-servers/osiris/)
系統解析

- 論文 [Oakley TH et al. BMC Bioinformatics. 2014 "Osiris: accessible and reproducible phylogenetic and phylogenomic analyses within the Galaxy workflow management system."](https://www.ncbi.nlm.nih.gov/pubmed/24990571)

![](https://galaxyproject.org/public-galaxy-servers/OsirisLogo.jpg)

### [PIA](https://galaxyproject.org/public-galaxy-servers/pia/)
系統解析

- 論文 [Speiser DI et al. BMC Bioinformatics. 2014 "Using phylogenetically-informed annotation (PIA) to search for light-interacting genes in transcriptomes from non-model organisms."](https://www.ncbi.nlm.nih.gov/pubmed/25407802)

### [RDF2Graph](https://galaxyproject.org/public-galaxy-servers/rdf2graph/)
RDF2Graph recovers the structure of an RDF resource.

![](https://galaxyproject.org/public-galaxy-servers/RDF2Graph_reactome.png)
【随時更新】最近学んだSQL　まとめ


2017/12/07

#複数のクエリを組み合わせた抽出 -FROM,IN

##例題
顧客IDごとに累計売上を合計し、1顧客あたりの平均売上、最低売上、最高売上を求める

```
SELECT
    AVG(total_sales),
    MIN(total_sales),
    MAX(total_sales)
FROM
   (SELECT
      customer_id,
      SUM(amount) AS total_sales
    FROM
      payment
    GROUP BY
      customer_id
   ) AS customer_payment;
```

###例題

INを用いて、2007年5月に支払いがあった顧客のlast_nameを抽出する
JOINでやってしまうと、その分行が膨れ上がってしまい処理時間がかかってしまう。


```
SELECT 
    last_name
FROM
    customer
        (SELECT
            customer_id
        FROM
            payment_p2007_05 
        )
;
```

例題
paymentテーブルから、2007年1月の売上データを抽出する

```
①
SELECT
    SUM(amount) AS total_sales
FROM
    payment_date >= ‘2007-01-01’
    ◯   AND payment_date <=‘2007-02-01’
    ☓    AND payment_date <=‘2007-01-31’
;
☓の場合だと2007-01-31:0000のものとなり、実質集計されないから
```

②

```
SELECT
    SUM(amount) AS total_sales
FROM
    payment
WHERE
    CAST(payment_date AS DATE)
        BETWEEN ‘2007-01-01’ AND ‘2007-01-31'
```

#テーブル関連

##テーブルのカラム構造+データをコピー
(この方法だと、AUTO_INCREMENTなど一部の属性はコピーされないので注意)

```
CREATE TABLE 新規テーブル名 WHERE * FROM 元となるテーブル名
```

##カラム構造のみコピーして新規テーブルの作成

```
CREATE TABLE 新規テーブル名 LIKE 元となるテーブル名
```

##他のテーブルのレコードをコピー

```
INSERT INTO テーブル名 WHERE * FROM 元となるテーブル名
```
##WHERE　と　HAVINGのちがい
→適用される順番がちがう
WHERE → GROUP BY → HAVINGの順番
つまりWHEREを用いた場合、WHEREが先に適用されるため、GROUP BYで集計した結果に対して、絞り込みをすることができない

#POSIX正規表現

###例題
filmテーブルのdescriptionに入っている Thoughtful　または　Insightful　の数を求める
MySQLとPostgreSQL　によって若干書き方が異なる

####MySQLの場合
```
SELECT
    COUNT(*)
FROM
    film
WHERE
    description REGEXP ‘(Thou | Insi)ghtful’;
```

####PostgreSQLの場合

```
SELECT
    COUNT(*)
FROM
    film
WHERE
    description REGEXP ~'(Thou | Insi)ghtful’;
```
Light / Darkテーマを使ってAppをパーソナライズする

[tvOS Advent Calendar 2017](https://qiita.com/advent-calendar/2017/tvos) 17日目担当の @hryk224 です。

今日はtvOSのアピアランスのLight　/　Darkテーマについて書きたいと思います。

# はじめに

AppleTVはアピアランスをユーザーが選択することが出来ます。
設定アプリから「一般」->「アピアランス」で

- ライト
- ダーク
- 自動

から選択することが出来ます。

※自動にすると、昼間はライト・夜間はダークにOSが自動で変更してくれます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/16417/34cb9d7a-dcc9-7911-0afe-c327bb978f92.png" width="45%"> <img src="https://qiita-image-store.s3.amazonaws.com/0/16417/6bcbef2c-4b0d-2eb3-a45d-a0ad4630cfe6.png" width="45%">

<img src="https://qiita-image-store.s3.amazonaws.com/0/16417/78743abb-8a03-6cbd-9b3e-00ba96bbfeb4.png" width="45%"> <img src="https://qiita-image-store.s3.amazonaws.com/0/16417/da83a918-d59f-784d-b728-c9e241cacf50.png" width="45%">

変更された状態でAppStoreを開くとこんな感じです。
ユーザーに与える印象がちがいます。

※ シミュレータでは **command + shift + d** のショートカットで Light / Dark を切り替えることが出来ます。

# Appでこれらの設定を使う・使わないようにするには

App内で、アピアランスの設定を採用するには `Info.plist`内に`UIUserInterfaceStyle`の値を`Automatic`にする必要があります。
また、アピアランスの設定を無視したい場合は値を`Light`または`Dark`にします。
設定しない場合や不正な値が入力された場合は常に`Light`が採用されます。

※`UIUserInterfaceStyle`キーはtvOS10以降でサポートされています。

# アピアランス毎にAppをパーソナライズする

UIViewの`Default`に設定されているカラー情報はアピアランスによって変更されます。
例えばUILabelの文字色などは、Lightは黒、Darkは白になります。

また、`UIVisualEffectView`の`UIBlurEffectStyle`などもアピアランスによって変更されます。
※tvOSには`extraDark`という値も追加されているので、`regular`が Light / Dark、`prominent`が extraLight / extraDark になります。

[extraDark \- UIBlurEffectStyle \| Apple Developer Documentation](https://developer.apple.com/documentation/uikit/uiblureffectstyle/2206725-extradark)

個別で変更したい場合は、コード・またはstoryboard,xib上で変更する必要があります。

### コードから変更する場合

`UITraitCollection`に`userInterfaceStyle`というgetterプロパティがあり、そこで取得することが出来ます。

```
switch traitCollection.userInterfaceStyle {
case .light:
    label.textColor = .black
case .dark:
    label.textColor = .white
case .unspecified:
    label.textColor = .red
}
```

### storyboard,xibから変更する場合

コンポーネントから`+`で各アピアランス毎の値を追加することが出来ます。
下記はLabelのColorにLight / Darkでそれぞれ色を指定しています。

![スクリーンショット 2017-12-07 13.33.55-fs8.png](https://qiita-image-store.s3.amazonaws.com/0/16417/bf2eaf43-3741-e228-356b-512e9bf74b57.png)

ちなみに、Storyboard 上でもそれぞれのアピアランスでの表示を確認することができます。

![スクリーンショット 2017-12-07 13.29.58-fs8.png](https://qiita-image-store.s3.amazonaws.com/0/16417/cd0b4fe5-8d6c-8501-36e8-c38e824092aa.png)

# まとめ

以上、簡単では、ありますが「Light / Darkテーマを使ってAppをパーソナライズする」方法についてでした。
ユーザー毎のアピアランス設定はAppleTV独特の設定なので、可能な限り対応したいですね。

[tvOS Advent Calendar 2017](https://qiita.com/advent-calendar/2017/tvos) 明日は @dekatotoro で 「tvOSでモニタリングツール作成のすすめ」 です！

# 参考

- [tvOSアプリケーションプログラミングガイド：Apple TVとtvOS](https://developer.apple.com/jp/documentation/General/Conceptual/AppleTV_PG/index.html)
- [UIUserInterfaceStyle \- UIKit \| Apple Developer Documentation](https://developer.apple.com/documentation/uikit/uiuserinterfacestyle)
ちょっと危ないStackOverflowの歩き方

プログラミングに関する調べ物をしていると、検索結果によく登場するQ&Aサイト「StackOverflow」。お世話になっている方も多いですよね。英語の壁はありますが、閲覧ばかりでなく[参加もチャレンジ](https://qiita.com/yohhoy/items/9fc18aa2e349907ccb16)してみてください。

StackOverflowではプログラミングに関するあらゆる話題を扱うため、質問へのタグ付けによって分類整理が行われます。例えば、プログラミング言語Cに関する質問には[タグ`c`][tag-c]が付いており、StackOverflowサイト内の検索ボックスで「`[c] キーワード`」のような絞り込み検索が便利です。


# language-lawyerタグ
たくさんあるタグの一つに、[`language-lawyer`][tag-ll]（直訳すると「言語法律家」）という一風変わったタグがあります。同タグの説明によると：

> For questions about the intricacies of formal or authoritative specifications of programming languages and environments.
> （簡訳）プログラミング言語や環境の公式ないし権威ある仕様についての込み入った疑問に関する質問用

なんだか難しそうですね。

このタグは、普通のプログラマが気にする「○○ライブラリの××機能を使いたい！」「この問題はどうやったら直せるの？」といった質問ではなく、「この実行結果は仕様通りといえるか？」「仕様書の解釈はこれで妥当か？」のような質問に使われます。

[tag-c]: https://stackoverflow.com/questions/tagged/c
[tag-ll]: https://stackoverflow.com/questions/tagged/language-lawyer


## C言語仕様に関する質問

2017/12/7現在、[タグ`language-lawyer`][tag-ll]が付いた質問 3236件 に対して、さらにタグ`c`をAND条件指定すると 617件 が抽出されます。C言語仕様に関する質問が、同タグの 2割(19.1%) を占める計算です。罪深い。

```
 　|￣￣￣￣|＼
 　| 19.1% |　|
 　|　　 　 |　|
 　|　　 　 |　|
 　|　　 　 |　|
￣￣￣￣￣￣￣￣￣￣
```

個人的に、面白いと感じた質問をいくつかピックアップしてみました。興味が無ければ「あー世の中にはこんな事をこんなに議論する人がいるんだなぁ」程度の暖かい目で見てください。

- [Is &errno legal C?](https://stackoverflow.com/q/12945486/684921)
- [Understanding the C11 type hierarchy](https://stackoverflow.com/q/20448882/684921)
- [Does a[a[0]] = 1 produce undefined behavior?](https://stackoverflow.com/q/32152371/684921)
- [Why does `int ;` compile fine in C, but not in C++?](https://stackoverflow.com/q/33273550/684921)
- [Does printf(“%x”,1) invoke undefined behavior?](https://stackoverflow.com/q/4664100/684921)

おまけ： 自分でしてみた質問「[What does 'transmitted' mean in printf function return?](https://stackoverflow.com/q/28756793/684921)」もあります。このときは単に英文解釈の誤解という回答でした。C++言語ですが、質問「[why `S x({})` invoke default constructor in GCC 7/C++1z mode only?](https://stackoverflow.com/q/44015848/684921)」は少し盛り上がったように思えます。"Stack Overflow, where compiler bugs are found from unusual questions."コメントでクスっときました。


## ちなみに
プログラミング言語C++に関する質問には[タグ`c++`][tag-cpp]が付与されています。2つのタグ`language-lawyer`×`c++`でAND条件検索すると... 2505件 抽出されました。これはタグ`language-lawyer`のうち、C++言語仕様に関する質問が 約8割(77.4%) も占める計算です。

実際には`c`, `c++`タグが同時に付けられるケースもあり、`language-lawyer`タグに占めるプログラミング言語別の割合はこんな感じです：

|プログラミング言語|件数|割合|
|:---:|---:|---:|
|Cのみ  | 499 件|15.4%|
|C/C++ | 118 件| 3.6%|
|C++のみ|2387 件|73.8%|
|その他  | 232 件| 7.2%|

~~やはり人類にC++言語は早すぎたのだ。~~

[tag-cpp]: https://stackoverflow.com/questions/tagged/c%2b%2b
大した事ないエンジニアが初めてOSSにコントリビュートした話

# はじめに
この記事は[MicroAd Advent Calendar 2017](https://qiita.com/advent-calendar/2017/microad)の7日目の記事です．

先日，「[AkkaにPull Requestをあげようハッカソン](http://blog.scalamatsuri.org/entry/2017/11/15/133342)」に参加してきまして，その際に初めてOSSにコミットができました．夢のOSSコミッタとして初めて活動できたことへの感動をここに書き留めさせて頂ければと思います．

# AkkaにPull Requestをあげようハッカソンとは？
akkaというScala/Javaエンジニアにはお馴染みのOSSにプルリクエストを送ってみましょう！という趣旨のイベントで，限られた時間内にコントリビュートすることが目的なハッカソンです．
「[ScalaMatsuri](http://2017.scalamatsuri.org/)」(日本のScalaカンファレンス)の運営の方々の主催で，凄腕エンジニアの手厚いサポートの元，参加者は安心して開発に取り組めるという夢のような環境でプログラミングが出来ます．

憧れの**OSSコミッタ**になれるかもしれない・・・ということで僕はconnpassで発見した瞬間に即申込みしました笑
ちなみに，今回のイベントはScalaMatsuriの本番に先駆けてのテストイベントみたいな位置づけのようです．

# 何をどうしていいのか分からない前編
会場に着くと，Scalaエンジニアが一杯いて感動しました．最初に今回のイベントの趣旨や進め方を聞いて，ほどなくして開発時間に移行します．開発時間に出来る限りの時間を割いてくれるのはすごく嬉しいですね．
ということで

- **「issueを見つけること」**

これがコントリビュートへの第一歩だと教わりました．
**help wanted**というタグがついたissueは簡単に修正できるようで，早速issue探しを始めます．
![スクリーンショット 2017-12-07 12.58.38.png](https://qiita-image-store.s3.amazonaws.com/0/190121/0f8fd25d-d1ce-2ac5-c854-051c612c0e1a.png)

- **「issue見ても分からない・・・」**

緑色のタグがついてるがhelp wantedなissueなのですが，どれもこれも，何をすればいいのか良くわからないという・・・それもそのはずで，ある程度はakkaの内部実装を知っている前提でissueは書かれているので，経験値も少ない僕にとっては全くピンと来ないのでした．
ただし，そんな事は運営側の想定内．僕みたいな哀れなエンジニアのために事前にいくつかのissueをピックアップしてくれており，大変助かりました．

# issueが決まって開発に取り組む中編
![スクリーンショット 2017-12-07 13.10.41.png](https://qiita-image-store.s3.amazonaws.com/0/190121/e2bdc0c2-948a-3711-6bf3-137bf544703e.png)
↑のissueを紹介してもらったので，それを解決することを目指すことにしました．内容としては，「リソースが使用中かどうかの判定処理が必要だよ！」という感じです．
これは確かに簡単そうだ！と思いましたが，いざコーディングしようと思うと，一体全体これでいいのか？！という不安にかられます．事前にコーディング規約を読むべきだったなぁと反省です．
ともあれ，開発中はスタッフの方に質問させて頂きながら進めました．ペアプログラミングをやって頂けるので非常に勉強になりました．

- **「ペアプロってすごく良い・・」**

としみじみと感じました．
プロダクションコードの修正は簡単なのですが，どうやらテストの修正が難易度が高く，そちらに多くの時間を費やしていきました．そして，スタッフの方々の多大なサポートのもと，無事時間内に修正は完了しました．

# 本当にプルリクエストを送れてしまった後編
修正は僅か数十行ですが，issueの解決に無事成功し，テストも全件パスしていよいよプルリクを送る時間がやってきました．そして，**レビューはその場でしてもらえる**というスピード感．嬉しすぎます．
イベントに参加する前はまさかプルリクを送れるとは思っていなかっただけに胸の高鳴り，高揚感がこみ上げてきて幸せ指数の高まりを感じました．
![スクリーンショット 2017-12-07 13.34.40.png](https://qiita-image-store.s3.amazonaws.com/0/190121/8dbc7c9f-e018-924f-2dcf-1f9db9bbe308.png)
そして，CIツールの便利さを改めて実感．自動でプルリクにラベルの付け替え，テスト，レビュー可否などを視覚的にも表示してくれる機能は便利過ぎですね．

そして，複数のレビュアの方に見て頂いて，そこで様々な議論がなされる様をまじまじと見ていて感動の一言．
議論の話について行けてない僕が質問をしたところすごく丁寧な回答をもらって感涙です．
↓質問して超丁寧な回答を頂く様
![スクリーンショット 2017-12-07 13.44.56.png](https://qiita-image-store.s3.amazonaws.com/0/190121/386efdd4-9da4-43e5-26f7-2fb88cf368d6.png)

# おわりに
数日後，無事にmasterにマージされて，遂にOSSコミッタの第一歩を踏み出した感じがしました．このイベントの主催の方々やスタッフの皆さんには圧倒的感謝です．そして，OSS開発ってすごくいいな．と感じました．

普段は会社内のプロジェクトと個人的な開発をするだけですが，OSSに参加することで，全く新しい知見が得られますし，issueを通した議論は個人的にはめちゃくちゃ楽しいです．
何より普段使っているライブラリに自分の手が加わったという感動は何にも代えがたい経験になりました．

何気なくOSSのコミッタになりたいなぁとか思ってたことはありましたが，実際に行動したことで，OSSのコミットに対する欲求が高まるのを感じています．
この感動を忘れないよう，これからはOSSのコントリビュートを積極的に進めていきたいと思いました．
[ios]firebase storageを使用して、画像をアップロードしてからRealtime DatabaseにURLを保存するまで

Firebaseを利用して、ユーザーのプロフィール写真をアップロードした後、そのURLを取得して、Realtime databaseに登録するまでの一連作業。
意外と簡単だったけど、Realtime databaseに保存する時に、取得したURLの型を変更する必要があるのを知らず、少しだけ詰まった。


```swift:ViewController.swift
        func fileupload(deta: UIImage) {
        //保存するURLを指定
        let storageRef = storage.reference(forURL: "自分のプロジェクトのURL")
        //ディレクトリを指定
        let imageRef = storageRef.child("User").child("image.jpg")
        //保存を実行して、metadataにURLが含まれているので、あとはよしなに加工
        let imageData = UIImageJPEGRepresentation(deta, 1.0)!
        imageRef.putData(imageData, metadata: nil) { metadata, error in
            if (error != nil) {
                print("Uh-oh, an error occurred!")
            } else {
                //URL型をNSstring型に変更
                let downloadURL = metadata!.downloadURL()
            
                let deta = downloadURL?.absoluteString
                self.ref = Database.database().reference()
                self.ref.child("User").child(self.userID!).updateChildValues(["profile":deta])
                print("成功！")
            }
        }
   }
```
要素が表示されたら〜をIntersectionObserverで実現する

表題の通りですが、簡単なメモを残しておきます。

## 要件
- 要素がビューに入った際に**1度だけ**処理が走る
- 画面描画時に既に要素が表示されている場合は処理を即実行させる
- クロスブラウザに対応させる

対応ブラウザは以下を参照
[IntersectionObserver/polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)

## デモ
[jsdo.it](http://jsdo.it/bgn_nakazato/Ob2r)（`console.log`吐いてるだけなのでわかりづらいですね・・・）

## 解説
以下のjavascriptを３段階に分けて解説していきます。
また、polifillは**rawgit**を使用して読み込んでいます。
※rawgitについては[【個人メモ】rawgithub(CDN)のサービスがアップデートされてた](https://qiita.com/futoase/items/8e20db8f7a191941d6b6)を参考にしました。

``` javascript
var intersectionObserver = new IntersectionObserver(function(entries) {
    // target is out of view
    if (entries[0].intersectionRatio <= 0) return;

    // one time firing
    intersectionObserver.unobserve(entries[0].target);
    
    // some functions...
    fn(entries[0].target);
});

var elements = document.querySelectorAll('.block');
Array.prototype.forEach.call(elements, function (elm) {
    if (elm.getBoundingClientRect().top <= window.innerHeight) {
        // target is already displayed
        fn(elm);  
    } else {
        intersectionObserver.observe(elm);
    }
});

function fn(target) {
    console.log('entered the view: ' + target.className);
}
```

### インスタンス生成
``` javascript
var intersectionObserver = new IntersectionObserver(function(entries) {
    // target is out of view
    if (entries[0].intersectionRatio <= 0) return;

    // one time firing
    intersectionObserver.unobserve(entries[0].target);
    
    // some functions...
    fn(entries[0].target);
});
```
ここではインスタンスを生成し、要素がビューを出入りした際の処理をコールバックで書いています。
中に３つの処理を書いていますが、それぞれ

- １つ目：**要素が外に出た際には処理しない**
- ２つ目：**一度処理が走ったら以降処理しない**
- ３つ目：**何かしらの処理を外部関数で行う**

という感じになっています。
`entries[0].target`にイベントが発生した要素が入っていますので、これを外部関数`fn`に渡しています。

### インスタンスに要素を渡す
``` javascript
var elements = document.querySelectorAll('.block');
Array.prototype.forEach.call(elements, function (elm) {
    if (elm.getBoundingClientRect().top <= window.innerHeight) {
        // target is already displayed
        fn(elm);  
    } else {
        intersectionObserver.observe(elm);
    }
});
```
今回は`.block`という要素が複数あることを想定しています。
`Array.prototype~`とやっているのは、`querySelectorAll`で取得できるのが`NodeList`という配列に似た何か（表現雑・・・）で、Chromeだとそのまま`forEach`で回ったりするのですが、確かIEだとエラー出るのでその回避のための記述です。

この中で行っている条件分岐は、**要素が既に表示されていたら（既にビューを超えて画面上部に消えている場合も含む）**というもので、`true`なら外部関数を即実行、`false`ならインスタンスに要素を渡す、としています。

### 外部関数
``` javascript
function fn(target) {
    console.log('entered the view: ' + target.className);
}
```
この外部関数は、`observer`から呼ばれるものと**要素が既に表示されていたら〜**から呼ばれる共通の関数です。
引数、内容はそれぞれの要望に合わせて変更してください。

## おわりに
javascriptの進化半端ない
cssでmarginとpaddingのどっちがどっちだったかを覚えるためのごろ合わせ


margin： 要素の外側の余白
padding: 要素の内側の余白

よく忘れてしまうのでいい語呂合わせ考えた。

# まっぱで外に出るな

```
まっぱで外に出るな
```

```
mappaで外に出るな
```

```
mapaで外に出るな
```

```
ma　　pa
外に　出るな（出ない＝内側）
```

# おまけ：指定順のごろあわせ

指定時の順序設定もよく忘れるのでごろ合わせ

```
margin: X;（上下左右共通。覚える必要なし）
margin: X X; うみ（上下、左右）
margin: X X X;  うみっしー（上、左右、下）
margin: X X X X; うみげざ（上、右、下、左）
```

うみで
うみっしー（ふ●っしーみたいなやつ）が
うみげざ（海の中で土下座）
しているところを思い浮かべるといいかも
Redisをhash形式にすると容量軽くなるっていうけどどうもよくわからない

すみません有用な結論はないです。
検証した結果よくわからなかったということで、いったんここで打ち切りがてらメモ。
内容はしょって書いてありますが検証コードと結果をあげたgithubのリンクを最後にはりつけてあります。
検証用のコードは主にpythonで書きました。

# どういうことかというと

RedisのHash型を活用するとメモリ使用量が激減
https://siguniang.wordpress.com/2013/02/16/hash-reduce-memory-usage-in-redis/

って素敵な記事を読みまして。

hash形式でデータ格納すると、Redisで圧縮かかって必要なメモリ容量めっちゃ減るよ！ってな感じのことが書いてあるじゃないですか。（ナナメ読みしかしてませんごめんなさい）

その差、なんと５倍！

で。

# 仮説１

前項のことについて

以下のようなデータがあるとして

```
key1: hogehoge1
key2: hogehoge2
key3: hogehoge3
```

以下のように個別のキーにしてRedisに格納するよりも

```
redis-key1: hogehoge1
redis-key2: hogehoge2
redis-key3: hogehoge3
```

以下のように、１つのキーにhashでまとめてデータつっこんだほうが

```
redis-hash-key-hoge: {
			hash-key1: hogehoge1
			hash-key2: hogehoge2
			hash-key3: hogehoge3
		}
```

容量節約できるよ！って話だと思ってたんですよ。

それで検証してみたんですけど。

# 仮説１の検証結果

そうでもなかった。

検証コードのtest_all.shから実行した結果のresultにありますが、使用しているメモリ容量はさほどかわらない。

# 仮説２

じゃあ、比較すべきは、これと

```
redis-hash-key-hoge: {
			hash-key1: hogehoge1
			hash-key2: hogehoge2
			hash-key3: hogehoge3
		}
```

これ（イメージ）

```
redis-str-key-hoge: serialize({
			hash-key1: hogehoge1
			hash-key2: hogehoge2
			hash-key3: hogehoge3
		})
```

かな？って検証してみたんですよ。

# 仮説２の検証結果

これもそうでもなかった。

検証コードのtest_all2.shから実行した結果のresult2にありますが、使用しているメモリ容量はさほどかわらない。

# つまりどういうことだってばよ？

わからん。

* 仮説に対する検証コードが間違ってる
* データ件数が多くないと効果が出ない
* 環境の問題とかバージョンの問題とかいろいろ

などの可能性はありますが、とりあえず疲れたのでいったん中止…

# 検証につかったコードと結果ファイル

https://github.com/robitan/redis-kensho/tree/kensho-set-hset

※やたらめったら出してあるデバッグ情報とか無駄な機能とかに、苦労と苦悩のあとを読み取っていただけるととても嬉しい…。

# 参考URL

検証コードの作成にあたり、以下のURL参考にさせていただきました。ありがとうございます。結果がよくわからないことになったのはただただ自分のせいです。

http://mokicks.hatenablog.com/entry/2017/10/13/024127
https://qiita.com/FGtatsuro/items/92bca91ed665449ab047
http://takuya-1st.hatenablog.jp/entry/2014/08/23/022031
https://qiita.com/kentarosasaki/items/033751ba8b26cc51cf2a
https://siguniang.wordpress.com/2013/02/16/hash-reduce-memory-usage-in-redis/
Cognos11簡易インストールにてInformixユーザーが作成されない際の対処法について

#概要
Cognos11にて簡易インストールする際に、実行するWindowsユーザーの権限等によりWindowsユーザーのInformixが作成されないことがありましたので、対応方法を記載します。
本来であればCognosインストール時に簡易インストールを選択することで自動で生成されます。

#環境
OS：WindowsServer2012R2
Cognos：Cognos Analytics v11.0.8

#手順
##1. informixユーザの作成<br>
 (1) インストール先にリモートデスクトップ接続した状態で、「コンピュータの管理」を起動<br>
 (2) 左側ペインにて下記を選択
     [コンピュータの管理（ローカル）] > [システム ツール] > [ローカル ユーザーとグループ] > [ユーザー]<br>
 (3) 中央ペインのユーザー一覧にて右クリックし、[新しいユーザー(N)…]をクリック<br>
 (4) [新しいユーザー]というウィンドウが開くので、次のように入力
　　<ユーザー名> : informix
　　<フル ネーム> : informix
　　<説明> : Informix User Created by IAD
　　<パスワード> : inform1x
　　<ユーザーは次回ログオン時にパスワードの変更が必要> : チェックオフ
　　<ユーザーはパスワードを変更できない> : チェックオフ
　　<パスワードを無期限にする> : チェックオフ
　　<アカウントを無効にする> : チェックオン<br>
 (5) [新しいユーザー]ウィンドウで[作成]ボタンを押下<br>
 (6) 中央ペインのユーザー一覧に(5)で作成したユーザーが存在することを確認
##2. Informix-Adminグループの作成<br>
 (1) インストール先にリモートデスクトップ接続した状態で、「コンピュータの管理」を起動<br>
 (2) 左側ペインにて下記を選択
     [コンピュータの管理（ローカル）] > [システム ツール] > [ローカル ユーザーとグループ] > [グループ]<br>
 (3) 中央ペインのグループ一覧にて右クリックし、[新しいグループ(N)…]をクリック<br>
 (4) [新しいグループ]というウィンドウが開くので、次のように入力
　　<グループ名> : Informix-Admin
　　<説明> : Informix Group Created by IAD<br>
(5) [新しいグループ]ウィンドウの[追加(A)...]ボタンを押下<br>
(6) [ユーザー、コンピューター、サービス アカウント または グループの選択]ウィンドウが開くので、[場所(L)…]ボタンを押下<br>
(7) [Windows セキュリティ]ウィンドウが開くので、CognosAdminユーザのID/パスワードを入力し、[OK]ボタンを押下<br>
(8) [場所]ウィンドウが開くので、"ANLSVTST(本番では"ANLSVAP1")"を選択し、[OK]ボタンを押下<br>
(9) [ユーザー の選択]ウィンドウ((6)にて表示されたウィンドウ)で[詳細設定(A)…]ボタンを押下<br>
(10) [ユーザー の選択]ウィンドウにて[検索(N)]ボタンを押下<br>
(11) ウィンドウ下部の"検索結果(U):"欄にユーザーの一覧が表示されるので、1-2.にて作成したinformixユーザーを選択し、「OK]ボタンを押下<br>
(12) [ユーザー の選択]ウィンドウで[OK]ボタンを押下<br>
(13) [新しいグループ]ウィンドウで[作成( C )]を押下<br>
(14) グループ一覧に"Informix-Admin"グループが表示されていることを確認
##3. Cognosインストーラーの実行
 (1) エクスプローラーにて、インストーラーの実行ファイルを右クリックし[管理者として実行(A)]を押下<br>
 (2) インストール言語を選択できる画面にて、"日本語"が選択されていることを確認し、[次へ]ボタンを押下<br>
 (3) "製品インストール"画面にて、"IBM Cognos Analytics"が選択されていることを確認し、[次へ(N)]ボタンを押下<br>
 (4) "ご使用条件"画面にて、"使用許諾契約の条項に同意する(A)"にチェックの上、[次へ(N)]ボタンを押下<br>
 (5) "ロケーション"画面にて、下記の通り入力し、[次へ(N)]を押下
 　　<インストール場所> : インストール先のフォルダを選択<br>
 (6)　インストール先ディレクトリが存在しない場合、インストール中に作成してよいか聞かれるので、[はい]ボタンを押下<br>
 (7) "インストール・タイプ"画面にて、"簡易インストール"を選択し、[次へ(N)]ボタンを押下<br>
 (8) "インストール・タイプ"画面にて、"初めてのインストール"を選択し、[次へ(N)]ボタンを押下<br>
 (9) "資格情報"画面にて、下記の通り入力し、[次へ(N)]ボタンを押下
　　　Cognos 管理ユーザーID  : ユーザー名を入力
　　　パスワード: 英大文字、小文字、数字、記号を含む8文字以上のパスワード
 　　 ※正規にInformixのユーザーが作成された場合は、ここで設定したパスワードがInformixユーザーのパスワードとなります。<br>
 (10) "確認"画面にて、[インストール(I)]ボタンを押下<br>
 (11) インストールが完了したら、[完了]ボタンを押下してインストーラーを終了
##4. 初回起動時の設定
 (1)スタートメニューよりCognos Configurationを起動し、使用ポートやディスパッチャURI等を設定する。<br>
 (2)データ・アクセス > Content Manager > Content　Store > ユーザーIDとパスワード にて
　Informixのユーザー名とパスワードを入力する
dockerに向いてないことを無理矢理やった話（ネットワークがらみ）

# はじめに

投稿が遅れてしまい、7日目担当の@ryo-endoさんに抜かれてしまった、@mnagakuです。

自分で仕事を増やして、この体たらく。不甲斐ない。

いっそ、@ryo-endoさんの記事のフォローアップを書いて、時間の流れに逆らってみようとか思いましたが、そんなことやってる場合じゃないなと思ったので、予定通り、表題の話を書きます。

[魔改造したJupyterでイベント会場のWiFi環境を爆誕させる話](https://qiita.com/mnagaku/items/08fdfd43b99348887cd6)で紹介している[mnagaku/wifi](https://github.com/mnagaku/wifi)では、OSSのソフトウェアルータVyOSをコンテナ化して使っています。この周辺で、いろいろ動かなかったよとゆー体験談を書きます。

dockerのネットワーク回りは、当たり前ですが、dockerが想定するユースケースを満たすように作られていて、生のLinuxに可能な限り近付けるとゆー風には作られていません。この辺、過剰品質に行かないで、事前にゴールを決めて作ってるように見えるので、上手いことやってるなーと思わんこともないのですが、僕みたいな変態がいらんことやって、「こいつ動くぞ」「こうなることを予想して」みたいにならないのは、感動が足りないなとも思います。

因みに、dockerのバージョンは、17.09.0-ceです。

# コンテナ化されたVyOSをフル機能で使えない

firewallやQoSの設定を入れると、エラーが出ます。

```bash:firewallの例
vyos@vyos# set firewall name FW1 rule 1 destination address 192.168.14.0/24
[edit]
vyos@vyos# set firewall name FW1 rule 1 action drop                        
[edit]
vyos@vyos# set firewall name FW1 default-action accept 
[edit]
vyos@vyos# commit
[ firewall twa-hazards-protection disable ]
sh: /proc/sys/net/ipv4/tcp_rfc1337: No such file or directory

[[firewall]] failed
[[firewall name FW1]] failed
Commit failed
Aborted
```

ソフトウェアルータって、ベンダーの機器みたいな設定方法を受け付けて、Linuxのiptablesとかsysctlとかに翻訳して実行してくれる、とゆーのが基本的な振る舞いだと思うのですが、この辺、カーネルパラメータを書き換えようとしたりするので、/proc以下のファイルが見つかんないとか、エラーが出ます。

コンテナですもんね......

natとかルーティングは大丈夫でした。

# ネットワークのアタッチ順が不定

dockerでネットワークをどうこうってなったら、普通は複数のコンテナが絡むので、composeすると思います。で、複数のbridgeネットワークを作って、コンテナにアタッチするわけですが、コンテナから見えるインタフェース名とbridgeネットワークの関係が、一意ではなく不定です。restartで入れ替わったりもします。

どうした兄弟、インタフェース名がeth1だろうがeth2だろうが、192.168.14.0/24と通信できることには違いがないぜ、HAHAHA、的な感じです。

まあ、一般的なアプリケーションの分散配備なら、疎通できることが要件なので、それで良いです。ただ、僕は、eth1とeth2にそれぞれのsubnetに合わせてdhcpサービスしたりしたかったんですよね。

デフォルトのネットワークが必ずeth0に来るのだけは確実っぽかったので、composeの起動時は、デフォルトとeth1に来て欲しいネットワークだけ付けておいて、起動後にdockerコマンドでeth2に付けたいネットワークをアタッチすることで解決しました。

因みに、composeではなくdockerコマンドではどんな感じかとゆーと、dockerが管理してるブリッジネットワークの名前をソートして最初に見つかるものを、デフォルトネットワークとしてアタッチするとゆー、これまた微妙な振る舞いになっています。ネットワークを複数使う場合は、起動時にデフォルトネットワークを明示的に指定してあげるのが安全そうです。ルーティングのデフォルトの向き先がどのインタフェースかってこともあるし、こっちの方が気を付ける必要大きいですね。

# おわりに

明示的にインタフェースを指定して操作するようなことに、現状のdockerは向いていません。お約束を守れば、IPレベルのルーティングは大丈夫なので、普通は問題にならないと思います。

# 追記

docker好きな人の中には、構築・運用な人もいると思うので......

jupyterのnotebookを「実行できる手順書」とする「[Literate Computing for Reproducible Infrastructure](https://literate-computing.github.io/)」についてのコミュニティをはじめました。

https://www.facebook.com/groups/LiterateComputing/

に、参加申請を頂ければ、順次承認させて頂きます。これまで作成された資料の一覧や、今後の発表予定などの情報に加え、チュートリアルや情報交換のイベントもやっていきたいと思いますので、是非ご参加ください。よろしくお願いします。
「プログラミング始めたい」とビジネス職に言われたときに勧めるべき言語とユースケース

# この記事はこんなあなたにオススメ
- プログラマとして働く気は無いが、プログラミングを学びたい人
- プログラマとして働く気はなさそうな人に「プログラミング始めたい」って言われ疲れた人
- 非エンジニア向け、プログラミング講習会をやりたい・やっている人

# 著者の背景
- 新卒からずっとビジネス職
- もともと大学時代に分析系のスクリプトを書いていたが、社会人2年目までは会社でコード書くことはなかった
- 現職はもろもろハックしやすい環境なので、たまに業務を効率化するスクリプトを書いている

独断と偏見での紹介なので、これも教えるに値するよ！いやいや、これは教えるべきじゃなくね？みたいなことあるかもしれませんが、ご愛嬌ということで…

# ビジネス職の人が覚えて得する言語を勧めよう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214098/278c6788-06fb-5638-3f51-237218f1f0c7.png)
ビジネス職がやってる作業の3割は人類がやるべきことじゃないです。機械でできます[要出典]
一方、そんな個人の作業効率に関する、問題発見・問題解決ができるほどエンジニアリソースは潤沢でないケースがほとんどです。

そこで、そんな3割の業務を彼らが自分自身の手で楽にできるよう、何から勉強すべきかアドバイスするのがおすすめです。

# おすすめの言語と実ビジネスへの応用
## GoogleAppsScript(GAS)
業務でGoogleAppsを使える環境なら、GASの提案がおすすめです。
### 特徴
- Javascriptベースの言語
- 従って、フロントや簡単なWEBサービスづくりへの発展性もあってGood
- 環境設定は不要
- GoogleSpreadsheetsやGmail、Googleカレンダーと言ったGoogleAppsとの連動が簡単
- 従ってGoogleSpreadsheetsをDB代わりに使うことができる
- cronのようなバッチ設定が可能なので、サーバー要らずで定期実行が可能
- 初学者には難易度が高いかもしれないが、当然に外部APIも叩くことができる 

### ユースケース
- 問い合わせフォームの回答を受け取ったら、即時に自動返信をする
- カレンダーとスプレッドシート両方で管理されているスケジュールを同期させる
- ChatWorkで自社の株価を定期的につぶやく
- 定期的にスプレッドシートのバックアップ(スナップショット)を保存する

### 欠点
- 外部ライブラリに頼りにくく、APIを叩くなどが初学者にとって難しい
- エラーメッセージが分かりにくい

## Python
いわずもがな。分析志向の強い人や、既にリテラシ高めの人はハマるかもしれません。
プロダクト志向のひとなら、将来Rails書くこと見越して、Rubyでもいいかも。
### 特徴
釈迦に説法なので簡単に
- pandasやnumpyなど数値処理が便利
- ライブラリが充実
- ドキュメントも充実

### ユースケース
- 定期的に確認しているサイトをスクレイピング
- コピペ系単純作業をbs4とかにやらせる
- 自社に関するTweetを収集してポジネガ分析する
- 暗号通貨の自動売買をする

### 欠点
- 環境設定は手伝ってあげる必要がありそう。pip使えるようにするところまではやってあげたい
- 地味に、pyenvとかで躓く人はつまづきそう
- Python 2.Xのコードがたくさん落ちているので、サンプルプログラム動かないって泣きつかれそう(print hoge とかで躓く)

# やっちゃだめ
## C
基本学ぶのには良いなと思いますが、うーんってかんじ
ポインタとかでムダに躓いてほしくないし、非エンジニアならポインタの知識はまじで要らない

## Java
オブジェクト志向を学ぶのには良い教材なのかな？
なんか、非エンジニアがビジネスシーンで活用できるイメージがない。偏見？

## ExcelVBA
よっぽどExcelerじゃない限り学ばなくていいと思う。記録したマクロを編集できる程度でいい気がする。
死にゆく言語だし、メンテしにくいし、なんか32bit/64bitみたいな論点もあるっぽいし。
なんかこう、辛い記憶しかないや…

# 非エンジニアな僕が個人的に読んでよかった本たち
<a href="https://www.amazon.co.jp/%E9%80%80%E5%B1%88%E3%81%AA%E3%81%93%E3%81%A8%E3%81%AFPython%E3%81%AB%E3%82%84%E3%82%89%E3%81%9B%E3%82%88%E3%81%86-%E2%80%95%E3%83%8E%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%AB%E3%82%82%E3%81%A7%E3%81%8D%E3%82%8B%E8%87%AA%E5%8B%95%E5%8C%96%E5%87%A6%E7%90%86%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-Al-Sweigart/dp/487311778X/ref=as_li_ss_il?ie=UTF8&qid=1512622076&sr=8-1&keywords=python&linkCode=li2&tag=t11378rs0f-22&linkId=41ebfec1295b60e6fcc0d6b87e3a15bf" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=487311778X&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=t11378rs0f-22" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=t11378rs0f-22&l=li2&o=9&a=487311778X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
なんかいっぱい列挙しようと思ったけど忘れた。
まあ、そこはご存じのいい本をおすすめいただければと。
Project Euler Q40 【チャンパーノウン定数】

Project Eulerをワンライナーで解いてみる。
間違っていたらコメントください。


## 問題
正の整数を順に連結して得られる以下の$10$進の無理数を考える:
$0.12345678910<font color="red">1</font>112131415161718192021...$

小数第$12$位は$1$である.

$d_n$で小数第$n$位の数を表す. $d_1 × d_{10} × d_{100} × d_{1000} × d_{10000} × d_{100000} × d_{1000000}$ を求めよ.

## 解答

```bash
seq -s "" 999999 |
awk -v FS= '{s=1;for(i=0;i<=6;i++){s*=$(10^i)};print s}'
210
```

## 答え合わせ
こちらのサイト様と一致していればOKとした。
http://kingyojima.net/pje/040.html
【Pythonで形態素解析】RSSから記事タイトルを取得して形態素解析をしてみた

この記事は、「LIG Advent Calendar 2017」の8日目の記事です。
https://qiita.com/advent-calendar/2017/lig

本日は、2日目の記事に引き続き、Pythonによる形態素解析に関する内容を書いていきたいと思います。

▼2日目の記事はこちら
https://qiita.com/kazuhikoyamashita/items/decc0b7dbb670e7f151a

本日は、RSSから記事タイトルを取得して、その記事タイトルを形態素解析する内容です。

# feedparserをインストールする
RSSを取得、解析するために、feedparserをpipコマンドでサクッとインストールします。

```zsh
$ pip install feedparser
```

# feedparser利用してRSSから記事タイトルを取得する
feedparser利用してRSSから記事タイトルを取得するPythonスクリプトは下記のようになります。

```py3:get_rss.py
import feedparser

# RSSから記事タイトルを取得
feed_url = 'https://liginc.co.jp/feed'
feed_result = feedparser.parse(feed_url)

# 記事タイトルを取得し表示する
for entry in feed_result.entries:
    print(entry.title)
```

実行結果は下記となります。
無事、記事タイトルを取得する事ができました。

```zsh
$ python get_rss.py
社長の等身大パネルを使って復讐した結果、誰も信じられなくなった男の話
美しい海に囲まれた壱岐島でゲストハウスとレストラン運営しませんか！？【料理人・ゲストハウススタッフ大募集】
問い合わせ対応はAIにおまかせ！？無料で高機能なAIチャットボット「Repl-AI」が日本初上陸！
【朗報】これまで長野でしか提供してなかった宇宙一美味いバーガーが、京都で食べられるようになったぞォーッ！
メイドインジャパンの商品力で、「世界」を舞台に飛躍する。日本経済を盛り上げる、クールな経営者でありたい｜メディアハーツ
Alfred3 の Workflow でかっこよく業務効率化！
PREP法ってなに？よく分かってないけど使って話してみる #TOEIC350の英語力 #英会話
【検証】LIGブログのコンバージョンは上がるのか。アクセス解析をKOBITと小川卓さんに依頼した結果（後編）
LAMP豊後大野で油絵の個展をやることになりました【2017年12月2日から12月17日まで】
ウェブサイトの作成や運用をはじめる前に知っておきたいこと
```

# 取得した記事タイトルを形態素解析してみる
取得した記事タイトルを形態素解析するPythonスクリプトは下記の通りです。

```py3:morphological-analysis.py
import feedparser
import MeCab

# RSS情報の解析
feed_url = 'https://liginc.co.jp/feed'
feed_result = feedparser.parse(feed_url)

# 記事タイトルを取得し配列に格納する
entry_array = []
for entry in feed_result.entries:
    entry_array.append(entry.title)

# 記事タイトルの形態素解析を行う
m = MeCab.Tagger()
result = m.parse(entry_array[0])
print(result)
```

実行結果です。記事タイトルが形態素解析されている事を確認できました。

```zsh
$ python morphological-analysis.py
社長	名詞,一般,*,*,*,*,社長,シャチョウ,シャチョー
の	助詞,連体化,*,*,*,*,の,ノ,ノ
等身	名詞,一般,*,*,*,*,等身,トウシン,トーシン
大	接頭詞,名詞接続,*,*,*,*,大,ダイ,ダイ
パネル	名詞,一般,*,*,*,*,パネル,パネル,パネル
を	助詞,格助詞,一般,*,*,*,を,ヲ,ヲ
使っ	動詞,自立,*,*,五段・ワ行促音便,連用タ接続,使う,ツカッ,ツカッ
て	助詞,接続助詞,*,*,*,*,て,テ,テ
復讐	名詞,サ変接続,*,*,*,*,復讐,フクシュウ,フクシュー
し	動詞,自立,*,*,サ変・スル,連用形,する,シ,シ
た	助動詞,*,*,*,特殊・タ,基本形,た,タ,タ
結果	名詞,副詞可能,*,*,*,*,結果,ケッカ,ケッカ
、	記号,読点,*,*,*,*,、,、,、
誰	名詞,代名詞,一般,*,*,*,誰,ダレ,ダレ
も	助詞,係助詞,*,*,*,*,も,モ,モ
信じ	動詞,自立,*,*,一段,未然形,信じる,シンジ,シンジ
られ	動詞,接尾,*,*,一段,未然形,られる,ラレ,ラレ
なく	助動詞,*,*,*,特殊・ナイ,連用テ接続,ない,ナク,ナク
なっ	動詞,自立,*,*,五段・ラ行,連用タ接続,なる,ナッ,ナッ
た	助動詞,*,*,*,特殊・タ,基本形,た,タ,タ
男	名詞,一般,*,*,*,*,男,オトコ,オトコ
の	助詞,連体化,*,*,*,*,の,ノ,ノ
話	名詞,サ変接続,*,*,*,*,話,ハナシ,ハナシ
EOS
```

以上、形態素解析ネタでした！

P.S.
ソースコードは、GitHubにアップしています。
https://github.com/kazuhikoyamashita/python-morphological-analysis
Project Euler Q39 【整数の直角三角形】

Project Eulerをワンライナーで解いてみる。
間違っていたらコメントください。


## 問題
辺の長さが $\\{a,b,c\\}$ と整数の$3$つ組である直角三角形を考え, その周囲の長さを $p$ とする. $p = 120$のときには3つの解が存在する:

$\\{20,48,52\\}, \\{24,45,51\\}, \\{30,40,50\\}$

p ≤ 1000 のとき解の数が最大になる p はいくつか?

## 解答

```bash
seq 998 |
awk '{for(i=1;i<=1000;i++){if(1000<=$1+i){break};print $1,i,sqrt($1^2+i^2)}}' |
fgrep -v '.' |
awk '$1+$2+$3<=1000{print $0,$1*$2,$1+$2+$3}' |
sort -k5,5n -k4,4n |
uniq -f3 |
uniq -c -f4 |
sort -k1,1n |
awk 'END{print $6}'
840
```

## 別解(ピタゴラス数の公式から導出)

```bash
seq 1000 |
awk '{for(i=1;i<=1000;i++){a=$1^2-i^2;b=2*$1*i;c=$1^2+i^2;if(a<=0||1000<a+b+c){break};print a,b,c,a*b,a+b+c}}' |
awk '{for(i=1;i<=100;i++){if(1000<$5*i){break};print $1*i,$2*i,$3*i,$4*i^2,$5*i}}' |
sort -k5,5n -k4,4n |
uniq -f3 |
uniq -c -f4 |
sort -k1,1n |
awk 'END{print $6}'
840
```

## 答え合わせ
こちらのサイト様と一致していればOKとした。
http://kingyojima.net/pje/039.html

## 参考にさせて頂いたサイト様
[ピタゴラス数の求め方とその証明 _ 高校数学の美しい物語](https://mathtrain.jp/pythagoras)
これからRubyで仕事したい人のためのリポジトリ「Code Your Ruby」を作りました

これからRubyで仕事したい人のためのリポジトリ __Code Your Ruby__ をGitHubに公開しました。

[chooyan-eng/code-your-ruby | GitHub](https://github.com/chooyan-eng/code-your-ruby)

Code Your Rubyは、Rubyを仕事にするために絶賛勉強中なエンジニアが、自分の書いたコードをGitHubのオープンな場でレビューしてもらうためのリポジトリです。

[チェリー本](http://gihyo.jp/book/2017/978-4-7741-9397-7)を読んでRubyの基礎は覚えた。自分なりにコードも書いてみた。でも自分のコードは実際に仕事で使えるレベルなんだろうか？と悩んでいる人（僕です）にとって次のステップに進むために役に立つ場になることを目指して作ってみました。

「あ、それ僕/私だ」と思った方、ぜひこの記事とリポジトリのREADMEを読んでみてください！

# 参加方法

詳しくはREADME.mdに記載していますが、Code Your Rubyに参加する大まかな流れは以下のような感じです。

1. リポジトリの`specification`ディレクトリに入っている問題を読む
1. 問題の要件を満たすコードを書く（もちろんテストも！）
1. code-your-rubyのmasterブランチにプルリクする
1. それを見た他のRubyエンジニアがレビューをする

なるべくオープンソースのリポジトリにプルリクを出すような流れをイメージしてみましたが、なにせ僕にその経験がほとんどないのでおかしなところがないかは不明です。

とは言っても第一目的はあくまで__Rubyの学習__ですので、あまり細かくルール決めはしていないつもりです。READMEの内容もガイドライン程度に見ていただければと思います。

# 問題について

問題は、1ファイルでは完結しないようなボリュームで、実際のシステムでもありそうな要件を考えて作ってみました。

__【問題例】__
[電車の時刻表を計算する | Code Your Ruby](https://github.com/chooyan-eng/code-your-ruby/blob/master/specification/timetable.md)

書く人によって全然違うコードになって、それをお互いが読み合って勉強になるように、でもやってて大変になりすぎないように、といういい感じのバランスを狙って作っています。（が、うまくいっているかは分からないです。試してみてください）

なお、2017.12.07現在は練習用のFizzBuzz問題のほかは上記の1問しか用意できていません。新しい問題は随時追加予定です。

サンプルとして、僕の書いたツッコミどころ満載のコードを `chooyan-eng` ディレクトリにコミットしてあります。なんとなく雰囲気をつかむ参考にしていただければと思います。

# Code Your Ruby作成の背景

さて、Code Your Rubyの説明は以上です。
ここからは、Code Your Rubyを作ろうと思った背景について少し書いてみます。

## 自分のコードをレビューしてもらえるようなサービスがない

僕がチェリー本を読んで、「次にどう勉強しよう？」と思ったときに思ったのが、自分の書いたコードを誰かにレビューしてもらえるようなサービスってないな、ということでした。（僕の見た限りですが）

課題を与えられてそれをこなしていくようなサービスはありますが、内容は基本的に数行～数十行書けば終わるような小規模なものがほとんどで、内容も実際に業務で使うイメージが湧かないものが多い印象です。他の人が書いたコードやその意図がわかるような仕組みも特にありません。

コーディングは高校のテスト勉強とは違うので、出題者から提示された「解答例」だけ見ても、仕事で使えるようになるには不十分です。

というようなことを考えていた時に、「ないなら作ろう！」と思いついたのがこのリポジトリです。

## レビューについて困っている人がいる

もうひとつ、昨日[チェリー本の出版記念イベント](https://techplay.jp/event/647072)に参加してきたのですが、そこで衝撃を受けたのが「会社を辞めようと思うくらいレビューが苦痛な人がいる」ということでした。話を聞いていると明らかに自分が経験したよりもキビしめな様子がうかがえたのですが、それを聞きながら同時に__「自分のチームのレビュー風景が普通なのかどうかってなかなか分かる機会ないよなあ。」__とも考えていました。

他にも、Rubyを勉強して自分でいろいろ書いてみたはいいけど、__コードを見てもらえる人がいなくて、自分が今どのくらいのレベルにいるのか全然分からない__と悩んでいる他の参加者の方がいらっしゃいました。

そんな話を聞いているうちに、__「あ、これはどちらもCode Your Rubyで改善できるな」__と思ったのも、このリポジトリを公開してみようと思う大きなモチベーションになりました。

# まとめ

他にもいろいろ考えたことはあるのですが、ひとまずみなさん試してみてください、ということでまとめに入ります。

Code Your Rubyは、

* オープンな場で
* ローカルルールがなく
* いろんな意見がもらえる（はず）

そんな場ですので、仕事で使えるRubyの習得を助けるだけでなく、レビューのしかたが分からない、レビューの温度感が分からい、レビューしてもらえる人がいない、といったレビューにまつわる悩み事の改善にもつながるのではないかと勝手に思っています。

百聞は一見にしかずということで、まずはcode-your-rubyリポジトリをForkして課題のコードを書き始めてみてください。

[chooyan-eng/code-your-ruby | GitHub](https://github.com/chooyan-eng/code-your-ruby)__（再掲）__

---

いろいろ書きましたがCode Your Rubyは完全に思いつきと勢いで公開したリポジトリです。「こうした方がやりやすい」「こんな方法はどう？」という意見がありましたらぜひコメントやIssueをいただければと思います。

内容や方法は随時修正しつつ、より役に立つ場に改善していければと思います。
JavaScriptでAWS CloudFrontのキャッシュを削除(Invalidate)する

## 概要
- メモ
- AWS-SDKを利用(初めて使った)

## コード

```package.json
{
    "dependencies": {
        "aws-sdk": ">= 2.0.9",
        "node-uuid": ">= 1.4.1"
    }
}
```
これで`npm install`

実際にキャッシュをinvalidateするJavaScriptは以下

```invalidate.js
// Load the SDK and UUID
var AWS = require('aws-sdk');
var uuid = require('node-uuid');

var cloudfront = new AWS.CloudFront({
    apiVersion: '2017-03-25',
    accessKeyId: YOUR_AWS_ACCESS_KEY,
    secretAccessKey: YOUR_AWS_SECRET_KEY,
});

var timestamp = new Date();
var string_timestamp = String(timestamp.getTime());

var invalidate_items = ['/* Subject to invalidate */',];
var item_count = invalidate_items.length

var params = {
  DistributionId: YOUR_CLOUDFRONT_ID,
  InvalidationBatch: {
    CallerReference: string_timestamp,
    Paths: {
      Quantity: item_count,
      Items: invalidate_items
    }
  }
};

cloudfront.createInvalidation(params, function(err, data) {
  if (err) console.log(err, err.stack);
  else     console.log(data);
});
```

invalidate_itemというリストにキャッシュを削除したい対象(エンドポイント)を格納し、parmsのItemsに渡す
キャッシュ削除対象の個数をitem_countに渡して、それをparamsのQuantityに渡す
accessKeyId、secretAccessKey、DistributionIdについてはそれぞれ自分の環境のやつを入れる
あと、apiVersionについては2017年12月現在のものです

とりあえず、これで `node invalidate.js` すればcloud frontへキャッシュ削除してくれる
結果はこんな感じで返ってくる

```js
{ Location: 'https://cloudfront.amazonaws.com/2017-03-25/distribution/{YOUR_CLOUDFRONT_ID}/invalidation/{invalidation_id}',
  Invalidation: 
   { Id: '{invalidation_id}',
     Status: 'InProgress',
     CreateTime: 2017-12-06T04:40:16.628Z,
     InvalidationBatch: { Paths: [Object], CallerReference: '{string_timestamp}' } } }
```

まあ、これだけだと実際に運用することはできないのだけど、とりあえず、動いてよかったですね、という感じです

## 参考
- [Class: AWS.CloudFront — AWS SDK for JavaScript](http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CloudFront.html)
Chromiumの特定バージョンをダウンロードする

手順メモ。どうしても、以前のバージョンで動作を確認したい場合などに。

## バージョンの特定
(目的のバージョンが特定されている場合は、このステップは不要)

例えば、11月6日の安定版のバージョンは`62.0.3202.89`。Chrome Releasesで、各プラットフォームのバージョンを確認可能。ブログのポストの中から該当のバージョンを拾う。
https://chromereleases.googleblog.com/search/label/Stable%20updates

## base_positionの特定
ここ↓で、`base_position`を探す。
https://omahaproxy.appspot.com/

"Version Information"のところで、例えば`62.0.3202.89`を入力してLookup。

```
Commit: ba7a0041073a5e9928d277806bfe24c325d113e5
Branch Base Commit: fa6a5d87adff761bc16afc5498c3f5944c1daa68
Branch Base Position: 499098
V8 Version: 6.2.414.40
V8 Position: 83
Skia Commit: e74b41c6c84638d5a9ee6d254a715bcd9e17c603
```

こんな感じで出てきたら、ブランチのBase Positionを確認。

## バイナリのダウンロード

ここ↓でプラットフォームを選択。
https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html

先ほどしらべた`base_position`に近いビルドを探す。(がんばってスクロールする)
クリックして、ディレクトリを開くと、次のようなファイルが見えるので、この例なら`chrome-win32.zip`をダウンロードして展開。中に、実行ファイルがある。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/1858/53a83ea8-8466-65d1-08eb-c6ce4447e06c.png)
10分でわかるDocker超入門

ここでは「YOU！ ドッカーって簡単に言うと何？」と聞かれた際に簡単に応えられるようまとめてみました。
短い時間でDockerをザックリ理解したい方、学習する前に弾みをつけたい方にぜひお読みいただければと思います。

##Dockerってなに？
アプリケーションの開発・実行するための仮想環境を作る仕組みです。

##Dockerの長所は？
* 環境構築も破棄もお手軽にできる
コード１行で仮想環境の取得から構築ができます。
終了、破棄するのも１〜３行で完結するお手軽さです。

* 動作が軽い
負荷が低いので１つのマシンで、複数の環境を立ち上げることが容易です。
そのため、WEBサーバー環境、DBサーバー環境、logだけ受け取る環境などそれぞれ連動して複数立ち上げるなんてこともできます。しかも、起動も終了も早いです。

##他の仮想環境との違い
Dockerはコンテナ型、VirtulBoxなどのホスト型の仮想化技術とは異なります。

* ホスト型（VirtulBox）
ホストOS上にそれぞれ個別のOSを呼び出し仮想環境を立ち上げます。
そのため、仮想環境と同じ数の複数のOSが立ち上がってしまうため、動作もどんどん重くなっていきます。
起動もそのたびに１からOSを立ち上げるので当然遅いです。

* コンテナ型（Docker）
動作環境をコンテナに封じ込めて個別のサーバーのように使うことができます。
つまり、それぞれのコンテナがリソースをシェアして共同で使っています。
そのため、
仮想環境ごとにOSを1から立ち上げるわけではないので起動も動作も早いです。
当然ファイルサイズも小さくなります。


![kasouka.png](https://qiita-image-store.s3.amazonaws.com/0/215645/f78f1c20-4487-3b00-ee44-6ef7bb803ee1.png)

オーバーヘッドが少ないため、軽量＆高速！
立ち上がりも終了もサクサク動く！


##使い方

###インストール

公式サイトのメニュー「Get Docker」からダウンロード。
https://www.docker.com/

macOSの場合、
案内に従って「Docker CE for Mac」をインストール。
dockerを使用する際は、アプリケーションから「Docker」を起動すると、ターミナルから使用することができます。

###基本的な操作の流れ

1. Dockerでは仮想環境の元となるイメージを取得します。

2. imageを元にコンテナを生成します。
このコンテナが仮想環境となります。
コンテナはstop,start,restart,削除したり、また再度イメージから作成など自在に操作できます。<br>
オブジェクト指向に例えると、
image →クラスのようなもの
コンテナ →インスタンスのようなもので使用する際にimageから生成される。<br><br>

3. 仮想環境の終了操作
コンテナをストップします。
Dockerを使わないなら、ストップしたコンテナを破棄します。

###主なDockerコマンド

* イメージを取得
 
```shell-session
docker pull イメージ名
```

取得したいイメージ名とともにコマンド。
イメージは「Docker Hub」で公開されています。
https://hub.docker.com/

* イメージ検索

```shell-session
docker search イメージ名
```

サイトで確認しなくても検索することもできます。
`centos`や、`ubuntu`などそれっぽいワードで検索できます。

* ダウンロードしたイメージの確認、イメージの削除

```shell-session
docker images
```

ローカルにpullしたimageの一覧を表示。

* イメージの削除

```shell-session
docker rmi イメージID
```

* コンテナ生成（仮想環境実行）

```shell-session
docker run [OPTIONS] イメージ名
```

主役のコマンドですね。
`run`によって、イメージがコンテナ化されて仮想環境として稼働します。
`-i` `-t` オプションでコンテナ内のターミナルに入れるなど、
複数のオプションが用意されています。

* コンテナ一覧の表示

```shell-session
docker ps [OPTIONS]
```

稼働中のコンテナが一覧として表示されます。
停止したコンテナも表示させたいときは `-a`のオプションを付与します。

* コンテナの停止、再起動

```shell-session
docker stop コンテナ名(ID)
docker start コンテナ名(ID)
```

コンテナ名は`docker ps`の`NAMES`で確認できる。コンテナIDでもOKです。

* コンテナの削除

```shell-session
docker rm コンテナ名(ID)
```

削除は`stop`でコンテナを停止してから実行します。

##まとめ
今回は、超入門ということで、基本的な説明とコマンド内容のみとなります。
Dockerは掘り下げると、より細かい操作ができたり、コンテナ同士の連携したり、comittして新たなイメージを作ってpushしたり、エクスポートして人に配ったり、はたまた、registryにして、ローカルネットワークだけで運用したりと非常に応用がきく、様々な使い方ができます。

エベレストよりも高く、マリアナ海溝よりも深い世界が広がってます！
ぜひ、自分で試してみてください。
読んでいただきありがとうございます。
mysqlでダンプファイルからインポートするとエラー(Lost connection to MySQL server during query)

mysqlのデータをダンプファイルからインポートして、しばらく実行すると以下のようなエラーを吐いて終了しました。
このときの対応をメモします。

#エラーの内容
```
zcat ./IMPORT.dump.sql.gz | mysql -u USER_NAME　-p STRONGPASSWORD DB_NAME;
（中略）
ERROR 2013 (HY000) at line : Lost connection to MySQL server during query
```

#とりあえずググる
エラーの内容でググってみます。
https://dev.mysql.com/doc/refman/5.6/ja/packet-too-large.html
> 一部のクライアントでは、パケットが大きすぎる場合、「クエリー中に MySQL サーバーへの接続が失われました」というエラーを受け取ることもあります。

どうやらこのようです。

#確認
サーバ側とクライアント側の設定を確認します。

* サーバ側

```
cat /etc/my.cnf
max_allowed_packet = 128M
```
サーバ側の設定は大丈夫そう、かな。

* クライアント側

```
mysql> show variables like "max_allowed_packet";
```
上記で確認できるようですが、今回のエラー発生時は確認するのを忘れていました。
たぶん少なかったんだろう。

#max_allowed_packetオプションを設定して起動

```
zcat ./IMPORT.dump.sql.gz | mysql --max_allowed_packet=128M -u USER_NAME　-p STRONGPASSWORD DB_NAME;
```

上記を実行したところ、手元の環境ではエラーは発生しませんでした。
【Unity拡張】右クリックでテクスチャタイプを変更する

# はじめに
右クリックメニューから画像の**テクスチャタイプを変更する**エディター拡張を作ってみました。

<img src = "https://qiita-image-store.s3.amazonaws.com/0/44288/77cc6358-ec2a-a6ea-c250-1dcc448e0e33.gif" height = 500>


# ソースコード
UnityプロジェクトにEditorフォルダを作り、以下のスクリプトを入れてください。

```EditorChangeTextureType.cs
namespace EditorChangeTextureType
namespace EditorChangeTextureType
{
    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEditor;

    public static class EditorChangeTextureType
    {
        const int PRIORITY = 10002;

        [MenuItem("Assets/Change TextureType/Default", false, PRIORITY)] static void ChangeToDefault() { ChangeTextureType(TextureImporterType.Default); }
        [MenuItem("Assets/Change TextureType/Sprite", false, PRIORITY)] static void ChangeToSprite() { ChangeTextureType(TextureImporterType.Sprite); }

        static void ChangeTextureType(TextureImporterType textureType)
        {
            foreach (var o in Selection.objects)
            {
                var obj = (UnityEngine.Object)o;
                if (obj == null) { continue; }
                var path = AssetDatabase.GetAssetPath(obj);

                TextureImporter textureImporter = AssetImporter.GetAtPath(path) as TextureImporter;
                if (textureImporter == null) { continue; }

                textureImporter.textureType = textureType; // テクスチャタイプ変更
                textureImporter.SaveAndReimport();
            }
        }
    }
}
```

# 使いかた
アセットの右クリックメニューのChangeTextureTypeからテクスチャタイプを変更することができます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/44288/351dabcd-2bf9-563e-3165-66ff71eaba98.png)

<br><br>

# 作った理由について
Unity上で画像をSpriteとして扱いたいとき、以下の手順を踏む必要があります。

1. 画像をクリックして選択
2. InspectorのTextureTypeプルダウンからSpriteを選択
3. Inspectorの右下にあるApplyボタンをクリック

自分はこの作業が嫌いです。　**面倒くさい。**

## 面倒くさい理由その１ : ドロップダウンを押すのが面倒くさい
テクスチャタイプのドロップダウン。
地味に狭くてマウスポインタを合わせるだけで疲れてしまいます。<br>

![1.png](https://qiita-image-store.s3.amazonaws.com/0/44288/4a89a072-287b-9c23-cf5b-70932065b068.png)



## 面倒くさい理由その２ : テクスチャタイプを選ぶのが面倒くさい
ドロップダウンをクリックするとずらっと並ぶテクスチャタイプ。
たくさん並ぶテクスチャタイプの中から目的のものを探すのも面倒くさいです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/44288/c574c39d-ceb7-7c03-0333-3b5ee7fbe8a6.png)


## 面倒くさい理由その３ : Applyボタンを押すのが面倒くさい
かなり下のほうに置いてあるApplyボタン。
マウスポインタをそこまで持っていくだけでも手が疲れてしまいます。
<img src = "https://qiita-image-store.s3.amazonaws.com/0/44288/f6c1b2bc-4b74-6049-9f2b-5f22d8f8ec0d.png" height = 300>

ボタンも地味に小さく、マウスポインタを合わせるだけでも疲れてしまいます。

<br>
以上の３つの理由でこのエディター拡張を作成しました。(完
神戸の学会のフォーラムに参加くださる方のための直前メモ


来る 12月7日 神戸ポートアイランドで開催される**生命科学系学会合同年次大会（ConBio2017）**で Galaxy に関するフォーラムがあります。夜なのでみなさまにご参加頂けるかちょっと心配ではありますが、楽しいフォーラムにできたらと思います。

　2017年12月7日 18:45-20:15【2F17】
　統合データ解析環境 Galaxy を使った再現可能なデータ解析

投影する**スライドを[こちら](https://docs.google.com/presentation/d/e/2PACX-1vTTXMS0Z_b5D9MePmtzvDcO-GO2IQS9etZAA3faDyRx5Iyw909rq4AsM6rnqm7-DSeCY_Fxiazo9fav/pub?start=false&loop=false&delayms=3000)に公開**してしまいます！

* 18:45～18:55	Galaxyとそのコミュニティの紹介
* 18:55～19:05	変異解析パイプラインの提供に Galaxy を利用する
* 19:05～19:15	データ整形にGalaxyを利用する
* 19:15～19:25	ワークフローの共有に Galaxy を利用する
* 19:25～19:35	データ解析に Public Galaxy Server を利用する
* 19:35～19:45	複数のクラウド上に Galaxy 環境を構築する
* 19:45～19:55	クラウド上で Galaxy を利用する

今回のフォーラムのモットーは**「フレンドリー」**としました。多くの方に Galaxy に親しみを感じてもらって、使ってくれる人、一緒にツールを開発する人、を募りたいなあと考えています。

はじめの 2つのセッションでは、**Galaxy とはなにか、Galaxy を使うと何が嬉しいのか**、をわかりやすく説明します。次の 3つのセッションでは、実際に **Galaxy はこんなふうに使えるんだ**といういろいろなユースケースを解説します。そして最後の 2つのセッションでは、皆様に Galaxy を使って頂くために開発されている、**クラウド環境で Galaxy を提供する仕組み**を紹介します。

お楽しみに！！！
three.js を rollup と heroku する

# 最初にまとめ

three.js に入門して、require とかもしたかったので、rollup に入門して、heroku にデプロイしました。

- rollup を使いつつ 小さな tree.js を heroku にデプロイするサンプル
  - https://github.com/mochizukikotaro/template-rollup-three
- rollup で heroku にデプロイするサンプル（three.js 抜き）
  - https://github.com/mochizukikotaro/template-rollup

![qiita-three.gif](https://qiita-image-store.s3.amazonaws.com/0/45822/c5ee1943-7470-40e0-a756-c696f4856781.gif)

# three.js をはじめたい

毎月の社内 LT で毎回 three.js の発表をしてくれる人がいて、ぼくもやりたいなぁと思っていたところでアドベントカレンダの季節になりました。本屋さんにいって、「初めてのThree.js」を買ってページめくりつつ、three.min.js を落としてコピペするとできました。とても簡単だし立体的だし楽しいです。球を追加してみよう、立方体を追加してみよう、平面を追加してみよう。でも途中で思ったのです。ひとつのファイルが長い。**分割したいな。**できれば require とかしたいな。そして僕は、ファイルを分割して module.exports とか require とか書いてみました。そしてブラウザに怒られました。「require ないよ」

僕は初心者なのです。ES2015 も Commonjs も Node もどれも経緯もわからず生きているのです。**babel も webpack も browserify も gulp も名前しかしらないのです。**ジョインしたプロジェクトにはそれとなく入っていたりするけど、先人がいれてくたモノをつかっているだけで build とかについて真面目に考えたことがないのです。これは良い機会です。さっそく僕は「初めてのThree.js」を閉じて、パッケージ管理の歴史をしらべはじめました。調べると少しずつ状況が分かってきました。だけども全部を頭に叩き込むにはもちろんいたらず、なんとなく関係性がわかる程度です。「require したいからとりあえず browserify 使おう」と思いました。webpack というものがすごい勢いがあるというのはなんとなく雰囲気でわかっていました。そして完全に偏見ですが webpack ってなんか巨大そうだ、やめておこう、という気持ちもありました。そんな折、以下の記事を目にします。

[webpackとRollup：似て非なるもの](http://postd.cc/webpack-and-rollup-the-same-but-different/) [[原文](https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c)]

> 先日、Facebookは膨大なプルリクエストをReactにマージして、既存のビルドシステムをRollupベースのシステムに移行しました。その結果、何人もの人々から「なぜwebpackではなくRollupを選んだのか」という質問が寄せられました。

**はじめて rollup に出会いました。**そして思いました「やっぱり rollup にしてみよう」。しらべると少し rollup の記事はあって、それらも読んでみるととても ["ちょうどいい感じ"](https://qiita.com/cognitom/items/e3ac0da00241f427dad6) に思えてきたのです。rollup は本家の [README](https://github.com/rollup/rollup) を見ながら動かしてみたのですが、これまでビルドとかトランスパイルとかをまったく勉強してこなかった僕にはとても良い勉強になりました。もちろんローカル開発のことを考えると、毎回 rollup コマンド叩くわけにはいかないので、config をつくってそこに watch とかの設定をかきました。サーバーも動かしたいので、そんな設定も書きました。そういえば、話は前後しますが Node.js の server も初めて書きました。ひとまず `rollup -c --watch` とすれば、サーバが立って、開発ができるようになりました。あとは heroku にデプロイするだけです。

heroku にデプロイするのに対応したことは２つです。package.json に heroku-postbuild を書くことと、heroku config で NPM_CONFIG_PRODUCTION を false にすることです。[こちら](https://github.com/mochizukikotaro/template-rollup-three)の README なども参照いただければと思います。

three.js に入門したつもりが、パッケージ管理についてしらべたりデプロイについてしらべたりして、とても楽しかったです。詳しい内容は、冒頭のGitHub などをご覧頂ければ幸いです。なにかを初めてみることで、普段の仕事とはちがった角度からプログラミングを楽しむことができました。（いま抱えてる仕事が滞っています！）ありがとうございました。