OmniAICreator/Qiita-1.07M huggingface dataset:
いぬ・ねこ New Life

#目次
[１．課題と未来](#１課題と未来)
[２．アプリの特徴について](#２アプリの特徴について)
[３．ターゲット・ペルソナ](#３ターゲットペルソナ)
[４．制作行程について](#４作成行程について)
[５．感想](#５感想)

---

#１．課題と未来

---

<課題>
今の日本は超高齢社会となっていて、お年寄りの方々は寂しさから動物を飼うことが増えてきているということを知りました:older_man_tone2::older_woman_tone1:
しかし、動物を飼うということでの課題は、その課題は飼っている動物よりも飼い主が先に亡くなってしまい、動物たちの行き場がなくなってしまうという事態が起きていることです:cold_sweat:
ほかにも、動物を虐待したり、途中で責任が持てなくなったり捨ててしまうというケースが増えてきています:sob:
行き場のない動物たちがあふれ、殺処分せざるおえない状況があります。。

---

<未来>
私たちはこのアプリを使ってもらい少しでも多くの人に命の尊さを再度考え直してほしいと思います:cat2::poodle:
また、殺処分される動物の減少・どうしても飼えなくなった飼い主側だけで解決するのではなく、殺処分ゼロを目指し、その環境を整える側もこのアプリを見てこの社会的問題に挙がるであろう課題に対して少しでも動物たちが人間のことを大好きなままでいてくれて、お互いに信頼し合える、家族:family_mmgb:パートナー:couple:のような存在でいられることで共存し、未来を築いていけたら自分たち人間にも、動物たちにも、幸せな未来になると考えました:point_up_tone1:
『命は大切です:heartpulse:』

---

#２．アプリの特徴について

---

里親になりたい方が捨て犬、猫の情報を検索できる
![ホーム.png](https://qiita-image-store.s3.amazonaws.com/0/287031/b50b7a5d-0809-74ed-cc6d-1cd7d549ab48.png)

---

引き取ってほしい犬の情報を書き込むことができる
![犬の里親募集.png](https://qiita-image-store.s3.amazonaws.com/0/287031/e269aa0f-ff42-5f56-ed4f-f8ad06815309.png)

---

引き取ってほしい猫の情報を書き込むことができる
![猫の里親募集.png](https://qiita-image-store.s3.amazonaws.com/0/287031/48ff3b99-4b7d-62b9-51d3-f345ee2bab5e.png)

---

使用したサイトの説明
![サイトについて.png](https://qiita-image-store.s3.amazonaws.com/0/287031/59ae9d35-0037-6426-7128-6dc2947aa02c.png)

---

犬・猫の処分の現状がわかる
![犬猫の現状.png](https://qiita-image-store.s3.amazonaws.com/0/287031/63f140f3-14b1-d785-2daf-caf964d834df.png)

---

#３．ターゲット・ペルソナ

---

○犬・猫が大好きな方:couple_ww:
○きちんと責任を持って犬・猫を飼いたいと思ってくれる方:family_mmgb:
○犬・猫の引き取り手を探している方:person_frowning_tone1:
○保健所:european_post_office:
○動物愛護センター:dog2:

---

#４．作成行程について

---

『HTML5 UP』というサイトを使いアプリの基盤となる形をデモを見ながら自分たちが想像しているものに近いものを話し合い選びました。
![html5up.jpg](https://qiita-image-store.s3.amazonaws.com/0/287031/e32bdb9a-8557-bce0-e261-66ea639d13ad.jpeg)
${デモ　↓}$
![html5up2.jpg](https://qiita-image-store.s3.amazonaws.com/0/287031/1300d70e-6e85-14cd-771c-b706595bd18d.jpeg)

---

選んだらダウンロードをしてMonacaに組み込みました。
![html5up3.jpg](https://qiita-image-store.s3.amazonaws.com/0/287031/21ea9de7-d78f-2f67-7aeb-3ab625391029.jpeg)

---

元のHTMLから、いらないところを切り取ったり、言葉を変えたりしました。
![ホーム.png](https://qiita-image-store.s3.amazonaws.com/0/287031/06d2125d-b89f-dd81-10ea-0866b59c1365.png)

---

付け加えたい機能のHTMLをネットで調べ組み込んでいきました。
![画像貼り付け.png](https://qiita-image-store.s3.amazonaws.com/0/287031/a8b47373-b0cb-863d-3c5d-b61c3aa640e8.png)

---

#５．感想

---

最初は本格的なアプリを作ることが初めてで、わからない:confused:不安:scream:難しい:confounded:という気持ちでいっぱいでしたが、HTML5UPやMonacaを使うことにより、とてもわかりやすく、簡単に作成することができました:exclamation:犬、猫の里親を探す専用のサイトと連動させることにより、アプリと、ネットからの情報が集まることができ、多くの犬、猫たちの里親が見つかればいいなと思っています:blush::two_hearts:自分たちがイメージしているアプリの形になっていくのはとても楽しく、面白かったです:notes:

---

:point_right_tone3: 詳しいサイトはこちら　[クリック][link-1]
[link-1]:https://sites.google.com/view/inunekonewlife/%E3%83%9B%E3%83%BC%E3%83%A0

:point_right_tone3: 他の制作物はこちら　[クリック][link-2]
[link-2]:https://qiita.com/shigeru-suzuki/private/bb55eacebfa14e49d726

:point_right_tone3: 島田商業高校のHPはこちら　[クリック][link-3]
[link-3]:http://www.edu.pref.shizuoka.jp/shimada-ch/home.nsf/IndexFormView?OpenView
C#で作成したAlexaスキルのエンドポイントからDynamoDBへのデータ保存を容易にするNuGetパッケージを公開した。

#はじめに
Visual StudioでNuGetパッケージを作成し、公開する話を[書きました](https://qiita.com/shuhey/items/c20c6629fcbcdb96c9d6)が、その際に説明用の画像として使用していたのが、今回お話するNuGetパッケージです。

#どういうふうに便利なの？
C#からDynamoDBにアクセスするためにはAmazonが提供している`AWSSDK for .NET`ライブラリを使うのが一番簡単です。
これはNuGetパッケージとしても提供されているので、Visual Studioを使って開発する場合はとても簡単にインストールして使うことができます。

その中でも`低レベルAPI`と`高レベルAPI`があって、高レベルAPIは細かい部分がかなり抽象化されていてかなり簡単にDynamoDBのテーブルにデータを追加したりできます。

ただ、それでもAlexaスキルに限定した場合に、その汎用的なAPIは使用時にいささか手間を感じます。

このNugetパッケージはAlexaスキルの開発に用途を限定することによって、より簡単にDynamoDBへデータの追加ができるようにしたものです。

#どういうときに使うの？
Alexaスキルにおいて、セッション内で、またはセッションをまたいでデータを保持したいときがあります。
同一セッション内であればユーザーの発話から得たデータをセッションアトリビュートという形でやりとりされるJSON内に持たせることで保持することができます。
しかし、セッションをまたぐ場合、それは外部の記憶域に保存しておく必要があるからです。Lambdaではステートを持たないのでデータを保持し続けることはできません。

#というわけで作りました
NuGetマネージャから`AlexaPersistentAttributesManager`を検索してインストールします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/245438/c9f3179c-51cf-cb3c-401d-fe28e5ddbdad.png)


使い方は簡単です。

```csharp
//このインスタンス化でテーブルが作られます。
//userIdはセッション情報から取得します。
//これがプライマリキー（id）として使われます。
var attrManager=new AttributesManager(userId,_tableName);

//
//ユーザーの星座情報をsignをキーにしてセット。
//任意のキーで数値、文字列、一次元のリストや配列を格納することができます。
//ここではまだ変数に追加しているだけ。
attrManager.SetPersistentAttributes("sign", "ふたご座");
//セットした情報をDynamoDBに保存。
//ここでDynamoDBに追加！
attrManager.SavePersistentAttributes();

//値の取得
var attr=attrManager.GetPersistentAttributes();
var sign = attr["sign"];
```


という使い方になっています。

え、削除は、って？


未実装です…。
APIを利用できるようになろう

#はじめに
このLessonでは**API**、特に**Web API**の使い方について学んでいただきます。Web APIとは、とあるWebアプリケーションが自身のDB（データベース）や内部アルゴリズムなどを用いて得ることができる値を外部のサービスでも簡単に利用できるように提供している仕組みのことです。これを利用すると、自身のアプリケーション内でクレジットカードを用いた決済をする、画像を解析して写っている人の感情を推察する機能をつける、など個人では開発の難しい機能を簡単に実装することができます。本Lessonの学習が終わるころには、これまで学んできたことより飛躍的に強力な機能を自由自在に自分のアプリケーションに組み込めるようになっているでしょう。

#本章の概要
APIとは、ある機能を実現するための処理のまとまりです。特にWeb APIとは、簡単に言ってしまえば、**様々なWebアプリケーションが各自で提供している誰でも利用可能なメソッド群**です。APIの決まりに従って何らかのパラメーターを伴ったリクエストを送ると、何らかの値が返って来ます。この時返ってくる値は、多くの場合**JSON**という形式になります。JSONはRubyのハッシュオブジェクトのような形式です。あるキーに対して、あるバリューが紐付いています。ハッシュと同じく、バリューをハッシュのようにすることで入れ子構造を作ることも可能です。これをRailsアプリケーション内で利用するために、JSON形式のデータをハッシュオブジェクトに変換したりします。

本Lessonの目的は実際にいくつかのWebAPIを利用することを通してWeb APIに慣れることです。RubyでWeb APIを利用する際は、多くの場合専用のGemが用意されています。単純に、Gemを利用せずに直接リクエストを送信することもあります。本Lessonでは専用のGemを利用する場合としない場合の両方を練習します。

#APIとは何か

APIとは、何らかの目的を達成するための処理のまとまりのことです。「Web APIを公開」などと言う場合は、あるWebサービスが自身の機能の一部を誰でも利用できるよう開放している状態を指します。

### <i class="icon information", id="term_1078"></i> **API**
APIとは、Application program interfaceの略です。あるプログラムが、その他のプログラムから簡単に呼び出せるように準備してあることを指します。

例えば、メール送信のプログラムを作るとしましょう。この時必要になるであろう「ファイルを開く」ためのコードや「文字を書き込む」ためのコードを、0から作成するのは大変ですよね。そこで、こういった処理のまとまり(API)をあらかじめ作成しておき、あとから簡単に利用できるようにします。

プログラムの作成者は、数あるAPIを組み合わせるだけで、目指すアプリケーションや機能を実現することができる、というわけです。

###Web APIについて

さて、「プログラムなどの処理のまとまり」がAPIであることがわかりました。
特に、**Webアプリケーションが提供するAPI**のことを**Web API**と呼びます。具体的には、外部から受付可能な様々なメソッドを用意することを**「APIを公開する」**と言ったりします。APIを公開しているアプリケーションに対してパラメーターを伴ったリクエストを送ることで、APIを通して様々な値を得ることができます。

![https://tech-master.s3.amazonaws.com/uploads/curriculums//da7fdf5be1533148f7cf982ded396b77.png](https://tech-master.s3.amazonaws.com/uploads/curriculums//da7fdf5be1533148f7cf982ded396b77.png)

例えば、以下のようなWeb APIが存在します。

・画像を送ると、その画像に写っている人の美人度を判定して返してくれるAPI
・ある文字列を送ると、その文字列を含む在庫商品の一覧を返してくれるAPI

###JSONについて
多くのWeb APIでは、TECH::MASTERで学んだRubyはもちろんPHPやJavascriptといったいくつかのメジャーな言語によるリクエストに対応しています。しかし、返ってくるレスポンスの形式は限られています。そのうちのひとつが、**JSON**形式です。


### <i class="icon information", id="term_1079"></i> **JSON**
**JSON**はRubyでいうところのハッシュのようなデータ形式で、ひとつのキーに対してひとつのバリュー、という形で値を保持します。こうした形式を**キーバリューストア**と呼びます。

キーバリューストアの性質を持ったデータ型は各言語に存在します。**JSON**から各言語のキーバリューストアなデータ型に変換することができるので、多くのWeb APIはJSON形式でリクエストに対する値を返します。

<curriculum-checkbox data-id=8681></curriculum-checkbox>


#本Lessonの目的
###Web APIを自由に利用できるようになる
Web APIにはたくさんの種類があります。しかし、多くの人が利用したがるメジャーなサービスになればなるほど、使い方は共通の規約に沿うようなものになります。これを覚えてしまえば、たいていのAPIは利用できるようになります。本LessonでいくつかのWeb APIを利用してみることで、この共通の規約を体得しましょう。

#本Lessonの各章の内容

###1章 はじめに
本章です。本Lessonの目的や学習内容の概要について確認し、Web APIについての基礎知識を学習します。

###2章 Gemを利用したWeb APIを使ってみよう
自身のアプリケーションに簡単にクレジットカード決済による支払い機能を導入できる、**「WebPay」**というWebサービスのAPIを利用してみます。専用のGemを利用したWeb APIの利用に慣れるためです。

###3章 Gemを利用しないWeb APIを使ってみよう
楽天やYahooといった企業が提供しているAPIを利用してみます。専用のGemが存在しないWeb APIでも、Rubyを用いて利用できるようになるためです。

<curriculum-checkbox data-id=8682></curriculum-checkbox>
Clova(CEK)でSSMLを使う

## 前提
ClovaはSSMLをサポートしていない。(2018/11現在)

## やったこと
他のスマートスピーカーで作ったスキルを移植したい時に不便なので、SSMLをパースしてClovaで使えるようにした。 (特にnpmとかにはしてない)
:point_right: https://github.com/Arahabica/ClovaSSML

ただし、対応したのは`break`,`audio`,`p`タグだけで、他のタグは無視して、タグの中身だけを使うようにしました。

## 解説

ということで、SSMLをむりやりClovaの`OutputSpeech`っていうオブジェクトに変換する奴を作りました。
`OutputSpeech`は[ここ](https://clova-developers.line.biz/guide/CEK/References/CEK_API.md#message-fields-2)の`response.outputSpeech`などに入れるオブジェクトです。
使い方がちょっとだけややこしいので、解説します。
なぜ、ややこしいのかというと、`break`タグを実現するのに、無音のMP3を使っているからです。

### 1. 無音MP3をダウンロード
[ここ](https://github.com/Arahabica/silent-mp3)から無音MP3をダウンロード。

### 2. 無音MP3をどこかにアップロード
落とした無音MP3をパブリックアクセスできるようにどこかのサーバにおいてください。

### 3. 無音MP3のURLの情報をセット

```js
const silentAudios = [];
for(let time=100; time<=5000; time+= 100) {
  silentAudios.push({time, url: `YOUR_AUDIO_BASE_URL/silence${time}.mp3`});
}
```

### 4. SSMLをOutputSpeechに変換
```js
let ssml = "はじめまして<break time='1.2s' /> 私のスキルにようこそ";
ssml += "<audio src='https://sample.com/nice_intro.mp3' /> 何とかかんとか";
let clovaSSML = new ClovaSSML({silentAudios});
let outputSpeech = clovaSSML.convert(ssml);
```

結果、outputSpeechは次のようになります。

```json
{
  "type": "SpeechList",
  "values": [
    {
      "type": "PlainText",
      "lang": "ja",
      "value": "はじめまして"
    },
    {
      "type": "URL",
      "lang": "",
      "value": "https://sample.com/silence1000.mp3"
    },
    {
      "type": "PlainText",
      "lang": "ja",
      "value": "私のスキルにようこそ"
    },
    {
      "type": "URL",
      "lang": "",
      "value": "https://sample.com/nice_intro.mp3"
    },
    {
      "type": "PlainText",
      "lang": "ja",
      "value": "何とかかんとか"
    }
  ]
}
```

## 全コード
```js
const ClovaSSML = require('./ClovaSSML'); // ClovaSSML.jsのあるディレクトリで
const silentAudios = [];
for(let time=100; time<=5000; time+= 100) {
  silentAudios.push({time, url: `YOUR_AUDIO_BASE_URL/silence${time}.mp3`});
}
let ssml = "はじめまして<break time='1.2s' /> 私のスキルにようこそ";
ssml += "<audio src='https://sample.com/nice_intro.mp3' /> 何とかかんとか";
let clovaSSML = new ClovaSSML({silentAudios});
let outputSpeech = clovaSSML.convert(ssml);
```

## 雑感
書いてて思ったけど、やっぱ初期化がややこしいですね。
無音MP3のURLをハードコーディングしちゃった方が良かったかしら。

最後にもう一度
:point_right: https://github.com/Arahabica/ClovaSSML
Stackful coroutine実装まとめ

何回も調べて疲れたのでまとめる。

## Coroutines

### C

- [libcoro](http://software.schmorp.de/pkg/libcoro.html)
    - `ucontext.h`系
    - GPLとPermissive系(?)のデュアルライセンス
    - `-DCORO_LOSER`
- [coroutine](https://github.com/cloudwu/coroutine)
    - `ucontext.h`系
    - libcoro似
- [libaco](https://github.com/hnes/libaco)
    - 爆速（ベンチマーク参照）
    - X86のみサポート（2018/11/19現在）
- [libwire](https://github.com/baruch/libwire)
    - IOや同期のためのユーティリティ付
    - libcoroベース

### C++

- [Boost.Coroutine](https://www.boost.org/doc/libs/1_68_0/libs/coroutine/doc/html/index.html)

### Rust

- [May](https://github.com/Xudong-Huang/may)
    - Battery included
    - 下のライブラリ: [generator-rs](https://github.com/Xudong-Huang/generator-rs)
    - x86のみサポート（2018/11/19現在）
    - "Don't exceed the coroutine stack. It will trigger undefined behavior."
- [coroutine-rs](https://github.com/rustcc/coroutine-rs)
    - libgreenの亡骸を使用
    - 下は[context-rs](https://github.com/zonyitoo/context-rs)

## Context switch

### C

- [ucontext.h](http://pubs.opengroup.org/onlinepubs/7908799/xsh/ucontext.h.html)
    - 古代技術
    - 実装・性能が気になる

### C++

- [Boost.Context](https://www.boost.org/doc/libs/1_68_0/libs/context/doc/html/context/overview.html)

### Rust

- [context-rs](https://github.com/zonyitoo/context-rs)
    - [zonyitoo](https://github.com/zonyitoo)さん作
    - Boost.Contextのポートっぽい

## おまけ

- [Go](https://golang.org/)
    - スタックはひとつながり
    - Stackmapがあるのでmove可能
    - Work stealingスケジューラ
    - デフォルトスタックサイズは2KB
- [LLVM Coroutine](https://llvm.org/docs/Coroutines.html)
    - Stackless coroutine
    - アロケーションはヒープとスタック両方いける
- [C++ 20: Coroutines](https://stackoverflow.com/questions/43503656/what-are-coroutines-in-c20)
    - C++++++++++++++++++++++++++++++++++++

## その他

- [Differences between symmetric and asymmetric coroutines](https://stackoverflow.com/questions/41891989/what-is-the-difference-between-asymmetric-and-symmetric-coroutines)
Ruby On Rails

##1.Homebrew
Mac os上でソフトウェア管理を行うソフトウェア
インターネット上から便利なアプリケーションを簡単にインストールしたり、そのバージョンを管理することができる

##2.rbenv
rubyのバージョンを切り替えることができる

##3.ruby-build
rubyの様々なバージョンをインストールすることができる

##4.MySQL
データを保存するDBサーバーの一種

##5.gem
rubyを便利に扱う為のアプリケーションの総称
ターミナルからそれぞれのgemが持つコマンドを実行するという形で使用

##6.bundler
gemのバージョン管理などをしてくれるgem

##7.railsをインストール
```
$ gem install rails --version = 'バージョン名'
```

##8.$ rbenv rehash
そのバージョンで利用しているgemのコマンドを使えるようにする為の必要なコマンド
gemコマンドでgemをインストールした時に必ず実行する

##9.mkdirコマンド（linux）
新しくディレクトリを作成

```
$ makdir ディレクトリ名
```

##10.rails new コマンド（新規アプリケーション作成）
アプリケーション名のディレクトリが作成される

```
$ rails new アプリケーション名　-オプション名
```

##11.Gemfile
```
gem 'Gem名'

$ bundle update 　　　　　　　#Gemfileを更新
$ bundle install 　　　　　#Gemfileをインストール
```

##12.運用環境
```
development 　　　　　　#開発環境
production　　　　　　　　 #本番環境
test 　　　　　　　　　　　　　　　　　　　　#テスト環境
```

##13.DB作成
database.ymlに基づいてDBを新規作成する

```
$ rake db:create
```

##14.database.yml(config)
DBの設定を記述

##15.Sequel Pro
DBの中身を視覚化して表示
railsでENVがnilになる

railsでfaradayを使っているとき以下のようなコードを描きました。

```ruby
class hogehoge
  @@conn = Faraday::Connection.new(:url => 'http://example.com') do |builder|
    builder.use Faraday::Request::UrlEncoded
    builder.use Faraday::Response::Logger
    builder.use Faraday::Adapter::NetHttp
    builder.headers['Content-Type'] = 'application/json'
    builder.headers['X-API-KEY'] = ENV['HOGE_API_KEY']

end
```

しかしログを見ても``X-API-KEY``はnilしか返しません。こちらなら動きました。

```ruby
class hogehoge
  
  API_TOKEN = ENV['HOGE_API_KEY'] 
  API_TOKEN.freeze
 
  @@conn = Faraday::Connection.new(:url => 'http://example.com') do |builder|
    builder.use Faraday::Request::UrlEncoded
    builder.use Faraday::Response::Logger
    builder.use Faraday::Adapter::NetHttp
    builder.headers['Content-Type'] = 'application/json'
    builder.headers['X-API-KEY'] = API_TOKEN

end
```

どうやらブロックの外に``ENV``は書かなないと機能しない？？？
わかる方いましたら教えてください。
DropBoxのMarkDownViewer

# こんな方に

- お客さんと議事録やアジェンダをマークダウンで、さくっと共有したい
- でもお客さんは、お忙しい社長さんで、スマホでしか見てくれない

# 課題

Dropbox上のMarkDownファイルをブラウザで開くと、プレビューしてくれるのはありがたいのですが、スマホで見ると「プレビューできません、アプリインストールしろ」と出てうざいです。

# 解決

さくっとスマホでもDropbox上のMarkDownをプレビューするサービスです。

このように、 `dropbox?` の後ろに、dropboxの共有URLを貼り付けると
http://misc.dqc.jp/dropbox?https://www.dropbox.com/s/1elp9gjz9xxh0bg/test.md?dl=0

下記のように短縮URLに変換されて、MarkDownが表示されます
http://misc.dqc.jp/dropbox?/s/1elp9gjz9xxh0bg/test_md

適用スタイルは下記です。見やすいですね。
https://cdnjs.com/libraries/github-markdown-css

![image.png](https://qiita-image-store.s3.amazonaws.com/0/255465/3694bf4b-fb0b-b8c9-cea2-5bff0591e72c.png)
【VisualStudio2017】デバッグ中、「ローカル変数または引数はこの命令ポインターで利用できないため、値を取得することはできません。最適化されている可能性があります。」の表示の解決方法

#はじめに
アプリケーションのデバッグ中、変数の値を確認できるウィンドウがあります。そこにおいて、値の部分に
「ローカル変数または引数はこの命令ポインターで利用できないため、値を取得することはできません。最適化されている可能性があります。」
というメッセージが表示され、その値を見ることができませんでした。しかし、アプリケーション自体は動作します。何が起こっているのかわからなかったため、調べた結果のメモです。
#解決方法
1.**ソリューションエクスプローラー**の**[**エラーが起こった**プロジェクトの名前]**を右クリック
2.開いたメニューの**プロパティ**をクリック
3.**ビルド**タブを選択
4.全般の**コードの最適化**のチェックを外す
#結局何が原因なのか
公式「方法:最適化されたコードをデバッグする」
https://msdn.microsoft.com/ja-jp/library/606cbtzs.aspx
VisualStudioがビルド時にコードの実行効率を上げるため、命令の再配置や再構成による最適化を行います。そのため、参照できなくなることがあるようです。
最適化した後にしか起こらないバグがある可能性があるため、最適化前後どちらもデバッグを行う必要があります。
最適化後のコードのデバッグ方法は、解決方法の4のチェックを入れてデバッグを行うことです。
#終わりに
最初は何が起こったかわかりませんでしたが、エラーメッセージをググることで解決方法が見つかりました。最初にエラーメッセージをググるのがいいと思います。また、エラーを多く知っていることがデバッグを速く行うために必要なため、エラーをよく見ておこうと思いました。
Git / Github おすすめ学習参考資料まとめ

## 動画
「はじめてのGitとGitHub 」
（https://www.udemy.com/share/100dDgAEsTc1lXQXo=/ ）

「git入門 (全22回) - プログラミングならドットインストール」
（https://dotinstall.com/lessons/basic_git ）

「コマンドを使わないGitHub入門 (Windows, OS X 対応) – YouTube」
（https://www.youtube.com/watch?v=_PO7a31J4Go ）

## 書籍
「Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール Web制作者のための教科書シリーズ」
（https://amzn.to/2r1mTGH ）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/18351/0a2b8a34-1ef3-59e4-1137-a1f40563256c.png)

「わかばちゃんと学ぶ Git使い方入門 」
（https://amzn.to/2vPvLoI ）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/18351/59842046-d5af-9d03-63da-32b06e27b226.png)

「Gitが、おもしろいほどわかる基本の使い方33」
https://amzn.to/2QfvWCO
![image.png](https://qiita-image-store.s3.amazonaws.com/0/18351/2268d61b-c9a7-7226-eee0-f1f3920a6402.png)


## ハンズオン資料
「Git for Begineers GitHub ハンズオン 」
（https://www.slideshare.net/Yuryu/git-for-begineers-github ）

「デザイナーのための便利なGithubの使い方と、大雑把なGitとGithubの説明」
（https://speakerdeck.com/machida/dezainafalsetamefalsebian-li-nagithubfalseshi-ifang-to-da-za-ba-nagittogithubfalseshuo-ming ）

『「AWSとGitHubで始めるDevOpsハンズオン」の資料を公開します！ ｜ Developers.IO』
（https://dev.classmethod.jp/etc/aws-github-devops-hands-on/ ）

## 記事 / スライド
『今日からはじめるGitHub 〜 初心者がGitをインストールして、プルリクできるようになるまでを解説 - エンジニアHub｜若手Webエンジニアのキャリアを考える！』
（https://employment.en-japan.com/engineerhub/entry/2017/01/31/110000 ）

『新人Git/Github研修公開用スライド（その１）』
（https://www.slideshare.net/pupupopo88/gitgithub-49810266 ）

『新人Git/Github研修公開用スライド（その２）』
（https://www.slideshare.net/pupupopo88/github-kgitgithub ）
Max関数の式変形

$\max$関数の式変形が面白いなーと感じたので勢いで記事にしました！

以下の式が何故成り立つのかを考えます。
最適化したい式の中に$\max$が入っていると、最適化の難易度がぐーんと跳ね上がるのですが、以下の式に置き換えられれば難易度を下げることができます。

```math
\max_{i}x_{i} \fallingdotseq \frac{1}{\beta}\log\sum_{i=1}^{n}\exp(\beta x_{i})　
```

ここで、$i=a$のときに$x$が最大になるとします。つまり、こういうことです。

```math
\max_{i}x_{i} = x_{a}
```

また、すべての$i$について$x_{i}$が等しいという場合は考えないことにします。
このとき、以下の等式が成り立ちます。

```math
\exp(\beta x_{a}) < \sum_{i=1}^{n}\exp(\beta x_{i}) < n\exp(\beta x_{a})
```

$x_{i}$は1つの配列の要素です。当然、配列の要素をすべて足し合わせた値と、配列の中で最大となる要素を配列の長さで掛けた値では後者が大きくなります。
次に$\log$をとって、式変形をしていきます。

```math
\begin{align}
\beta x_{a} &< \log\sum_{i=1}^{n}\exp(\beta x_{i}) < \log(n\exp(\beta x_{a})) \\
\beta x_{a} &< \log\sum_{i=1}^{n}\exp(\beta x_{i}) < \log n + \log\exp(\beta x_{a}) \\
\beta x_{a} &< \log\sum_{i=1}^{n}\exp(\beta x_{i}) < \log n + \beta x_{a} \\
x_{a} &< \frac{1}{\beta}\log\sum_{i=1}^{n}\exp(\beta x_{i}) < x_{a} + \frac{1}{\beta}\log n \\
\end{align}
```

何と、最大値が（多少の誤差はありますが）求まりました！
多少の誤差というのは$\frac{1}{\beta}\log n$のことです。したがって、要素数が増えると誤差も増えるということになりますが、$\beta$の値を大きくすることで誤差の範囲を狭めることができます。
計算機で実行する以上、$\beta$を無限に大きくすることは不可能なので、そこは要素数や$x_{i}$の取りうる範囲に応じて適切に決めていくのでしょう。
第19回ステアラボ人工知能セミナー 勉強会メモ


# 実施概要

[第19回ステアラボ人工知能セミナー 日本アイ・ビー・エム株式会社 恐神 貴行 様：多様性を考慮した強化学習・機械学習](https://stair.connpass.com/event/105447/)

>複数の商品を推薦する際には、多様な商品を提示したほうが、興味を引く商品が含まれる可能性が高くなる。また、チームで行う球技においては、全ての選手がボールに集まるのではなく、各選手が多様な動きをしたほうが、チームとして良い結果を生むことがある。本講演では、この様な多様性を考慮した、強化学習や機械学習について考える。特に、強化学習においては、将来に得られる報酬の積算値を表す価値関数を推定できれば良いが、この価値関数を行列式を用いて近似することで、複数のエージェントが多様な行動を選んで協調できるようになることを示す。

# 発表メモ

[発表資料](https://www.slideshare.net/TakayukiOsogami/19-123679820)

 - チームで行う問題では、多様な行動をすることで、高い成果を得られることがある
  - バスケットやサッカーでは、同じ場所に集まるのではなく、多様な場所を守ることで、試合が有利に進む
  - レコメンデーションでは、多様な商品がCVに繋がる可能性がある
  
 - マルチエージェントで対応する問題を強化学習で解く際に、チームの報酬を各エージェントの報酬の多様性で表現する
  - 具体的には、多様性を各エージェントの報酬ベクトルの体積によって計算する
  - 報酬ベクトルは、ニューラルネットにより学習の過程により得られるブラックボックスなもので、報酬が上がるようなベクトルの取り方をしていることを多様であると表現しており**、人から見てわかる行動の多様性とは意味合いが異なる**
  - Boltxman explorationをベースに、DPP(行列式点過程)を適用することで、探索の計算量が少なくスムーズに実施できるのが特徴
 
 - Blocker Taskのような行動の多様性が必要なタスクで実施してみると、既存手法より学習の収束が早い
  - Blocker Taskは、3人のエージェントが協力して、通路を妨害する2人のBlockerの妨害を避けて、通路を通るタスク
  - 2人のエージェントが通路の両端でBlockerを足止めすることで、1人のエージェントが通路を通れるようになる
 - Blocker Taskの学習後、エージェントごとの行動と報酬の関係性を可視化すると、多様性のある行動をしているときに報酬が高くなっていることが分かった
ブラウザ上のGifアニメーションをクリックで再生したい

HTMLなドキュメントにGifアニメ埋め込もうと思ったけど、普通に埋め込むと勝手に再生されるので、開始地点がわからなくなる。クリックしたら初めて再生みたいな感じにしたい。

一通り書いた後に、[Gifffer](https://github.com/krasimir/gifffer)の存在を知ったので、そちらを使えば良いとおもいます。


### Demo

https://jsfiddle.net/j84c5nLk/

再生は出来たけど、停止は出来そうになかった。

ネット上に画像を用意できなかった都合上、手元でキャプチャしたGIFアニメを Data URL にして使っていますが、ちゃんとURLでも機能します。


### 仕組み

元の画像をcanvasに張り付けてそのイメージを静止画として使い、クリックでgif←→静止画の切り替えをやるだけです。
また、canvasのtoDataURLを使うので、CORSな画像を扱う場合は、crossorigin属性の扱いに注意してください。

canvasのサイズを落としてdrawImageで貼り付けると、縮小されてボケた感じの画像に仕上がります。
あとcanvasで描いているので、静止画のほうにだけ「クリックして再生」みたいな注釈を書き足すこともできそうです。そこまでやるか？というのもありそうですが。


### 動作確認

PC上で確認。スマホは不明。

|ブラウザ|バージョン| 動作 | 備考 |
|-------|-----|-----|-----|
|Chrome|67.0.3396.99| 〇 | 再生は最初から|
|FireFox|61.0.1|〇 |再生は最初から|
|Microsoft Edge|42.17134.1.0| △ |再生は変なところから。裏でgifが再生され続けている状態になっている模様。|

chromeでしか確認してませんが、WebPでも動きました。
一番はvideoタグが対応してくれると嬉しいんですが・・・
VMwareでUbuntuのクローンVMに同じIPアドレスが割り当てられる問題について

# 概要

VMware Workstationで、Ubuntu 18.04/20.04のサーバーイメージを複数クローンし、サーバークラスターを作成したところ、全てのVMに同じIPアドレスが割り当てられる現象が発生しました。

期待する動作は、VMwareのbuilt-in DHCPサーバーがMACアドレスに応じてユニークなIPアドレスを割り当ててくれることですが、どうもUbuntuの場合はそのような動きにはなってくれません。

# issuesの確認と、そこで紹介されているワークアラウンド

同じような現象はレポートされていて、/etc/machine-id を変更することで、ユニークなIPが割り当てられるようになります。

* https://github.com/chef/bento/issues/1062

そもそもなぜUbuntuでこんな問題が発生したのか、少し探ってみました。

そして、最終的にVMware Workstation等で利用する場合に、もう少し簡単な方法を利用しているので、その説明と設定方法をまとめておきます。

# 原因

Wiresharkでフィルターに```udp.port == 67```を設定して、DHCP Discoverパケットを眺めてみると、異なるhost name(12)エントリを持つものの、Client Identifier(61)エントリがまったく同じものが確認できました。

古いUbuntu 16.04の挙動を調べてみると、Client Identifier(61)エントリは付与されていませんでした。

18.04からnetplanがIP割り当てを管理している影響なのか、ここら辺をキーワードに検索すると次のバグリポートが見つかりました。

* [netplan does not allow dhcp client identifier type to be specified](https://bugs.launchpad.net/netplan/+bug/1738998)

このリポートはUbuntuクライアントがWindows ServerのDHCPサーバーからIPを割り当てる際の問題について言及していて、状況は異なりますが参考にはなります。

# 対応策

VMwareは異なるVMのNICに割り当てるMACアドレスはユニークにしてくれますが、ファイルシステム上のmachine-idファイルはケアしてくれません。

またクローンVM毎に systemd-machine-id-setup を起動するのも、なんか違うかなという気がします。

そこで、今回はMACアドレス毎にClient Identifierを作成するようにしました。

クローンを作成する時に使うオリジナルのVM上の /etc/netplan/ 配下の設定ファイルを編集し、デバイス毎に次のような一行を加えました。

```diff
--- /tmp/01-netcfg.yaml 2018-11-19 21:30:57.464200654 +0900
+++ /etc/netplan/01-netcfg.yaml 2018-11-19 21:24:45.947087390 +0900
@@ -6,7 +6,10 @@
   ethernets:
     ens33:
       dhcp4: yes
+      dhcp-identifier: mac
     ens34:
       dhcp4: yes
+      dhcp-identifier: mac
     ens35:
       dhcp4: yes
+      dhcp-identifier: mac
```


最終的にこのVMを利用することで、無事に各クローンVMにユニークなIPが割り当てられるようになりました。

VMイメージを元(Seed)にして、複数のクローンVMを作成するような場合には、あらかじめ元VMの/etc/netplan/配下のファイルを編集しておくようにしましょう。

以上
CentOS7にPython3系をインストールする手順

Vagrantで作成したCentOS7にPython3系をインストールしてみました。

# Python3系のインストール
CentOS7にyumリポジトリの追加。

    $ sudo yum install -y https://centos7.iuscommunity.org/ius-release.rpm

記事書いたときにはpython3.6が最新だったので、yumの中のpython3.6関連パッケージを検索します。

    $ yum search python36

なんか色々出てきました。
<img width="932" alt="python36.png" src="https://qiita-image-store.s3.amazonaws.com/0/153841/e20f41b0-39ae-97cf-fd8e-8558ece648be.png">
上記の中で、ひとまず必要なパッケージをインストールします。

    $ sudo yum install python36u python36u-libs python36u-devel python36u-pip

インストールが完了したら、バージョン確認を行います。

    [vagrant@localhost ~]$ python3.6 -V
    Python 3.6.5

バージョンが出ればインストール完了。

# pipを有効化する
現状では`pip`コマンドが使用できず下記のようになるので、有効化します。

    [vagrant@localhost ~]$ python3.6 -V
    Python 3.6.5
    [vagrant@localhost ~]$ pip --version
    -bash: pip: command not found

pipの配置されている場所を探します。

    [vagrant@localhost ~]$ which pip3.6
    /usr/bin/pip3.6
    
`/usr/bin/`の配下にあるらしいので`pip`コマンドで済ますために`シンボリックリンク`を作成します。

    [vagrant@localhost ~]$ sudo ln -s /usr/bin/pip3.6 /usr/local/bin/pip
    [vagrant@localhost ~]$ pip --version
    pip 9.0.1 from /usr/lib/python3.6/site-packages (python 3.6)

pipが使用できるようになりました。
`sudo pip install 〜`で使用可能になります。（保存先：/usr/lib/python3.6/site-packages）
`sudo`を使用しない場合は`pip install --user 〜`で使用可能になります。（保存先：.local/lib/python3.6/site-packages）
gensimのDirectory関数でハマった件(df値)

##0.この記事は
・主に潜在的意味解析に使うgensimをpythonで使った際、**df値が全て１**になってしまい調査したメモです。

##1.まとめ
・１配列の中に同一文字列を100個詰め込んでテストしてもdf値は1。gensim.corpora.Dictionary()は**inputの単語頻度計測関数ではない**。
・文章毎に配列を分けることで、**「文と文の間で、単語が何回使われているか」**を計算してくれるのがgensim.corpora.Dictionary()の仕組み。

##2.gensim.corpora.Dictionary()の考え方
```sample1.py
・Dictionary(['hoge','hoge','hoge','hoge']) #df値1,ジーザス!!
```
**１配列内に何回hogeが出てもdf値は1です。**要注意。

```sample2.py
・Dictionary([['hoge'],['hoge']],[['hoge'],['hoge']]) = #df値2
・Dictionary(['hoge'],['hoge'],['hoge'],['hoge']) = #df値4
```
配列を２つに分けるとdf値2、配列を４つに分けるとdf値4。

##3.mecabで形態素分析する際に、１文毎にまとめて配列化することで解決。
配列「words」を後続にまわしてcorpora.Dictionary(words)でOK。
ダブルシャープ(##)のコメント行にご注目。

```sample3.py
#ファイルを読込み前は省略
with open(file_name, 'r',encoding="utf-8") as f:
    reader = f.readline()
    while reader:
      ## 取り込んだ行毎に単語を配列化する変数readercolectを定義
      readercolect =[]
      #Mecabで形態素解析を実施
      parse = mecab.parse(reader)
      lines = parse.split('\n')
      items = (re.split('[\t,]', line) for line in lines)
      # 名詞をリストに格納
      for item in items:
        wcnt = wcnt +1
        if (item[0] not in ('EOS', '', 't','RT') and item[1] == '名詞'):
          ##reader内の配列に一旦格納する。
          readercolect.append(item[0])
      ## 行内の形態素を全て処理したら、後続処理に引き渡すための配列に格納する。
      words.append(readercolect)
      reader = f.readline()
print(words)
```

以上です。ありがとうございます。
matplotlibで信頼区間(エラーバー)を描画

#はじめに
授業で信頼区間をグラフにして云々みたいなことを言われたのですが, matplotlibで書き方を知らなかったのでメモ書きしておきます.

#書いていくグラフ
下のようなグラフを作ることができます.

![example1.png](https://qiita-image-store.s3.amazonaws.com/0/264254/398d689e-0f36-e0f5-69f5-73b14d16f272.png)

ちなみにソースコードは以下の通りです.

```python
import numpy as np
from matplotlib import pyplot as pp

fig = pp.figure()
ax = fig.add_subplot(1,1,1)

x_list = [1.2, 1.8]
y_list = [10.2, 14.3]

#エラーバーの範囲
interval_list = [2.5, 3.4]

#各エラーバーの描画
for x, y, interval in zip(x_list, y_list, interval_list):
    ax.errorbar(x, y, interval, fmt='ro', capsize=4, ecolor='black')

ax.set_xlim([0.8,2.2])

pp.show()
```

#errorbar()の引数ついて
エラーバーを描画するにあたって, 重要な関数は`errorbar()`です.
たぶん`fig`でも`axes`でも似たような動作なので気にせず使っていきましょう.
以下に主な引数について説明していきます.

##エラーバーの幅 : xerr, yerr
エラーバーをx軸方向に伸ばしたいのであれば`xerr`, y軸方向に伸ばしたいのであれば`yerr`を使います.
与えたxのサイズをNとすると,

|    入力サイズ   |    動作   |
|:-------------:|:---------:|
|       1       | **すべて**のデータに対して, +/-方向にその幅分エラーバーを伸ばす |
|       N       |**各々**のデータに対して, +/-方向にその幅分エラーバーを伸ばす  |
|     (2,N)     |**1行目の方に-方向**, **2行目の方に+方向**の幅を記述. 各データに対しその幅分のエラーバーを伸ばす|

になるみたいです. ~~正直一番下を利用したことがないので自信はないです.~~

##エラーバーの設定 : ecolor, elinewidth, linestyle, alpha
| 引数 | 説明 | 例|
|:-:|:-:|:-:|
|  ecolor | エラーバーの色を設定する  | ecolor='black' とか <br>ecolor='#F000FF' など |
|  elinewidth | エラーバーの太さを設定する  | elinewidth=3 |
| linestyle  | エラーバーのスタイルを変更する | linestyle = ':' |
| alpha | エラーバーの透明度を設定する (0$\leq$alpha$\leq$) | alpha = 0.3 | 
ちなみに色の名前は[公式ページ](https://matplotlib.org/examples/color/named_colors.html)で見ることができます.
また色はカラーコードでも設定できるのでそっちに馴染んでいる人はそっちでもいいかもしれないです.
他にもmatplotlibのデフォルトカラーが使いたい場合は`'C0'`や`'C1'`のようにすると利用できます.

linestyleは他でもおなじみなので説明はいらないかもしれませんが書いておきます.
エラーバーを破線にしたりフツーの線にしたりできます.
これについても[公式ページ](https://matplotlib.org/gallery/lines_bars_and_markers/line_styles_reference.html)を見るとどのような線にするか選べます.


##エラーバーの中心の点 : fmt
エラーバーの中心の点のフォーマットを設定します. 詳しくは知らないのですが, 色+形をstr型で渡してあげます.

| 例 | 構造 | 説明 |
|:-:|:-:|:-:|
| fmt = 'ro'  | red と o  | 赤く塗りつぶされた丸 |
| fmt = '^b'  | ^ と blue  | 青く塗りつぶされた上向き三角 |
| fmt = '*C0' | * と C0  | matplotlibの0番目のデフォルトカラーで塗りつぶされた星 |

点の形については[公式ページ](https://matplotlib.org/api/markers_api.html#module-matplotlib.markers)にあるのでそちらを参照してください.
文字列も利用できますが正直使わないような…


##線の先端のあれ : capsize, capthick
線の両端の横棒-の長さと太さを設定します.
どちらもデフォルトでは`None`をとるため, 横棒が欲しい場合は`capsize`を設定してあげてください.

| 引数 | 説明 | 例 |
|:-:|:-:|:-:|
|capsize|線の両端の横棒の長さを設定する | capsize = 3 |
|capthick | 線の両端の横棒の分厚さを設定する | capthick = 2 |

##その他 : label
legend(用例)を利用するときに必要なあれです.
特に説明はありません.

#おまけ
他の引数で使わなものを一部載っけておきます.
また思いつき次第追記するかもしれません.

##エラーバーを点の上に重なるように表示する

```
barsabove = True
```
もちろんデフォルトでは`False`に設定されています.

##
Slack活用術。 「あれどこだっけ？」を絶滅させる。

# Star を使う

UIがちょっとあれだけど活用。個人的には「ずっと覚えておく用」じゃなくて「ちょっと見返す用」に使っている。

# 検索を使う

言わずもがな。昔は使いにくかったけど今は改善された。

# カレンダーを使う

チャンネル設定の中にあり。(場所が謎)

# All Threads を見る

自分が返信したものならここから探す。

# 自分向けのDMを使う

メモ用。他のSlackコメントへのリンクを置いたりする。

# 自分用プライベートチャンネルを作る。

用途ごとに。メモ用に。

# 使えていない機能を使う

覚えるのは一瞬。使うのは数年。








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Vue で tsx を使う

# やること

* vue.jsとTypeScriptを使っているプロジェクトでtsxを書けるようにします。

# やれなかったこと

* 型をいい感じにする(tsxの意味がないのでなんとかしたい)

# tsx?

Reactで使われているjsxのTypeScript版です。

# 手順
## 1. `tsconfig.json` に以下の記述を追加する

```json:tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react",
    "jsxFactory": "h"
    ...
  }
}
```

## 2. `Foo.tsx` を書く

`render` の第一引数が `React.createElement` に該当するやつです。
`tsconfig.json` の `"jsxFactory": "h"` と記載したのは、これが関係しています。

[JSXのファクトリ関数を自作する方法と、Reactと全然違う挙動をさせるサンプル](https://qiita.com/boiyaa/items/0e89d7c6cecf8a58d902) が詳しいです。

```tsx:Foo.tsx
import Vue from "vue";
import { Component } from "vue-property-decorator";

@Component
export class Foo extends Vue {
  render(h) {
    return <h1>HELLO WORLD!!!</h1>;
  }
}
```

## 3. `index.ts` (エントリポイント)を書く

```ts
import Vue from "vue";
import { Foo } from "./Foo";

new Vue({
  el: "#app",
  components: {
    app: Foo,
  }
});
```

## 4. 色々設定する

```ts:webpack.ts
const config: Configuration = {
  ...
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
      },
    ],
  },
};
```

以上です。よろしくお願いします。
GASをパイプラインにしてQiita RSSのSlack通知を改善する。

# きっかけ

https://qiita.com/organizations/lightcafe_gr

弊社ライトカフェグループもついにQiita Organizationsを使い始めたので、SlackにQiitaチャンネルを作ってきゃっきゃうふふしているのですが、SlackデフォルトのRSS通知での表示は見やすいものになっていませんでした。
<img width="616" alt="スクリーンショット 2018-11-14 10.31.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/52626/a4968cee-9e54-0ffe-e19a-812415166d7c.png">
若干イケていませんよね。
SlackであればURLさえ貼られればデフォルトでいい感じに展開してくれるので、
<img width="557" alt="スクリーンショット 2018-11-14 10.31.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/52626/3717ebe4-51d8-73a2-5dd1-64ad6b1d3232.png">
こんな感じになってくれれば嬉しいですね。
ということでRSSを加工するパイプラインを作成してみましょう。
## 開発環境

ライトに作りきってしまいたかったのでGoogle Apps Scriptにしました。
本当はローカルで開発してデプロイして。と今風の開発をしたかったのですが、ライトにやってしまいました。

### 参考(理想)
[【GoogleAppsScript】ES6を使ったGoogle Apps Scriptの開発](https://qiita.com/romukey/items/22eb4ea6d995d5d62f69)

### 現実

Google Drive上から、新規ファイル作成で`Google Apps Script`を指定してコーディング開始です。
GASをwebアプリケーション化するためには`doGet`や`doPost`関数を作成することでいい感じに処理してくれるようになります。今回は`doGet`で。

urlパラメータから `atom` に指定されたフィードurlを拾って、 `XmlService` を利用して加工します。
この際、feedにはnamespaceが指定されているため、要素の取得にはnamespaceを指定してやる必要があります。

今回はurlだけにポストされるようにしたかったので、titleとcontentをdetachすることでノードを削除するだけの対応です。

```JavaScript
function doGet(e) {
  var feed = e.parameter.atom;
  var response = UrlFetchApp.fetch(feed);
  var xml = XmlService.parse(response.getContentText());
  var atom = XmlService.getNamespace('http://www.w3.org/2005/Atom');
  
  var entries = xml.getRootElement().getChildren("entry", atom);
  for (var i=0; i<entries.length; i++) {
    entries[i].getChild('content', atom).detach();
    entries[i].getChild('title', atom).detach();
  }
  return ContentService
    .createTextOutput(XmlService.getPrettyFormat().format(xml.getRootElement()))
    .setMimeType(ContentService.MimeType.XML);
}
```

コードが出来たらメニューから [公開] -> [ウェブ アプリケーションとして導入] を選択すればurlが払い出されるので、以下のようにクエリパラメータでfeed urlを指定してやれば加工されたXMLでレスポンスを得ることができます。

https://script.google.com/macros/s/{applicationのIDぽいもの}/exec?atom={feedのurl}

## まとめと課題

こうした処理をライトに動かす分にはGoogle Apps Scriptは悪くないです。

* あくまでQiitaが配信するatom形式でのRSS feedに対してのみ使えるAPIです。
* 今更RSSってどれくらい使われてるんでしょうか。
Nginxで複数Originを許可するCORS設定例

# これはなに
Nginxで複数Originを許可するCORS設定をしたい場合に使えるコンフィグ例です。。
CORSの説明はしません。

# 設定

```nginx
# conf.d/cors.conf
set $OKMETHOD $cors$request_method;

if ($OKMETHOD = 'OKOPTIONS') {
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' '*';
    add_header 'Access-Control-Max-Age' 86400;
    add_header 'Access-Control-Expose-Headers' 'Content-Transfer-Encoding';

    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
}

if ($OKMETHOD = 'OKPOST') {
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' '*';
    add_header 'Access-Control-Expose-Headers' 'Content-Transfer-Encoding';
}
```

```nginx
# site-enabled/example.com.conf
map $http_origin $cors {
    default "NG";
    "http://localhost:3000" "OK";
    "http://sub.example.com" "OK";
}

server {
    listen 80;
    server_name example.com;

    root /var/www/public;

    location / {
        index index.html;
    }

    location /api/ {
        include conf.d/cors.conf;
        proxy_pass http://127.0.0.1:8080;
    }
}
```

# 解説
Access-Control-Allow-Originヘッダに1つのOriginが含まれる場合しか受け付けないブラウザが多いと思います。
アクセス元Origin（$http_origin）をmapディレクティブで判断することで複数のOriginに対応したAccess-Control-Allow-Originを設定できます。

Nginxのmapディレクティブは、serverディレクティブに書けないため、server外にしています。
また、ifの複数条件とネストは許容されていないため、変数を結合することで条件判断をしています。

具体的には、mapディレクティブで条件一致した場合`$cors`に`OK`の文字が、それ以外では`NG`の文字が入ります。
また、リクエストメソッド`$METHOD`と組み合わせることで、`OKPOST`や`NGOPTIONS`という文字列になり、ifで評価することができます。

Preflightリクエストのため、OPTIONS（No content）とPOSTを分けています。
今回はRPC APIを想定しているためPOSTとOPTIONSですが、他のメソッドにも対応可能です。
SourceTreeユーザーが、空コミットだけターミナルでする手順

WIP PRベースの開発をしていると空コミットよく使いますよね。
SourceTreeでは色々いじったりしないと空コミットができないようなので、そこだけ切り出してターミナルでやろうとしたときのメモです。

# 手順
## 新規ブランチの作成
SourceTreeで行う。

## ブランチの確認
ターミナルで今いるブランチが間違ってないかを確認する（一応）。
cdで対象のディレクトリまで行って

```
git branch
```

## 空コミット
```
git commit --allow-empty -m "first commit"
```

## リモートにプッシュ
SourceTreeで行う。
Lorcaを使ってGoでHTML5アプリを作ろう！

# 2019/02追記
サンプルのリポジトリを追加
https://github.com/gashirar/lorca-sample

# はじめに
https://github.com/zserge/lorca
上記の紹介と、サンプルの疎通をしてみます。

# Lorcaとは
- モダンなHTML5デスクトップアプリを作るためのライブラリ
- UIレイヤはChromeブラウザを利用
  - Electronのようにパッケージにバンドルはしない
  - インストールされたChromeを利用

名前の由来は？
*Lorca is an anagram of Carlo, a project with a similar goal for Node.js.*
https://github.com/GoogleChromeLabs/carlo/

# Getting Started

## 作るものの概要
JavaScriptからGoの呼び出しと、GoからJavaScriptの呼び出しをやってみます。
動きは下記のようなながれをイメージ。

1. 画面上のボタンを押す
  - JavaScriptからGoのfunc呼び出し（helloFromGo）
  - GoからJavaScriptのfunction呼び出し（helloFromJavaScript）
  - Goからdocument.getElementByIdを呼び出し
2. 画面に文字が表示

## ソース

```go
package main

import (
	"net/url"
	
	"github.com/zserge/lorca"
)

var ui lorca.UI

func main() {
	ui, _ = lorca.New("", "", 480, 320)
	defer ui.Close()

  // GoのfuncをJavaScriptで呼び出せるようBind
	ui.Bind("helloFromGo", helloFromGo)
	
  // 今回はurl.PathEscapeでそのままHTMLを配置
  // ※下記はHTTPサーバをたててそこから取得する例
  //   https://github.com/zserge/lorca/tree/master/examples/counter
	ui.Load("data:text/html," + url.PathEscape(`
	<!doctype html>
    <html lang="ja">
    <head>
    <script>
        function helloFromJavaScript() {
            return 'Hello from JavaScript!'
        }
    </script>
    </head>
    <body>
        <button onclick="helloFromGo()">Hello!</button>
        <div id="content"></div>
    </body>
    </html>
	`))
	
	<-ui.Done()
}

func helloFromGo() {
  // JavaScriptのfunction呼び出し
	s := ui.Eval(`helloFromJavaScript();`).String() + "<br>" + "Hello From Go!"
  // HTMLに反映
	ui.Eval(`document.getElementById('content').innerHTML="`+s+`";`)
}
```

## 実行
```bash
go run main.go
```
![クリップボード01.jpg](https://qiita-image-store.s3.amazonaws.com/0/116002/04a78b1e-2153-9c71-44e9-a484bb330558.jpeg)
ボタンを押すと...
![クリップボード02.jpg](https://qiita-image-store.s3.amazonaws.com/0/116002/416ea9bb-fcbe-0ad6-0fd9-013f5812165f.jpeg)
JavaScriptからGo、GoからJavaScriptの呼び出しができました

# 所感
上記のように、GoとJavaScriptの双方向呼び出しが簡単にできました。
より詳しい処理を見たい方はexampleを触ってみるのがオススメです！
https://github.com/zserge/lorca/tree/master/examples
  
2018年11月5日くらいにInitial Commitですが、すでにStar数も1500とぐんぐん伸ばしています。
GoでちょっとしたGUIツールを作るのにつかってみるのはいかがでしょうか。
ジョブやプログラムを再実行する前にエラー原因を確認すべき理由。「ビフォーメソッド」をどうぞ。


# 理由. 再実行でエラーが追えなくなるかもしれないから

状態を変えてしまうかもしれない。

# 理由. 二度と同じ問題で困らないため

エラーは人のためならず。

# 理由. エラー追跡能力を磨くため

「なんとなく動いた」を繰り返しても調査能力は上がらない。









<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
C++ Builder XE4 > Error > E2251 基底クラス 'TForm' を初期化するデフォルト コンストラクタが見つからない > 対処

```txt:動作環境
C++ Builder XE4
```

### Error

エディタで一から実装したとき、コンストラクタの作成部分の実装で下記のエラーが出た。

```
[bcc32 エラー] Unit1.cpp(13): E2251 基底クラス 'TForm' を初期化するデフォルト コンストラクタが見つからない
  詳細な解析情報
    Unit1.cpp(13): 構文解析対象:  _fastcall TForm1::TForm1(TComponent *)
```

### 実装 (簡略版)

```Unit1.h
//---------------------------------------------------------------------------

#ifndef Unit1H
#define Unit1H
//---------------------------------------------------------------------------
#include <System.Classes.hpp>
#include <Vcl.Controls.hpp>
#include <Vcl.StdCtrls.hpp>
#include <Vcl.Forms.hpp>
//---------------------------------------------------------------------------
class TForm1 : public TForm
{
__published:	// IDE で管理されるコンポーネント
private:	// ユーザー宣言
public:		// ユーザー宣言
	__fastcall TForm1(TComponent* Owner);
};
//---------------------------------------------------------------------------
extern PACKAGE TForm1 *Form1;
//---------------------------------------------------------------------------
#endif
```

```Unit1.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
{
}
//---------------------------------------------------------------------------
```

### 間違い

```cpp
__fastcall TForm1::TForm1(TComponent* Owner)
{
}
```

### 正解

```cpp
__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{
}
```

TForm(Owner)からの継承？を記載忘れのために「デフォルトコンストラクタが見つからない」ということのようだ。

IDEで実装すれば、こういう間違いは起きない。
PowershellでSQLServerにSQLを実行するスクリプト

各行の先頭の型宣言はあってもなくても動きます。

なるべく行を少なくしてわかりやすいように記述してみました。

```powershell:ExecSQL.ps1
# SqlConnectionStringBuilder を使用してSQL接続の設定を保存する
[object]$ConnectionString = New-Object -TypeName System.Data.SqlClient.SqlConnectionStringBuilder
[object]$ConnectionString['Data Source'] = "localhost\SQLEXPRESS" #SQLServerのホスト\インスタンスを指定
[object]$ConnectionString['Initial Catalog'] = "HOGEHOGE" #データベースを指定
[object]$ConnectionString['Integrated Security'] = "TRUE" #Windows統合認証を利用する場合は"TRUE"

# SQL文の文字列を設定する
[string]$SQLQuery = "SELECT * FROM [dbo].[hogehoge]"

# DataTableを利用してSQL実行結果を一時格納
[object]$resultsDataTable = New-Object System.Data.DataTable

# SQLConnection、SQLCommandを設定する
[object]$SqlConnection = New-Object System.Data.SQLClient.SQLConnection($ConnectionString)
[object]$SqlCommand = New-Object System.Data.SQLClient.SQLCommand($SQLQuery, $SqlConnection)

# データベースへ接続
[object]$SqlConnection.Open()

# ExecuteReaderを実行してDataTableにデータを格納
[object]$resultsDataTable.Load($SqlCommand.ExecuteReader())

# データベース接続解除
[object]$SqlConnection.Close()

#format-tableで画面表示
[object]$resultsDataTable | format-table 

# CSVへ保存する場合はexport-csv
[object]$resultsDataTable | export-csv hogehoge.csv -Encoding default -NoTypeInformation
```

.NET Frameworkを活用できるからPowerShellは便利ですね。
2018年のbeforeunloadイベントハンドラーの書き方メモ

ブラウザ自身またはタブを閉じる時に、大事な未保存情報がある場合、`beforeunload`イベントハンドラーを登録することで、閉じる処理を止めて確認ダイアログを表示することが出来ます。

今回はreactで`beforeunload`ハンドラーを書く時にはまったことをメモします。

### 結論

- 確認ダイアログの表示・非表示と表示するメッセージのコントロールは`beforeunload`ハンドラーの`event.returnValue`だけでコントールすれば良い。

- `beforeunload`ハンドラーでメッセージ文字列を返すような実装だと、変な動きがあるからです。

### 環境

- Win7+IE11
- MacOS 10.13.5 + Chrome 70.0

### reactでの書き方

```react
export default class MyComp extends React.Component {
  constructor(props) {
    super(props);

    this.handleBeforeUnload = this.handleBeforeUnload.bind(this);
  }

  componentWillMount() {
    // 登録
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  componentWillUnmount() {
    // 解除
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  }

  handleBeforeUnload(e) {
    if (this.props.hogeObject) {
      // 仕様標準のメソッドを呼び出す
      e.preventDefault();
      // returnValueに画面に表示したいメッセージを設定（Chromeはそれを無視してブラウザ定義のメッセージを表示）
      e.returnValue = '未保存のデータがありますが、本当に閉じますか？';
    }
  }
  // ...
}
```

- 該当条件に当たった場合、e.returnValueにメッセージ文字列を設定すると、閉じる動作が停止されます。
- `e.preventDefault()`が仕様標準のお薦めなので、念のため書きます。

### 次のような書き方で困った！！！

ネットで調べるとよく出てくる記事には、マルチブラウザをサポートするために、`e.returnValue`とハンドラーの戻り値を両方返すようなお薦め実装がありますが、実に試してみたら、下記のような変な動きがあることがわかりました。

- 最初は`hogeObject`がない状態で、確認ダイアログなしで、タブを閉じれます。
- 一旦`hogeObject`がある状態にして、タブを閉じると確認ダイアログが表示されます。（ここまでまた良い）
- 他の画面に遷移してから、もう一回この画面を表示して、`hogeObject`が`ない`状態でタブを閉じると、確認ダイアログが`表示`されてしまいます。
- デバッグしてみたら、`handleBeforeUnload`は初回と同じように空白文字列を返しています。
- 戻り値が空白でも、初回と違って確認ダイアログを表示するのが何故でしょうか？ブラウザがURL単位で覚えたのかな？

```react
  handleBeforeUnload(e) {
    let msg = '';
    if (this.props.hogeObject) {
      // 仕様標準のメソッドを呼び出す
      e.preventDefault();
      // returnValueに画面に表示したいメッセージを設定（Chromeはそれを無視してブラウザ定義のメッセージを表示）
      msg = '未保存のデータがありますが、本当に閉じますか？';
    }

    e.returnValue = msg;
    return msg;
  }
```

### 解決

ブラウザの裏仕様がわかりませんが、一旦標準に書いてある`e.returnValue`に戻り値を設定するように修正したら、今回の問題を解決しました。

### 参考ドキュメント
- [beforeunload (MDN)](https://developer.mozilla.org/ja/docs/Web/Events/beforeunload)
GitBucketでのリンクの貼り方

(GitBucket 4.23.1 で確認）

#### 方法１
wikiに外部URLのリンクを置く、issueからwikiへのリンク、等。

~~~
[ラベル](URL)
~~~

gitbucket内の何かからgitbucket内の何かにリンクしたい場合（相対パス（相対URL指定））
（何か＝issue, wiki, pull request 等）
 
~~~
[ラベル](/gitbucket/以降のURL)

例）
[自担当issueリンク](/gitbucket/dashboard/issues/assigned?state=open&sort=created&direction=desc)
~~~

上記がこの記事で伝えたいことのメイン。
（…ですが、もっと良い方法がありそう…）

#### 方法２
「リンク元がwiki→リンク先もwiki」の場合はこれでOK

~~~
[[wikiページ名]]
~~~

~~~
例）
[[ブランチの運用]]
~~~
エンジニアの個人生産性でも「見積り」は外れがちだから注意

# 時間の見積り

「明日は時間がある」と思うが外れる。

# エネルギーの見積り

「明日は元気だ」と思うが外れる。

# 自由度の見積り

差し込みのタスクが必ず起こる。 

# 他の見積り

ゆるぼ。(コメント欄参照)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Node.jsで秘密キー文字列を書く時はdotenvを使おう

こんにちわ。

ソースファイル内に、とりあえずと秘密キーを書いたまま忘れて、うっかり`git push`してしまった事、ありませんか?

僕はあります、すぐ気付いたので何とかなりましたが...

そんな大惨事を未然防止する為にも、Node.jsで秘密キーを記載する場合は、`dotenv`を積極的に使おう、と言うのが今回のお題目です。

# dotenv とは
- [dotenv - npm](https://www.npmjs.com/package/dotenv)

Nodeアプリケーション実行時に、`.env`ファイルに記載された環境変数を`process.env.*`へ反映してくれるパッケージです。

`.env`の環境変数は、プロジェクトディレクトリ内のみに適用され、アプリケーション実行中しか有効にならないので安全です。

重要な文字列は、ソースファイルにベタ書きするのでは無く、`.env`に記載しといて、ソースファイルからは環境変数の参照に留めよう、と言った感じです。

`.gitignore`に`.env`を登録しておけば、リモートリポジトリにうっかり同期される事も無くなり安心!


# 使い方
至極簡単です。


## インストール
```console:Shell
$ npm i --save dotenv
```
`dotenv`パッケージをインストールします。


## ファイル構成
```:Directory
project/
+-- .env
+-- .gitignore
+-- main.js
+-- package.json
+-- src/
+-- ...
```
`.env`ファイルをプロジェクトルートに作成します。

# 環境変数の記載
```ini:.env
NODE_ENV_FOO=0123abcd
MY_USERNAME=dojyorin
MY_PASSWORD=789xyz
```
登録する環境変数を記載して行きます。

# ソースファイルで読み込む
```javascript:main.js
require("dotenv").load(); //グローバルオブジェクトとしてロード

console.log(process.env.NODE_ENV_FOO); //"0123abcd"
connect(process.env.MY_USERNAME, process.env.MY_PASSWORD); //"dojyorin", "789xyz"
```

# Git同期させない
```text:.gitignore
node_modules/
.env
```
これをしないと何の意味もありませんね。

# まとめ
そのまま気付かずAzureからブッ飛んだ金額の請求書が届いてたかも知れないと思うと、背筋がゾッとする...
【Microsoft Bookings】予約サイトをノンコーディングで作る方法 【無料】

# 概要

ノンコーディングで予約サイトを公開できる Microsoft Bookingsの調査をしたのでそれの紹介です。（Bookingsは無料で利用可能ですが、有料のOfficeアカウントは必要になります）
使い方等は触ってみればわかるので（基本設定のみ）今回は割愛させていただきます。
今回は利点、欠点をまとめて紹介します。

# 利用方法

利用するには一定プラン以上の Office アカウントが必要となります。

- Office 365 Business Premium 
- Office 365 Education A3, A5
-  Office 365 Education E3, E5

Educationプランの場合はデフォルトがオフになっている為、管理Portalからビジネスアプリ(無料)を購入し、使用するユーザーに割り当てましょう。

![Bookings001.JPG](https://qiita-image-store.s3.amazonaws.com/0/183354/9a4240a0-c42a-8dda-27af-2a30942bb8df.jpeg)

[こちらに詳しいやり方が載っています](https://blog.kazuakix.jp/entry/2017/11/20/222732)

# 利点

## 設定のみで簡単に作成できる

この辺りはさすが Office 製品だと思いました。基本情報登録→サービス登録→公開(ボタンクリック)でwebに簡単に公開できる点はよいと思います。

## 特定のプラン以上なら無料で利用可能
上記で紹介したプラン以上なら無料利用できます。

## スマートフォンにも対応
若干デザインが崩れる(文字が少しだけはみ出る)等はありますが、ほぼ問題ないレベルだと思います。機能自体はPCと変わりありません。

## リマインドメールが自動で送信される
予約のキャンセルや、予約前日(設定次第)にリマインドメールが送れます。もちろん設定だけです。

## 追加質問が可能
ドロップダウンとテキスト入力の質問の追加が可能です

## 自動で予定表に追加される
予約が行われた際に対象のスタッフに予定表に自動的に追加されます。staffが選択されていない場合は自動的に任意のスタッフに割り当てられます。

# 欠点

## 変更に対してリマインドが送れない?
予約キャンセル（スタッフが）する際にはユーザー（お客さん）に対してリマインドメールを送ることはできますが、予約時間をずらしたりした際にリマインドメールを自動送信するのは Bookings だけでは不可能です。

## デザインを細かく変更はできない
独自のデザインを作ることはできません。（変更できるのはロゴや色くらい）

## 重複予約ができない
Bookings はサービスをスタッフに割り当てるという仕様上１人に対して同じ時間に複数の予約をすることはできません。美容師などには向いていますが、飲食店など店やコースの予約などにはあまり向いていないように思えます。

## 作業時間やバッファーはあらかじめ決める必要がある
サービスに対してあらかじめ作業時間やバッファーを設定する必要があります。ある程度決まっていれば問題ないと思いますが、作業時間が読めない場合等にはあまり向いていません。

# 気になった点

## 変更が即時反映される
質問やスタッフの追加は追加して保存したタイミング(保存とは別に公開ボタンがあります)でサイト上に反映されます。

## 顧客はメールアドレス単位で自動的にまとめられる
予約を行ったら顧客として設定されますが、メールアドレスが入力されている場合は名前を変更したりせて予約をしても同一の顧客としてみなされます。メールアドレスが入力されていない場合は同一の名前でも別の顧客として認識されます。

## Bookingsの予定表からは削除されるが個人の予定表からは削除されない
予約キャンセルなどで予定が変わった時、Bookingsの予定表からは削除されますが、個人(スタッフ)の予定表からは削除されません。

## 個人に紐づく
Officeのサービスなのでサイトは個人に紐づきます

#　参考

- [Microsoft Bookings](https://products.office.com/ja-jp/business/scheduling-and-booking-app)
- [予約ページにユーザー設定と必要な質問を追加する](https://support.office.com/ja-jp/article/%E4%BA%88%E7%B4%84%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E8%A8%AD%E5%AE%9A%E3%81%A8%E5%BF%85%E8%A6%81%E3%81%AA%E8%B3%AA%E5%95%8F%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B-fd6b7587-5055-4bcd-83a4-13bd4929bfff)
CSSでpositionをいじったらボタンをクリックできなくなった時の対応

CSSでpositionを調整したら、ボタンが押せなくなって詰まったので、その解決策について書きます。

原因は他の要素と重なって他の要素をクリックしている状態になったことが原因でした。

その解決策として、問題の要素のpositionをrelativeにして、z-indexを設定することで解決できました。

こんな感じです。
.problem{
	position:relative;
	z-index: auto;
}
.other{
	position:relative;
}

z-indexは番号でもいけるみたいです。
[Unity]WebGL出力でダイアログからVRMを読み込む

UnityのWebGLビルドで、ユーザーが好きなVRMを指定してゲームに読み込み、キャラクターとして使用する方法です。
読み込み部分は@mechamogeraさんの下記の記事ほぼそのまままです（感謝）

##参考記事
「UnityのWebGL出力でHTMLのファイル選択ダイアログを表示して外部ファイルを読み込む」
https://qiita.com/mechamogera/items/89d4555b202af96810af

##手順

###UniVRMのインポート

https://github.com/dwango/UniVRM/releases
UnityPackageをダウンロードしてインポートします

###Pluginの準備

上記の記事の、「uGUI上からファイルを読み込む方法」を使用します

https://qiita.com/mechamogera/items/89d4555b202af96810af#ugui%E4%B8%8A%E3%81%8B%E3%82%89%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E6%96%B9%E6%B3%95

記事内に記載されている「Assets/Plugins/FileImporter.jslib」を作成します。

###スクリプトの準備

```csharp:ImportButton.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Runtime.InteropServices;
using System;
using VRM;

public class ImportButton : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void FileImporterCaptureClick();

    public void OnButtonPointerDown()
    {
        FileImporterCaptureClick();
    }

    public void FileSelected(string url)
    {
        StartCoroutine(LoadJson(url));
    }

    private IEnumerator LoadJson(string url)
    {
        print(url);
        WWW www = new WWW(url);
        while (!www.isDone)
        { 
            yield return null;
        }
        if (www.error == null)
        {
            LoadVRMClicked_WebGL(www.bytes);
        }
        else
        {
            print(www.error);
        }
    }

    void LoadVRMClicked_WebGL(Byte[] bytes)
    {
        var context = new VRMImporterContext();

        // GLB形式でJSONを取得しParseします
        context.ParseGlb(bytes);

        context.Load();
        OnLoaded(context);
    }

    private void OnLoaded(VRMImporterContext context)
    {
        //読込が完了するとcontext.RootにモデルのGameObjectが入っています
        var root = context.Root;

        //モデルをワールド上に配置します
        root.transform.position = new Vector3(0, 0, 0);
        root.transform.Rotate(new Vector3(0, 180, 0));

        //メッシュを表示します
        context.ShowMeshes();
    }
}
```
上記スクリプトを作成し、シーンに「ImportButton」という名前の空のゲームオブジェクトを作成してアタッチします。
（PluginのSendMessageはこの名前をキーにしているので異なると動作しません）

###ボタンの準備
uGUIのボタンを用意して、Event Triggerコンポーネントをアタッチし、Pointer Downイベントに対してImportButton.OnButtonPointerDown()を割り当てます。

WebGL用にビルドして動作確認します。
うまく動かない場合は、プラウザの開発者モードのConsoleを見るとエラー内容を確認できます。

##サンプル
プロジェクト一式
https://github.com/torikasyu/UnityWebGLVRM

unityroomにアップしたもの
https://unityroom.com/games/torikasyu_vrmloader
Github PR レビュー で Resolve Conversations (解決しました機能) はどんどん使っていこう

# Outdated にならないパターンに対応

「レビュー解決はしたけど、該当コードの行に差分は生じなかった」場合に。

# 自分でも押せる

押して良いかはチーム運用による。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/4742541c-fc7c-41e1-2af0-9efee9e0a38d.png)


# 折りたたんで綺麗な状態に

すっきり。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/8d6e7eaf-1938-3472-e9eb-1fd71d855374.png)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
javascript  おみくじアプリ



```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>

     <div id= "btn" >?</div>


     <script src="app.js"></script>
  </body>
</html>

```


```javascript


  var btn = document.getElementById('btn');


  btn.addEventListener('click', function(){
     this.textContent = 'hits!';
  });

  #マウスがあっ立ってる時だけ

  btn.addEventListener('mousedown', function(){
     this.className = 'pushed';
  });
　#マウスが外れた時時だけ
  btn.addEventListener('mouseup', function(){
     this.className = '';
  });


```