OmniAICreator/Qiita-1.07M huggingface dataset:
Webアプリ開発初心者がRuby on Railsを使って約2週間でVTuber支援サイトを作ってみた

#はじめに
タイトルの通りですが、Webアプリ開発初心者がRuby on Rails(以下Rails)を使ってVTuber支援サイトを作ってみました。
URL：https://www.haishincolabokun.com/
#なぜVTuber支援サイトなのか
単純にVTuberが好きなので、VTuberの支援サイトを作りながらRailsを覚えたかっただけです。
#事前学習(Progate)
Railsの登竜門として、Ruby on Rails チュートリアルがありますが、
そのチュートリアルの中で、事前学習としてProgateを推奨していたのでまずは以下のコースを受講しました。

・Progate
　- HTML&CSS初級編～中級編
　- Ruby Ⅰ～Ruby Ⅴ
　- Git Ⅰ
　- Command Line 基礎編
　- 
※Progate：月額980円のオンラインプログラミング学習サービス
URL：https://prog-8.com/dashboard


#事前学習(Ruby on Rails チュートリアル)
Progateでの学習が終わったので、Railsチュートリアルで、
第1章～第10章、第13章を受講しました。

なぜ、11章～12章を飛ばしたかというと、
今回想定しているアプリは、ソーシャルログインを実装しようとしていたため、思い切って
ユーザー管理が主である11章～12章を飛ばしました。
あとは、__10章の終わりで挫折しかけた__のも理由です。
8章あたりから頭がパンクしていまい、10章まで流し読みするだけになってしまったので、
思い切って1章から始めることにしましたが、
そのおかげで結果的に全部理解することができました。

※チュートリアルと言いつつ自分の頭では結構難しく感じた。
#Webアプリ開発に挑戦
ProgateとRailsチュートリアルで学んだ知識を活かしていざWebアプリ開発！
と言いたいところですが、思った以上に頭に定着していなかったので、結局調べながら作りました。

ですが、以下の基本的な知識があれば簡単に作ることができます。

・アプリ構成
Railsではアプリ構成が予め決まっているため、どんな構成にするか悩む必要がありません。

・MVC
 モデル/ビュー/コントローラの頭文字を取ってMVC
　- モデル(データを扱う)
　- ビュー(ユーザに表示する部分)
　- コントローラ(ユーザーからのリクエスト処理、モデルとビューの連携)

・ルーティング
ユーザーからのリクエスト(http\://example.com/top等のアクセス)をルーティングによって、
適切なコントローラーに渡すことができる。
#苦戦したところ
一人のユーザが複数の部屋に参加できるという仕様だったので、データベースは多対多で作る必要がありました。
Railsではアソシエーションを使って簡単に多対多のテーブルを作ることができますが、ユーザが部屋に参加したり、退出するときの処理がうまくかけず、なんとなくで動いたもので実装してしまいました。
この部分については今でも理解していないので、しっかり学習していきたいと思っています。
#完全に失敗したところ
今回のアプリでは、テストを記述しませんでした。
理由としては
・とりあえず早く完成させたい。
・どうせ一人だからテストなんて必要ないだろう
・正直書くの面倒くさい・・・
などの理由がありましたが、今でも後悔しています。
開発が進むと自分でも思ってる以上に大規模なアプリになってしまい、自分だけでは管理しきれなくなっていました。
そんな状態で実装しても、簡単な実装でバグが発生したり、今まで動いてたところが動かなくなったりと、後戻りがかなり発生しました。
テストをしっかり書くことにより、バグが発生してもすぐに特定できたり、そのテストがドキュメントになったりと、開発規模が大きくなるほど
大事になってくるので、次に作るコンテンツやバージョンアップするときはしっかりテストを書こうと思いました。
※バグによる後戻りの解決よりも、テストを書くほうが絶対速い！

もう一つは、最初に機能を詰め込みすぎたところです。
レイヤーフレーム設計時に欲しい機能をどんどん詰め込んだまま実装を始めました。
その結果、今の技量では実装が難しいところが複数出てきて、
いくつかの機能を泣く泣く削除しました。
あとから調べると、最近のコンシューマー向けのWebアプリ開発では、最初に最小限の機能だけ実装してリリースし、
ユーザの意見を聞きながらアップデートする方式が多いとのことだったので、次回からそうしようと思っています。
#とりあえず作り終えて
思ったよりも簡単だったと思います。
でもRailsじゃなければもっと時間が掛かったと思います。
Railsでは高速開発のための機能がたくさんあるので、Webアプリ初心者にはピッタリなフレームワークだと思います。
初心者の自分としては、Railsの基本理念の一つである「設定より規約を重視」のおかげでアプリの構成を考える必要がないので、開発に時間を多めに割くことができました。

#今後やりたいこと
まずはテストを書けるようになること、
そしてデータベースの設計を覚えることです。
テストに関してはすでに書いていますが、データベースについても完全に素人だったため、今回のようなシンプルなテーブル構成ならなんとかなりますが、
規模が大きくなってくると破綻する未来しか見えません。
RailsではSQLを知らなくてもテーブル操作ができる「Active Record」というものがありますが、やはり基本的なSQL操作、テーブル設計思想は覚えたほうがいいと思いました。Amazonで人気の書籍があれば買ってみようと思います。

#最後に
Webアプリの開発言語として、Railsを最初に選んだことは本当に良かったと思います。
最近人気のあるGo言語や、Node.jsと迷いましたが、高速開発ができるという謳い文句だけでRails選んでよかったです。
※Rails以外だときっと2週間以上掛かってました

最初はなんとなくで始めたWebアプリ開発ですが、簡単に全世界へ公開できることは開発のモチベーションアップに繋がると思います。
アクセス数が伸びないからSEO対策しよう！デザインをもっと良くしよう！など作って終わりじゃない感じがとても楽しいです。

そのうち今回のアプリで設計したサイトマップや、ワイヤーフレーム、テーブル設計書を公開しようと思います。
今回の設計がいかに酷かったかを、将来笑いのネタにできるようにしたいです。

以上、ここまで読んでいただきありがとうございました。
やったことを大雑把に書いてしまいましたが、誰かのお役に立てればいいなと思います。
リーダブルコード要約

リーダブルコードを読んで、学びになった箇所についてメモ的にストックしていきます。（随時更新）

### モチベーション
- チーム開発における生産性の向上のために可読性高いコードを書くことの重要性を体感したため
- コーディングルールに一定の基準を持つことで迷いなくコーディングをしたいと思ったため

## 1章. 理解しやすいコード
- **読みやすさの基本定理**
   - **優れたコード**とは、**他の人が最短時間で理解できるコード**である。
   - また、この「他人が理解するまでにかかる時間」と「設計のし易さ」「テストのし易さ」などは、基本的に**競合しない**ため、コーディングにおいては最短時間で理解できるコードが正義である。

## 2章. 名前に情報を詰め込む
- **明確な単語を選ぶ**
   - ex. 同じ「入手する」でも、もしインターネットから取ってくるのであれば、`GetPage(url)`よりも`FetchPage(url)`の方が分かり易い。
- **汎用的な名前を避ける**
   - 一時保存の目的以外での、`tmp`, `foo`, `bar`といった空虚な名前での命名は怠慢である。サボらずエンティティの値や目的を表した名前を選ぶ。
- **変数名に情報を追加する**
   - 知らせるべき情報があれば「単語」を変数名に追加する。
      - ex1. 値の単位：`start`よりも`start_ms`の方が明確
      - ex2. データ型：`html`よりも`html_utf8`の方が明確 
- **名前の長さを決める**
   - 変数のスコープが小さいとき   
      - 変数名に情報を詰め込む必要はない（＝変数の型や目的をすぐに把握できる）ため、とにかく短くしていい。
   - 変数のスコープが広いとき
      - 変数名に十分に情報を詰め込むことで、意味を明確にする必要がある（＝変数の型や目的をすぐに把握できない）ため、短くしすぎてはならない。
- **固有の省略形は使用しない**
   - 「プロジェクト固有での関数名やクラス名の省略形」は、新しいチームメンバーを怖がらせ得るので、用いない。（＝`evaluation`→`eval`や`document`→`doc`といった「常識的な省略形」は可） 
- **無駄な単語は捨てる**
   - 必要最小限で伝えるべき。
      - × `ConvertToString()`
      - ○ `ToString()` 
- **フォーマットに情報を込める**
   - ある種のシンタックスハイライトのように、フォーマットで情報を込めることによって、一目で何なのかが伝わる。
      - ex1. クラス名→`CamelCase()`（キャメルケース）
      - ex2. 変数名→`lower_separated`（アンダーバー区切りの小文字）
      - ex3. クラスのメンバ変数→、`member_`（お尻にアンダースコア）

### 参考文献
- [リーダブルコード](https://www.amazon.co.jp/%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89-%E2%80%95%E3%82%88%E3%82%8A%E8%89%AF%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%81%AA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-Theory-practice-Boswell/dp/4873115655)
Macデビューしたのでとりあえず入れたもの備忘録

Macデビューした底辺SIerの備忘です。

#はじめに
先週ありがたいことに賞与を頂けたのでMacデビューしてみた。
いろいろ調べたんですけどメインマシンとしては無駄にスペック詰め込んだクソデカデスクトップがあるのでサブマシンとしてMacBook Airの2018年モデルを買いました。カスタマイズなしの吊るしです。そんな負荷かかることする予定もないので。

で、結構ガシガシ使っていきたいのでぶっ壊れた時に面倒なことを最低限にするためにやったことをまとめておく。もうすでに若干忘れてるので抜けがあれば気が向いた時に更新していきます。

#やったことたち
やったことのメモです。
##とりあえず変えた設定
だいたいググればでてきます。
たぶん割とみんなやってると思います。

1. はやく連打してもキー反応してくれるやつ
2. finderでパスが常に出てくるやつ
3. Dockが隠れるやつ
4. 隠しファイルが見えるやつ
5. ファンクションキー使えるやつ
6. カチってしなくてもトラックパッドでクリックできるようにするやつ
7. 勝手に変換しないやつ
8. 画面の隅にカーソル持っていくとなんか隠せるやつ（これいる？）

なんか他にも変えた気がするけど忘れました。

##とりあえずいれたやつ
Pythonの開発環境だけ準備してないんですけどとりあえずいれたやつです。
イケてる人がいれてそうなやつ適当にいれただけです。

1. Chrome
2. Slack
3. SourceTree
4. VisualStudioCode
5. Kindle
6. AmazonMusic
7. Homebrew

Officeとか結局あとで入れることになりそう。

##なんとなく買ったやつ
インナーケースのみ。とりあえずこれだけあればいいでしょ。ハブとか必要になったら買えばいいし。

#まとめ
Macとかおしゃれなだけでゴミやで〜みたいなことが昔はインターネットにたくさん書かれてた気がするんですけど普通にいいですこれ。なんとなく持っててテンションあがる。形から入るの地味に大事だと思うんですよね。

これ変えてないとかダサくね？とかこれ入れとけゴミとかあったらコメントで教えていただけると嬉しいです。とりあえずPythonの勉強とフロントの勉強をおしゃれなカフェでやってカタカタッ、ターン！ってやりたいです。

あ、壁紙はおしゃれなやつに変えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349816/3f436110-9604-914e-319c-a02491b01fb2.png)


おわり。
jQueryプラグイン Modaal でモダンなフルスクリーンモーダルを実装する

モーダルの実装でおすすめのプラグインを発見したので紹介します。
直感的な設定で簡単にモダンなモーダル実装ができます。:blush:

公式サイト
http://www.humaan.com/modaal/

## プレビュー
![ezgif-2-0839954934e9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93425/37d6689a-9f1d-4a56-86e8-53af3bac7b35.gif)

## 実装

https://github.com/kei2ro/modaal-practice
これから紹介するソースは上記のリポジトリにて公開していますので、手っ取り早く試したいかたは`git clone`してお試しください。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Modaal デモページ</title>

    <!--  jQuery読み込み-->
    <script src="libs/js/jquery.min.js"></script>

    <!--  Modaal jsファイル読み込み-->
    <script src="libs/js/modaal.js" type="text/javascript"></script>

    <!--  Modaal cssファイル読み込み-->
    <link rel="stylesheet" href="libs/css/modaal.css"/>

  </head>
  <body>
  <button class="modal-button" style="width:100px;height:60px;border:3px;">Show</button>

  <!--  モーダルで表示する部分-->
  <div id="modal" style="display:none;">
    Inline content goes here...
  </div>

  <script>
    $(".modal-button").modaal({
      content_source: '#modal',
      fullscreen: true,
    });
  </script>
  </body>
</html>
```
### 解説

* jQueryの読み込みが必要です。
* Modaalのjsファイルとcssファイルを読み込んでおきます。
    * https://github.com/humaan/Modaal
    * ↑今回の実装では、こちらのリポジトリの`source/css/modaal.css`, `source/js/modaal.js`を使用しました。
* モーダルを出したいボタンに、分かりやすいクラスをつけておきましょう。
    * 今回の例では、`modal-button`というクラスをつけました。
* モーダル表示したいコンテンツにID（今回は`modal`)をつけ、`display: none;`で非表示にしておきましょう。
* scriptタグ内にモーダルの処理を記述します。
    * content_sourceに、モーダルのID, 今回はfullscreen表示したいので、fullscreen: trueとします。

# まとめ
今回紹介したModaalですが、他にもたくさんオプションがありますので、興味のあるかたは色々とお試しください。

今回は取り上げていないのですが、
iPhoneの実機だと、モーダル内のコンテンツが多くてスクロールなどを要する場合、閉じるボタンがガタガタしてしまうことがありまして、実機で利用する際は注意が必要です。[公式](http://www.humaan.com/modaal/)のデモを実機で見てみてもわかると思います。
こちらは、暫定の対応として、スクロール中は閉じるボタンを非表示にすることなどで対応できます。

また、モーダルをスクロールする際に、後ろの要素が動いて嫌だという場合は、モーダルが表示されている間だけは背景のコンテンツをfixedなどにしてあげると良いです。

などなど、実運用で使うにはもう少しカスタマイズしたいことなどあるので、余裕があったらそのケースの記事も投稿してみたいと思います。

最後まで読んでいただきありがとうございました。
CSS Variable はただの変数ではない

CSS の最新の機能に、カスタムプロパティ（CSS Variables）があることは比較的有名になってきました。しかし、このメリットは未だに十分には理解されていません。

CSS Variables は、そのまま CSS での変数と説明されることがありますが、実はにはただの変数以上のメリットがあるのです。

## LESS, SASS 等との違い

CSS Variables は、LESS や SASS 等の言語に存在する変数機能が例えとして用いられることも多いように感じます。

しかし、この2つにはかなり大きな違いがあります。それが、**コンパイル時に決定されるか**です。

LESS や SASS 等では、当然のことながらコンパイル時に値が決定されている必要があります。そのため、外部で定義された変数を使用するためには、import したり、連結することで同じファイルにまとめたりして、コンパイル時に参照できるようにしていなければなりません。よって、例えば実行時に JavaScript から変数の値を変更したりできません。

ただし、CSS Variables が新しい機能であることから、いくつかのデメリットが生じてしまいます。

コンパイル時に決定できないということは、**ブラウザの対応が必要**であるということです。CSS Variables は多くの最新のブラウザではサポートされている一方、レガシーなブラウザでは動作しません。例えば、IE11 では動きません

https://caniuse.com/#feat=css-variables

また、コンパイル時に決定できないということは、LESS 等との相性が悪いということです。例えば、関数の引数として使用することはできません。あくまで `var(prop-name)` という形式のまま扱う必要があります。

ただし、これがメリットになるパターンも稀に存在します。例えば、カスタムプロパティの名前を less の変数から作成できることがときどき役に立ちます。

## カスケーディングすることの意味

CSS Variables では、定義したカスタムプロパティは CSS のプロパティと同じように振る舞います。すなわち、親から子にカスケーディングします。

この事によって、親要素でデフォルト値を定義しておき、小要素で必要に応じて値を上書きするといった使い方ができます。

CSS Variables をただの変数として認識しているとこの挙動では直感的ではないかもしれません。変数というよりは、カスタムプロパティであるということを意識すると、非常に便利な道具に変化します

## CSS のリアクティブ性

CSS はリアクティブなフレームワークに似ています。JavaScript からスタイルを変更すると、即座に必要な部分が再計算され見た目が変更されます。

これは、CSS Variables においても変わりません。変数の値を変更すると、即座に見た目に反映されます。

## 応用例

CSS Variables (と Vue.js) を用いて簡単なサンプルを作成しました。CSS Variables の使い方のイメージや、カスタムプロパティである意味など、理解の参考にしてください。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="zakuro" data-slug-hash="LKjyOy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="LKjyOy">
  <span>See the Pen <a href="https://codepen.io/zakuro/pen/LKjyOy/">
  LKjyOy</a> by z@kuro (<a href="https://codepen.io/zakuro">@zakuro</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

また、私が今作っている [Pianoforte UI Framework](https://github.com/team-pianoforte/ui) は、 全体を通して CSS Variables を使用することでデザインのカスタマイズを可能にしています。より実用的な利用例として参考になるかもしれません。

## さいごに

CSS Variables はただの変数ではない非常に便利な機能です。IE で動作しなかったりとまだまだ使いにくい側面はありますが、それでも使いたくなる非常に魅力的な機能だと思います

CSS にはまだまだ足りない機能が多いですが、一方で非常に強力になりつつあります。これからの CSS に期待します。

## 参考

- [CSS カスタムプロパティ (変数) の使用 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties)
Web Componentsを便利にするbenry関数


Web Componentsをちょっと便利にするbenry関数の紹介です。

Web Componentsといえば、カスタム要素のクラスを作ることが主な作業になりますが
その一連の定形作業を自動化するのが目的の関数です。

1. ShadowDOMの自動作成
2. HTMLの自動挿入
3. DOMの自動選択
4. イベントの自動登録


## benry関数の機能

### HTMLをShadowDOMに登録する

- ``this.html``にHTML文字列かDOM要素をセットしておくと、自動的にShadowDOMに登録します
- CSSも``this.html``内に記述します

### DOMの自動選択

- idを持つタグには``this.$id名``でアクセスできます
- shadowRootは``this.$shadow``、ホスト要素は``this.$host``に予約されてます



### イベントの自動登録

- クラスに``$id名_イベント名``という名前のメソッドがあると、イベントとして登録されます
- イベント内の``this``は、クラスの``this``と同じになります (通常はイベントを登録した要素)


## benry関数の使用例

benry関数は、クラスの``constructor()``か``connectedCallback()``で使用します。
引数は常に``this``を渡して下さい。

```js:使用例
class MyAppElement extends HTMLElement{

    connectedCallback(){
        benry(this) // benry関数の実行。shadowDOMが作成され、HTML・イベントが登録される
        this.$p.textContent += ' Good-By' // id付きタグに簡単アクセス
    }

    $p_click(event){ // 登録したいイベント
        alert(this.$p.textContent) // イベント内でもクラスのthis
    } // イベントの解除は → this.$p.removeEventListener('click', this.$p_click)

    get html(){ // 登録したいHTML・CSS
        return `
        <p id="p">Hello</p>
        <style>#p{color:red;}</style>
        `
    }
}

customElements.define('my-app', MyAppElement) // <my-app></my-app> タグが使えるようになる
```

- この使用例が覚えることの全てです。簡単
- 操作したいタグには、あらかじめidを付けておくのがコツです。


## benry関数のソースコード

ソースは関数が1つだけです。ご自由にお使いください

```js
function benry(self){ // https://qiita.com/economist/items/6c923c255f6b4b7bbf84
    self.$host   = self
    self.$shadow = self.attachShadow({mode:'open'})

    if(self.html instanceof Node){
        self.$shadow.append(self.html)
    }
    else{
        self.$shadow.innerHTML = self.html ?? ''
    }

    for(const el of self.$shadow.querySelectorAll('[id]')){
        self[`$${el.id}`] = el
    }

    const methods = Object.getOwnPropertyNames(self.constructor.prototype).filter(v => typeof self[v] === 'function')

    for(const method of methods){
        self[method] = self[method].bind(self)
        const match  = method.match(/^(\$.*?)_([^_]+)$/)
        if(match){
            self[match[1]]?.addEventListener(match[2], self[method])
        }
    }
}
```

### 課題
- addEventListener()の第三引数にどう対応するか？ clickOcneCapture みたいな形かな？
- id選択を動的に行うには？ https://qiita.com/_likr/items/5519be81af5343cb98e5
PythonのType HintでのNone, NoReturnの使い分け

# ざっくりいうと
基本的には、Noneを書いておく認識で大丈夫そう。
ただ、細かいところは調べる必要がある。

# None
Pythonの場合、returnを明示的に宣言しないとNoneが返ってくる仕様になっています。他の言語だと、returnを書かなくても大丈夫だったりするので、時々混同しがちです。

この場合は、returnを書いていないけど、結果としてNoneが返ってくるのでNoneを書いておきます。

```python:
def func() -> None:
    print(1)
```

# NoReturn
こちらは、文字通りNo Return(何も帰ってこない）時に使うイメージです。PEPでは例として、以下のような例が挙げられていました。
 
```python:
from typing import NoReturn

def stop() -> NoReturn:
    raise RuntimeError('no way')
```

この場合、return Noneを暗黙的に行う前に例外が上がるので、何も返答しません。なので、NoReturn

# 気になること / 要調査
* passを使った時はどうするのか
 
```python
def func():
    pass
```

* return だけの時はどうするのか

```python
def func():
    return 
```

# Reference
- https://www.python.org/dev/peps/pep-0484/#the-noreturn-type
- https://stackoverflow.com/questions/48038149/noreturn-vs-none-in-void-functions-type-annotations-in-python-3-6
【Swift】Grand Central Dispatch (GCD)で処理の途中で手軽にキャンセル処理

基本的にはGCDは処理が動いてる途中でCancelできない。
NSOperationを使うのが良いとされている。

しかし、単純な処理についてはGCDを使うのがお手軽なのでキャンセルする方法を考えてみた。

以下、テスト用のプログラムです。

```swift:GCDTest.swift
import Foundation

class GCDTest {
    var isCanceled = false
    let grobalQueue = DispatchQueue.global(qos: .userInitiated)
    init() {
        grobalQueue.async {
            var i = 0;
            while(true) {
                if (self.isCanceled) { // 処理の要所に入れる
                    break;
                }
                Thread.sleep(forTimeInterval: 1.0)
                i += 1
                print("\(i)")
            }
            print("Finish GCD")
        }
    }
}
```
では、上を動かしてみましょう。

```swift

    func testGCD() {
        let gcd = GCDTest()
        Thread.sleep(forTimeInterval: 5.0)
        gcd.isCanceled = true
        Thread.sleep(forTimeInterval: 5.0)
        print("Finish test")
    }
```

結果は以下となります。

```
1
2
3
4
5
Finish GCD
Finish test
```

isCanceledをtrueにするとGCDが止まりましたね。

参考：
NSBlockOperationで手軽にキャンセル処理：
https://qiita.com/ninjinkun/items/0fe8548f1debd783a04a

【Swift】Grand Central Dispatch (GCD)とOperationQueue まとめ
https://qiita.com/shiz/items/693241f41344a9df6d6f
【IBM Watson Studio】ログイン後「New Service」しか操作できない場合のトラブルシューティング

皆さん、こんにちは。戸倉彩です。

今回は、自分の備忘メモも兼ねて**「IBM Watson Studio」** サイトにログインした際に、Welcomeページや各種メニューが表示されない場合のトラブルシューティングについて書き留めておこうと思います。

## 操作手順
1. **[IBM Watson Studio](https://dataplatform.cloud.ibm.com/)** サイトへアクセスし、ログインする。  
2. IBM Watson Studioサイトが表示されるけれども、Welcomeページではない、または **「Create a Project」** や **「Search a Catalog」** ボタンなどが見つからず、新規には「New Service」ボタンからサービス作成する以外の操作が選べない。  
<img src="https://fv7bsa.by.files.1drv.com/y4mrJB1IWqhPQDhlj6aCpkqhtv1eVo3DsxLJp2jx4d-pO91bIju8_ANG5Zc96KImOHQFGuboadb6lw0wq7LM1yf5so9KmB5-w38COyV5YMfsO1MKmhjjpvVLN6AOdiI69xNJiOTnJ_p61X-z8nF_lOukjjy670TXbQo9PnAwdQ7q4UxmWGFb5Zr0AGpOohaSeXl5ujd3DBDLzSR92LnNtqWVA?width=741&height=480&cropmode=none" width="600">

## トラブルシューティング
結論からお伝えすると正常にログインし直す必要があります。

対象法1. ブラウザのプライベートウィンドウからIBM Watson Studioサイトへアクセスしてみる。
対処法2. 異なるブラウザを利用してみる。

## IBM Watson Studio Welcomeページ
<img src="https://fv7asa.by.files.1drv.com/y4mWqyhwV88NAwG6Ap-YU43TdtnQOy6jei7cQt78IYTfyjdeBKPnszZRheNd5mKbaWk_woe8JDcjl9xlO59x3kcHU_K0vBoWFi0jpEe5fEU1q5Dc8Jn5Rn9zY6idGxSAqDcjM1phYJSk5xgJ9Kh5qmwArVgmoot9L0nRi0hdZzXPaGv7iy-jqP3orfc0NZ7xJIRYvKvOIbSMop-aI-9SFEEww?width=579&height=394&cropmode=none" width="600">

Have a nice Geek Life♪

※Twitterで最新情報配信中 [@ayatokura](https://twitter.com/ayatokura)
Spring、TERASOLUNA でマッピングされているURLの一覧を確認したい。

Spring や TERASOLUNA で Controllerクラス に @RequestMapping を設定してみたものの、いざURLにアクセスすると404エラー・・・
Controllerクラス に設定したURLをSpringが認識しているのかどうか確認したいが、簡単には確認する方法はなさそうでした。
なので、方法を考えました。

SpringでリクエストURLにマッピングされているControllerを選定しているのは`HandlerMapping`で、`HandlerMapping`として利用されているのが`RequestMappingHandlerMapping`ということなのでこれを利用してマッピングしているリクエストURLを取得してみよう。  

で、こうなりました。

```
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.method.HandlerMethod;
import org.springframework.web.servlet.mvc.method.RequestMappingInfo;
import org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping;

@Controller
public class HelloController {
    private final RequestMappingHandlerMapping handlerMapping;
    
    public HelloController(RequestMappingHandlerMapping handlerMapping) {
        this.handlerMapping = handlerMapping;
        System.out.println("======= url mapping");
        Map<RequestMappingInfo, HandlerMethod> handlerMethodMap = this.handlerMapping.getHandlerMethods();
        for( Map.Entry<RequestMappingInfo, HandlerMethod> mapItem : handlerMethodMap.entrySet() ) {
            RequestMappingInfo key = mapItem.getKey();
            HandlerMethod value = mapItem.getValue();
            
            System.out.println("======= " + key.getPatternsCondition() + " :: " + value);
        }
    }
}
```

Springが読込むとこ（component-scan の指定箇所）に置くとサーバ起動時に リクエストURL とそれに紐付いているクラス、メソッドが出力されます。
表示されない場合は、component-scan の設定が間違っているか、サンプルが間違っているか・・・
最強の“GIT LOG”　限界までコミット表示させよう

# はじめに

`git log`とやってもHEADまでのチェーンしか表示されない。
しかし、実は隠されたコミットハッシュを`git log`に渡すことで他のチェーンも表示させることができる。
Gitにはいわゆる「隠れログ」が存在するのだ。

- 可能な限りたくさんのコミットハッシュをグラフ表示[^log_graph]させたい。
- Gitの「隠れログ」を発掘したい。

そのようなニーズに基づいて最強のGIT LOGを作る企画が密かに動いていた。


# どのような企画？

`git log`にコミットハッシュを渡すと隠されたログを表示することがある。
そのようなコミットハッシュを見つけてはalias log3を更新していた。

少し前まで`git log --all`や`git reflog`や`git fsck --unreachable`や`git rev-list --all`を使ったalias log3が最強のGIT LOGだった。

しかし、このたび新たなコミットハッシュが見つかり更新した。
現時点で最強のGIT LOGということだ。


# 最強のGIT LOG[^license]

```bash
alias log3='git fsck --verbose 2>&1 | perl -nle '\''foreach(split /\s|->/){$commit{$_}=1 if length==40 && $_ ne "0000000000000000000000000000000000000000" && ! /dangling$/};END{print join " ",keys %commit}'\'' | xargs git log2'
```

git log2は色付きワンラインでlog --graphを表示させるgit configのalias。
xargs git logに色付きのコミットハッシュを渡すと動かないので要注意。


# どのような動作をするか？

`git fsck --verbose`とやると隠されたコミットハッシュをたくさん表示する。
空白で区切るなどして40文字のコミットハッシュを限界まで抽出しgit log2に渡す。
こうすることでGitに隠されたコミットハッシュを発掘できる。


# どこがいいか？

Gitは基本的にすべての変更をログに残している。
初心者が「変更が消えてしまった」とパニックになったとき実は変更が残っていたことがよくある。

たとえばファイルを編集して`git add`したあとで`git checkout -f`すると変更が消えてしまっている。
Gitは基本的にすべての変更をログを残しているので戻せるに違いない。
変更が残っているか最強のGIT LOGで調べられる。

```bash
$ log3
* c3a8ddc [2019-06-26] (HEAD -> master) 変更２ @Query Kuma
* 288f431 [2019-06-26] 変更１ @Query Kuma
* 4ea8d30 [2019-06-26] 初期化 @Query Kuma
```

しかし、調べてもどこにもコミットハッシュが出てこない。
残念ながらGitに変更ログが残らない稀有な例のようだ。

Gitに変更を残すには`git commit`しなければならないことがわかる。
10分おきに`git commit`すると安心だ。

次はファイルを編集したあとで`git stash`して`git stash clear`した場合はどうだろうか。
ファイルの変更が消えてしまっている。
`git stash list`とやっても表示されずパニックになる。
でも最強のGIT LOGで調べれば安心だ。

```bash
$ log3
*   4364184 [2019-06-25] WIP on master: 7cc979e 変更２ @Query Kuma
|\
| * a6c6819 [2019-06-25] index on master: 7cc979e 変更２ @Query Kuma
|/
* 7cc979e [2019-06-25] (HEAD -> master) 変更２ @Query Kuma
* b9f63a5 [2019-06-25] 変更１ @Query Kuma
* f68b150 [2019-06-25] 初期化 @Query Kuma
```

stashのコミットハッシュ4364184からファイルの変更を取り戻せる。

最強のGIT LOGで見る限りstashは通常のコミットと変わらないようだ。
HEADからstashのコミットハッシュまで線でつながっている。

つまり`git commit`していればよく、`git stash`を使おうと思ったことがない。
stashの使い方を忘れた頃に`git stash clear`とやってパニックになる。
初心者が誤りやすいstashを削除してcommitに統一して欲しいものだ。

[^log_graph]: `git log --graph`でグラフのテキスト表示。
[^license]: MITライセンス（Attributionのみ）
JavaのCalendarクラスを使った月末日の取得で少し詰まったこと

#やりたかったこと
JavaのCalendarクラスを使って月末日を取得する際2月31日を入力されたら28日に自動変換するプログラムを組んだ。が、2月を指定しているのに31日が出力されていました。

```java
Calendar cal = Calendar.getInstance();
cal.clear();
cal.set(Calendar.YEAR,2019);
cal.set(Calendar.MONTH,2);

cal.getActualMaximum(Calendar.DATE);//結果は31
```
##原因
原因はCalendarクラスは0を1月として扱う為2を指定した場合3月として扱われていたのが原因でした。

```java
Calendar cal = Calendar.getInstance();
cal.clear();
cal.set(Calendar.YEAR,2019);
cal.set(Calendar.MONTH,1);//2月

cal.getActualMaximum(Calendar.DATE)//結果は28
```
なぜ1を1月として扱わないのでしょう…同じ目に合ってる方の為にメモしておきました
IoTを活用して、ただいまと言ったらおかえりが返ってくる仕組みを作る

#はじめに

一人暮らしをしている人でもIoTを用いて
「ただいま」と言えば、「おかえり」が返ってくる仕組みが作れます。
今回はAmazon echoを活用しました。
ノンコーティングで誰でも簡単に導入できます。

##準備するもの
Amazon echo
IFTTT
LINE Notify API

##フロー図
Alexaに話しかけると、IFTTTとLINE Notify APIを通じてLINEメッセージが届く。
![スクリーンショット 2019-06-25 22.53.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248994/99bd2c1c-01c3-bfe1-0948-3ff21f985ca8.png)

#実演
「アレクサ、ただいま　トリガー」と発言するとLINEメッセージで「おかえり」が返ってきます。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【Alexa】「ただいま」と言ったら、「おかえり」が返ってくる仕組みを作る <a href="https://t.co/L2YS3lf59h">https://t.co/L2YS3lf59h</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; S (@sksk_go) <a href="https://twitter.com/sksk_go/status/1143539822486642688?ref_src=twsrc%5Etfw">2019年6月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#設定方法
事前準備として、IFTTTとLINE Notify APIをつなげておきます。
<a href="https://notify-bot.line.me/ja/">LINE Notify API</a>

IFTTTはこちら ※IFTTTの登録方法などは省きます。
<a href="https://ifttt.com/discover">IFTTT</a>


①まずはIFTTTで「New Applet」を開き、「this」を選択する
![スクリーンショット 2019-06-25 23.56.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248994/4a845a8d-75bd-ff76-7b4f-bd6e591cc105.png)

②次にChoose a serviceから「Amazon Alexa」を見つけて選択する
![スクリーンショット 2019-06-25 23.58.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248994/1d37e355-a08f-07be-b0f7-39238c143c73.png)

③Choose triggerから「Say a specific phrase」を選択する
![スクリーンショット 2019-06-25 23.59.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248994/ea05be8d-06d4-5179-9c91-6d99f15ebdb9.png)

④トリガーにしたいフレーズを入力し、「Create trigger」を選択する
![スクリーンショット 2019-06-26 0.00.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248994/e3288eb8-ee38-ac26-301d-d5a050c07dad.png)

⑤次に「that」を選択する
![スクリーンショット 2019-06-26 0.02.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248994/5908aba3-ff41-b7fc-e750-ae024f0d61e9.png)

⑥Choose action serviceで「LINE」を選択する
![スクリーンショット 2019-06-26 0.03.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248994/ca3cf5f3-fa2a-517f-79c0-b60fba88b7ca.png)

⑦Choose actionで「Send message」を選択する
![スクリーンショット 2019-06-26 0.04.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248994/07885b0b-dbc5-383c-f02a-ebd7983da553.png)

⑧Complete action fieldsでRecipientを「1：1でLINE Notifyから通知を受け取る」を選択し、
　Messageに送ってほしいメッセージを入れる。今回は「おかえり」。
　これでCreate actionを選択すれば完成。
![スクリーンショット 2019-06-26 0.10.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248994/ebd74565-87bc-9bc6-e17e-e49636538f30.png)

以上です。簡単！

#まとめ
今回は「ただいま」「おかえり」のやり取りをする仕組みを使ったが、
日本語を変えるだけでいろいろ表現できると思う。

ご家庭がある方は会社から帰る時に、今から帰りまーすみたいな使い方もできそう。

これは簡易的なAlexaスキルみたいなイメージ。
本格的なものを作りたいなら、スキル開発になるかと。
【Atcoder】035D/Dijkstra法

こんばんは:relaxed:
今日はグラフ問題で、ある地点からある地点への最短距離を求めるダイクストラ法についてです。
問題は[こちら](https://abc035.contest.atcoder.jp/tasks/abc035_d)
ダイクストラ法とは最小距離が確定した頂点と隣接している頂点を更新（すでに最短距離が確定した頂点は更新しない）と言うもの。

蟻本p96のように実装したら無事メモリエラー&ランタイムエラーになりました、**ヒープキューを使わないとダメですね。。。**

またこの問題は行きと帰りで辺の間のコストが異なるので、二種類のedgeが必要です。

##解法
```python
from heapq import *

def dijkstra(start,node,edge):
    #始点sから各頂点への最短距離
    #node:頂点数
    #d:各頂点へのコスト(存在しないときはinf)
    #q:キュー(スタートからのコスト,頂点)
    d = [float("inf")] * node
    d[start] = 0
    #スタートをキューに入れる
    q = [(0,start)]
    
    while(len(q) != 0):
    #キューの先頭を取得
      ci,i = heappop(q)
      if(d[i] < ci):
        continue
    #キューの先頭から繋がっている頂点を探索
      for cj,j in edge[i]:
        if(d[j] > d[i] + cj):
          d[j] = d[i] + cj
          heappush(q,(d[j], j))
    return d
#入力
N,M,T = (int(x) for x in input().split())
A = list(map(int, input().split()))
#二種類のエッジ
E1 = [[] for _ in [0]*N]
E2 = [[] for _ in [0]*N]

for i in range(M):
  a,b,c = (int(x) for x in input().split())
  E1[a-1].append((c,b-1))
  E2[b-1].append((c,a-1))

go = dijkstra(0, N, E1)
back = dijkstra(0, N, E2)
ans = 0
for v in range(N):
    rem = T - (go[v] + back[v])
    ans = max(ans, rem*A[v])
print(int(ans))
```

ヒープキューのイメージは使ったものは捨てていく！って言うイメージなんですかね。。。
違うかも。。。:frowning2:
【swift】 ラベルをタップして内容をクリップボードにコピー

### 前置き
[昨日のエントリ](https://qiita.com/ydzum1123/items/be068056436da090b320)の続きで、ジオコーディング（住所→緯度・経度変換）のソースコードを確認するためのアプリを作ったんですが、変換結果の緯度・経度が意図した座標を指しているか確認するための第一段階として、タイトル通り「ラベルをタップして内容をクリップボードにコピー」して、GoogleMapなり、ブラウザなりにペーストできるようにしました。

### 開発環境
端末:MacBook Pro/MacOS 10.14.5(Mojave)
Xcode:10.2.1
Swift:5


### 画面イメージ
|"PUSH ME!!"を押してジオコーディング|
|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126315/fe6ddfcc-b7ce-d23b-763f-b45bac4ad22b.jpeg" width="250">|

|タップ→ペーストで緯度・経度コピーを確認|
|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126315/f2d6adcb-2c11-90a9-6db4-baaba643b572.jpeg" width="250">|

|GoogleMapでみるとスカイツリーを指している|
|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126315/f1bbdf93-2d8a-e1e2-2a53-780065ba2f89.jpeg" width="250">|

### ソースイメージ

少し画面イメージとギャップがありますが、
「緯度」の値をタップしてクリップボードにコピーする処理を抽出すると
下記のようになりました。

```swift:ViewController.swift
class ViewController: UIViewController {
    // 緯度の部分をタップすると緯度経度を取得する
    @IBOutlet weak var lblLat: UILabel!
    let myTGLat = UITapGestureRecognizer()

    override func viewDidLoad() {
        super.viewDidLoad()

        // タップを検知できるようにして、
        // その際に行う動作を定義する
        lblLat.isUserInteractionEnabled = true
        myTGLat.addTarget(self, action: #selector(tapLblLat(_:)))
        lblLat.addGestureRecognizer(myTGLat)

        // 以下、何かしらの処理をして、
        // 緯度に表示させたい値を取得、セット
    }

    // 緯度を表示するラベルをタップした際に呼ばれる処理
    @objc func tapLblLat(_ sender:UITapGestureRecognizer) {
        // lblLatに表示された値をクリップボードにコピー
        UIPasteboard.general.string = lblLat.text!
        
        // ※UIPasteboard.general.setValue では、
        // iOS11では動かないらしい。
    }
}
```

<font color="Lightgray">早めにアウトプットしたいので、一部抽出したロジックになりましたが、実際組んだモノのロジックがもう少し整理できたらちゃんと書き直したいと思います。</font>

### ハマったポイントなど
今回はサンプルが充実していたコトもあって、ハマったトコはありませんでした。
しいて言えば、何度ラベル部分をタップしてもデバッグ用に入れていたログ出力処理が動かず、結果`XXX.isUserInteractionEnabled = true`を入れ忘れていたのが原因だった、くらいです。

### これから
ジオコーディング結果を別画面で表示した地図上にピンを立てるところまでは発展させたいなぁ、と。
あと、ジオコーディングのところをQiitaのエントリとしてアウトプットできていないので、その部分はまた改めて。（info.plistの設定やら、注意点が多いから忘れないようにしたい。）
【Unity】OVRGrabbableのSnapOffsetの作り方

## 結論
- [ドラッグ&ドロップだけで作る方法](#snapoffsetの作り方) がある
- [エディタ拡張](#を自動でやってくれるエディタ拡張)も使えばさらに早く簡単にできる


## この記事の内容で解決できること
- OVRGrabberでOVRGrabbable.snapOffsetを設定したオブジェクトを掴むと  
オフセットがおかしいことになる（手から大きく離れる 等）
- snapOffsetを作るためのパラメータ調整がめんどくさい。何かいい方法ないの？

## OVRGrabbable.snapOffsetの抱える問題について
- __snapOffsetは掴みたい物の子オブジェクトを指定してもダメ__
  - snapOffsetにアタッチするのは「掴んだときの手の位置」ではなく  
    「掴んだときのオフセット値を保持したGameObject」でないといけない。

  - しかもオフセット計算はWorldSpaceの位置と回転を使っているので、  
    どのオブジェクトの子にも入れておけない。（Oculusの使用例はPrefab化している）

- __上記を理解した上でオフセット値を作成するのが非常に大変__  
  - 数値を調整しながら掴んで離してを繰り返す？そんなのやってらんないよ～


## 解決策

1. __snapOffsetを使わない__
[RaspberlyさんのBlog](https://raspberly.hateblo.jp/entry/OculusQuestSnapOffset)でおススメされている方法
OVRGrabbableの子にモデルなどを入れて、それら子の位置を調整する

2. __OVRGrabberを書き換える__
OVRGrabber側のオフセット計算の部分をちょっと書き換えて、
snapOffsetを「掴んだときの手の位置」として使えるようにする（[参考記事](https://forum.unity.com/threads/vr-oculus-sdk-touch-controller-snap-position-snap-offset-grab-a-gun.512853/)）

3. __普通に作る__
実は数値をいじらなくてもドラッグ&ドロップで作れる

4. __snapOffsetを作る機能を作る__
オフセット値を計算するクラスとエディタ拡張を使ってチャチャっと作成する

本記事では３と４について解説します。





## snapOffsetの作り方
1. OVRGrabbableのついたオブジェクト（Bat）に空のオブジェクトを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232140/83942351-ee7a-40eb-cb94-092a006d31c2.png)

2. OVRGrabberのついたオブジェクト（RightHandAnchor）の位置を掴んだときの位置に合わせる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232140/ecabab61-1b5a-c225-dbaa-2e4e5f35bedc.png)

3. 1.で作った空のオブジェクトをOVRGrabbableからOVRGrabberに移す
（BatからRightHandAnchorに移動）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232140/1f361089-b519-e30f-9185-20d4b67302c9.png)

4. 3.の空のオブジェクトをPrefabにして完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232140/e0d58fe2-a8d8-6641-87ff-9390fa7d995e.png)

5. 作成したPrefabをOVRGrabbableのsnapOffsetにアタッチして完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232140/625a6d64-a9b3-0c11-83d1-8da038d281eb.png)

- こんな感じになります  
![afede608223b1420f798be7bfeae3366.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232140/a5b6af41-ca01-2b2d-55fb-cba24bebb134.gif)

## を自動でやってくれるエディタ拡張

<INS><a href="https://github.com/udonba/SnapOffsetHelper">SnapOffsetHelper</a></INS>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232140/7a78eed1-8d8d-5d66-b2cf-6ee9ba8f0b86.png)
手と物の位置合わせ以外は全部やってくれます。使い方はリンク先に画像付きで書いてあるので本記事では省略

## 動作環境
以下で動作を確認しました

- Unity2018.4.0f1
- Oculus Utilities v1.38.0, OVRPlugin v1.38.0, SDK v1.38.0
- Windows 10
- Oculus Rift


## 参考記事
- [【Oculus Quest開発メモ】物を掴むとき位置と角度を固定する Snap Offset編【Unity】](https://raspberly.hateblo.jp/entry/OculusQuestSnapOffset)
- [VR - Oculus SDK - Touch controller - Snap Position , snap offset - grab a gun](https://forum.unity.com/threads/vr-oculus-sdk-touch-controller-snap-position-snap-offset-grab-a-gun.512853/)
Azure DevOps にユーザーを追加するアプリをノンコーディングで作成する （３）

# Azure DevOps にユーザーを追加するアプリをノンコーディングで作成する （３）

## はじめに

[前回の記事](https://qiita.com/tafuji/private/bfed72fc844790a4a8e3)では、ユーザーインタフェース部分（PowerApps）の部分について書きました。今回は、バックエンドに相当する Microsoft Flow 部分について書きます。

## PowerApps から起動される Flow

### PowerApps からパラメータを受け取るには

[ここ](https://blog.onpu-tamago.net/entry/2018/08/08/000949)を参考にしました。

![Ask](https://gist.githubusercontent.com/tafuji/2f200e899a6be0e223cbca0595451bbb/raw/4d26c2d42df4fb2a1d8c913317460625495c65c6/01-AskPowerApps.png)

「PowerAppsで確認」を選ぶと、名前付きのパラメータが作成されます。
PowerApps 側からは、以下のような ```Run``` 関数で Flow を呼び出しているわけですが、「PowerApps で確認」を選択して作成したパラメータの作成順序が、```Run``` 関数の引数の順番と一致するようです。

```script
[作成したFlowの名前].Run(param1, param2, ....);
```

### Azure DevOps REST API を呼び出す

Microsoft Flow には HTTP リクエストを送るアクションが提供されているので、これを利用します。[Users - Create](https://docs.microsoft.com/en-us/rest/api/azure/devops/graph/users/create?view=azure-devops-rest-5.0) をこのアクションから呼び出します。

![HTTP](https://gist.githubusercontent.com/tafuji/2f200e899a6be0e223cbca0595451bbb/raw/4d26c2d42df4fb2a1d8c913317460625495c65c6/02-CallRestApi.png)

|項目|説明|
|---|---|
|URI|```https://vssps.dev.azure.com/{organization}/_apis/graph/users``` の形式で、組織の部分に自分が利用している組織を入れるだけでよい|
|Queries|groupDescriptors は、Azure DevOps のグループを識別するため文字列。 REST API の[Groups](https://docs.microsoft.com/en-us/rest/api/azure/devops/graph/groups?view=azure-devops-rest-5.0) を利用して、値を確認することができます。|
|Body|リクエスト本体で、```{ "principalName": "fabrikamfiber4@hotmail.com" }``` のようにMicrosoft アカウントを指定する|
|Authentication|ベーシック認証で、パスワードに Personal Access Token を指定する。Username は任意の文字列でよい|

## まとめ

PowerApps でのユーザーインタフェースの作成に戸惑うところがありましたが、簡単にアプリを作成することができました。サーバーを立てる必要もなく、モバイルデバイスへの配布も PowerApps のアプリ経由で行えるので、組織内の簡単なアプリを素早く作成する一つの方法として利用していくのもよいと思いました。
SwiftUIでURL通信を伴うアプリを実装してみる

# Introduction
WWDCで大きな発表がありましたね、そうSwiftUI。
ただSwiftUIでAPIを使ったアプリはどう実装するんだと思い、
デモアプリを作ってみました。

# Coding

- 実装したこと
 - ContentViewにNetworkManagerをStateとしてプロパティにもつ
 - NetworkManagerのinitでリクエストを行う
 - レスポンスをNetworkManagerのプロパティにupdateする
 - updateされた時にViewへの通知を行う

※APIとModelに関してはお持ちのAPIで書き換えお願いします。

**ContentView**

```
struct ContentView : View {
    @State var networkManager = NetworkManager()
    
    var body: some View {
        NavigationView {
            List (
                networkManager.models.identified(by: \.name)
            ) {
                Text($0.name)
            }
            .navigationBarTitle(Text("Model"))
        }
    }
}
```

**NetworkManager**

```
class NetworkManager: BindableObject {
    var didChange = PassthroughSubject<NetworkManager, Never>()
    
    var models: [Model] = [] {
        didSet {
            didChange.send(self)
        }
    }
    
    init() {
        guard let url = URL(string: "https://xxx.json") else { return }
        
        URLSession.shared.dataTask(with: url) { (data, _, _) in
            guard let data = data else { return }
            let models = try! JSONDecoder().decode([Model.self], from: data)
            DispatchQueue.main.async {
                self.models = models
            }
        }.resume()
    }
}
```

**Model**

```
struct Model: Decodable {
    let name: String
}
```

# Figure

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121184/617d6a69-6633-ae8b-79c7-a4a6b81b5ede.png)

# Impression

SwiftUIでAPIからのView生成まで作ることができました。
既存のフレームワークより大分簡潔にコード量も少なく書くことができます。
まだまだ出来ることが未知なフレームワークですが、今後が楽しみです！

# Reference

[https://developer\.apple\.com/videos/play/wwdc2019/204/](https://developer.apple.com/videos/play/wwdc2019/204/)
[SwiftUI Fetching JSON and Image Data with BindableObject \- YouTube](https://www.youtube.com/watch?v=xT4wGOc2jd4)
Azure DevOps にユーザーを追加するアプリをノンコーディングで作成する （２）

# Azure DevOps にユーザーを追加するアプリをノンコーディングで作成する （２）

## はじめに

[前回の記事](https://qiita.com/tafuji/private/d15b64127d18560804d7)では、Azure DevOps の REST API の部分まで記載したので、今回はユーザーインタフェース部分（PowerApps）の部分について記載します。

## PowerApps で作ったユーザ登録画面

シンプルなユーザー登録画面を作りました。今回、PowerApps を利用するのが全くの初めて、かつチュートリアルもなにもやらずにいきなり作成したので、わからない事だらけでした。

![UserRegistlation](https://gist.githubusercontent.com/tafuji/15976fe76e0371b9ba223b59debcd62b/raw/cd3c1512b3fd5711794e96a33a2bc3efdb0b2d1f/01-UserRegistlation.png)

### ラジオボタンの値

Excel などのデータソースから取得するサンプルは良く見つかるのですが、今回は固定値で指定しました（固定値のサンプルがなかなか見つからなかった…）```["value1", "value2"]``` のような形式で書けばよかった

![radio](https://gist.githubusercontent.com/tafuji/15976fe76e0371b9ba223b59debcd62b/raw/cd3c1512b3fd5711794e96a33a2bc3efdb0b2d1f/02-RadioValue.png)

### ボタンを押した後に Flow を起動する

ボタンを選択した状態で、Action メニューから、```Flows``` を選択、Flow を作成することができます。

![flow](https://gist.githubusercontent.com/tafuji/15976fe76e0371b9ba223b59debcd62b/raw/cd3c1512b3fd5711794e96a33a2bc3efdb0b2d1f/03-TriggerFlow.png)

作成が終わると、その Flow と PowerApps のボタンのイベントの関連付けを行うことができます。

![Associate](https://gist.githubusercontent.com/tafuji/15976fe76e0371b9ba223b59debcd62b/raw/cd3c1512b3fd5711794e96a33a2bc3efdb0b2d1f/04-AssociateFlow.png)

関連付けが終わると、Flow の Run 関数に必要なパラメータを渡して、Flow を呼び出すことができるようになります。

```text
[作成したFlowの名前].Run(param1, param2, ....);
```

![Run](https://gist.githubusercontent.com/tafuji/15976fe76e0371b9ba223b59debcd62b/raw/cd3c1512b3fd5711794e96a33a2bc3efdb0b2d1f/05-RunFlow.png)

今回作成した Flow の詳細は、次の記事に記載する予定です。
2進数・16進数の計算

基本情報を勉強しているときに、2進数、16進数の計算をしなければいけなくなり、今回記事にします。


### 10進数
10進数は普段使っているのでわかりやすいですが、実際に式にすると以下のようになります。

例
1571という数字を分解した場合

1×1000 + 5×100 + 7×10 + 1×1

これを累乗で表すと以下になります。

```
１×１0^3 + 5×10^2 + 7×10^1 + 1×10^0
```

この考え方を2進数でも16進数でも利用します。

※ ^n は、指数を表しております
　
　
### 2進数
2進数は 0 と 1 だけで値を表現する記法で、PCは2進数で構成されています。
例えば 2 と表現したい場合は、 10 となります。
これは2で次の位に上がるということです。

例
2進数

```
0 , 1 , 10 , 11 , 100 , 101
```

これを10進数にすると下記になります。

```
0 , 1 , 2 , 3 , 4 , 5
```
　
##### 2進数を10進数に計算する方法
実際に2進数を10進数に変換する計算方法は下記のようになります。

1101を変換したいと思います。

まず 10進数のときと同様に、1の位を0乗　、　10の位を１乗　、　100の位を２乗 、 1000の位を３乗とします。


次に、2と掛け合わせて、それぞれ足し合わせていくと10進数になります。

```
1×2^3 + 1×2^2 + 0×２^1 + 1×2^0
```
となり

```
8 + 4 + 0 + 1 = 13
```

となります。
よって、2進数の1101は、10進数では13となります。

 
#### 10進数を2進数に変換
先ほどの例で変換を行います。

2進数に変換するのは、いたって簡単
10進数を2で割って、その商を2で割ってを商が0になるまで繰り返し、最後の余りから順にくっつけるだけです。

```
13÷２=6...1
6÷２=3...0
3÷２=1...1
1÷2=0...1
```
最後の余りから順に余りを並べると
1101 となる
 

　
　
### 16進数
16進数は、0~9とA~Fで構成されています。

```
0,1,2,3,4,5,6,7,8,9,A(10),B(11),C(12),D(13),E(14),F(15)
```

##### 16進数を10進数に計算する方法
実際に16進数を１０進数に変換する計算方法は下記のようになります。

2F3Bを変換したいと思います。

まず 10進数のときと同様に、1の位を0乗　、　10の位を1乗　、　100の位を2乗 、 1000の位を3乗とします。

次に、16と掛け合わせて、それぞれ足し合わせていくと10進数になります。

```
2×16^3 + F(15)×16^2 + 3×16^1 + B(11)×16^0
```
となり

```
8192 + 3840 + 48 + 11 = 12091
```

となります。
よって、16進数の2F3Bは、10進数では12091となります。

 

#### 10進数を16進数に変換
先ほどの例で変換を行います。

2進数のときと同じく、
10進数を16で割って、その商を16で割ってを商が0になるまで繰り返し、最後の余りから順にくっつけるだけです。

```
12091÷16=755...11
755÷16=47...3
47÷16=2...15
2÷16=0...2
```
最後の余りから順に余りを並べると
2F(15)3B(11) となる
Azure DevOps にユーザーを追加するアプリをノンコーディングで作成する （１）

# Azure DevOps にユーザーを追加するアプリをノンコーディングで作成する （１）

## はじめに

社内で Azure DevOps を使った、Xamarin アプリのビルド定義をいじったりしている関係もあって、新入社員が入社した時などに Azure DevOps にユーザーの追加を依頼されることがある。
人数や頻度も少ないので、今までは手作業でやっていたけども、だんだん面倒になってきたので、簡単なアプリを作成して、配布してメンターなどにやってもらうと考えた。

## どうやって作るか

コードを書いてアプリを作るのが面倒に感じたので、今回はノンコーディングで作成する方法を考えました。幸いなことに自社では、Office 365 を利用しているため、以下の構成でアプリを作ることを考えました。

- ユーザーインタフェース
  - PowerApps
    - モバイル向けの画面の作成や、Microsoft Flow との連携が簡単
- バックエンド
  - Microsoft Flow
    - Azure DevOps の REST API を呼び出して、ユーザーを登録する
- 利用する API
  - Azure DevOps REST API

これらの要素技術を使って以下のようなアプリの構成を考えました。

![Overview](https://gist.githubusercontent.com/tafuji/2fff8697978e17f384a09cf666611e7c/raw/25ad4b6f35f1f99b34bbc50416689f8093d0deed/01-AppOverview.png)

PowerApps 上で、追加したいユーザーのメールアドレスを入力して、ボタンを押すと、バックエンドで Microsoft Flow が起動して、その中で REST API を呼び出し、Azure DevOps にユーザーが登録される。

## Azure DevOps REST API

[Azure DevOps Services REST API Reference](https://docs.microsoft.com/en-us/rest/api/azure/devops/?view=azure-devops-rest-5.0)を調べると、以下のことが分かった。

- ユーザーを作成する API には、[Users - Create](https://docs.microsoft.com/en-us/rest/api/azure/devops/graph/users/create?view=azure-devops-rest-5.0) が利用できる
- 認証は、Personal Access Token が利用できる

次は、PowerApps の部分に関して、記事を書きます。
Vue.js の vm.$scopedSlots により slot 内部要素から値を受け取る

# Vue.js の .$scopedSlots により slot 内部要素から値を受け取る

[vm.$scopedSlots](https://jp.vuejs.org/v2/api/#vm-scopedSlots) を使用することで SSR の結果より値を受け取る際に使えるかも・・・？しれません。

[実装例](https://codesandbox.io/s/value-from-slot-lzeoc)

## 使用する slot 持ちコンポーネント

slot を持ち親コンポーネントに `vm.$scopedSlot` の実行結果を `.$emit()` するコンポーネントです。
`vm.$scopedSlot` の結果は [VNode インターフェース](https://github.com/vuejs/vue/blob/dev/src/core/vdom/vnode.js) の型で返ります。

```vue:slot-data.vue
<template>
  <div class="slot-data">
    <slot/>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$scopedSlots['default']()
      .forEach(vn => {
        if (vn.data) {
          this.$emit('slot-data', vn.data)
        }      
      });
  },
};
</script>
```

親コンポーネントにおいて下記のように `@slot-data` として受け取ります。

```vue:App.vue
<template>
  <div id="app">
    <img width="10%" src="./assets/logo.png">
    <SlotData @slot-data="slotData">
      <input name="abc" value="1">
      <input name="def" value="taro">
    </SlotData>
  </div>
</template>

<script>
import SlotData from "./components/SlotData";

export default {
  name: "App",
  components: {
    SlotData
  },
  methods: {
    slotData(data) {
      console.log(data);
    }
  }
};
</script>
```

親コンポーネントは `slotData` により 受け取った `data` より
取得したいデータをそれぞれ処理するような形です。

もっといい方法はありそうですが・・・
CSS　簡単に解説(セレクタと詳細度)

##CSSとは 
カスケーディング・スタイル・シートの略　カスケーディングは翻訳で滝
つまり、後から宣言されたものが継承または上書きすることを意味しています。

親にtext-aligin:centerなんかあったら、親要素を継承します。
子要素にtest-aligin:leftってあったら子要素を優先します。

```
<div style="text-aligin:center;">
    <div style="text-aligin:left;">//左寄せのほうが適用されます
    </div>
</div>
```

また、class="abcd efgh" で同じcssの要素(例:text-aligin)を指定していたら、後ろのほう(efgh)が優先されます

##セレクタと詳細度

###詳細度
セレクタの内容がより具体的・詳細であればあるほど優先されます。
具体的に詳細度が高いのを上に並べてみます。高いほうが優先されます。

```
・!important 
・インライン記述(style直指定)
・IDセレクタ
・クラスセレクタ　属性セレクタ　疑似クラス
・要素セレクタ　疑似要素
・ユニバーサルセレクタ
```

####!important

```
.sample-color {
	color: red !important;
}
```

プロパティの後に記述します。(!important)
基本使ことを避けるべきです。それが崩れるとcssすべてが崩れる的な絶対変えてはいけないものにしか指定しないようにします。

####インライン
<div style="text-aligin:center;">
基本避けます。タグにstyle直書きは絶対しないようにします(後でなおすの大変、ちょっとださい)、デバック時とか、一時的な試しのときだけするようにします。

####IDセレクタ
html内で一つだけに指定できます。(個人的にはclassを使いたいです。)

####クラスセレクタ、属性セレクタ、疑似クラス
何度も使える
[class="color-sample"]これはclassがcolor-sampleだけのやつです
疑似クラス select:first-child

####要素セレクタ、疑似要素
::after ::beforeなど

####ユニバーサルセレクタ　
\* すべての要素に適用するもの

##詳細度の計算

```
.container .title {
	color: red;//より詳細度が高いこちらが優先される。
}

.title {
	color: green;
}
```

##参考にさせていただいた記事
https://qiita.com/flag_ryo/items/cf3512f9b4978c41d0e1
MongoDBに挿入された時刻の仕様調査:  MongoDB内の時刻はUTC(タイムゾーンなし)・msecまで

## はじめに

GoでMongo周りのコーディングをしてた際に、「TimestampをMongoDBに詰めると値が変わってしまう」って話が出てたので、仕様を確認しました。

## Mongoの時刻に関する挙動: time.Timeと情報が異なる

例えば以下のようなMongoDBにtime.Timeで時刻を取って、Mongoにinsert, findしてみます。

```golang:main.go
package main

import (
        "fmt"
        "time"

        "github.com/globalsign/mgo"
        "github.com/globalsign/mgo/bson"
        "github.com/google/uuid"
)

type MyDoc struct {
        ID   uuid.UUID
        Time time.Time
}

func main() {
        dbname := "sampleDocument"
        connection, _ := mgo.Dial("mongodb://localhost/" + dbname)
        db := connection.DB(dbname)

        //元ネタとなる時刻取得
        doc := MyDoc{uuid.New(), time.Now()}
        fmt.Printf("data in time.Time:[%v]\n", doc)
        //insert
        collection := db.C("doc")
        collection.Insert(doc)

        //中身の確認
        var getFromMongo MyDoc
        collection.Find(bson.M{"id": doc.ID}).One(&getFromMongo)
        fmt.Printf("data in Mongo:[%v]\n", getFromMongo)
}
```

上記の実行結果はこんな感じ。

|項目|time.Time.Now()|Mongo|
|:---|:---|:---|
|精度|nanosecond|millisecond|
|タイムゾーン|JST|UTC|

```console:
$ go run main.go
data in time.Time:[{b7350e5d-05d0-429a-9d51-1eb365e71d76 2019-06-25 23:11:36.706508427 +0900 JST m=+0.001236469}]
data in Mongo:[{b7350e5d-05d0-429a-9d51-1eb365e71d76 2019-06-25 14:11:36.706 +0000 UTC}]
```

実際のMongoDBに入っている情報を確認しても情報が消えています。つまりmongo自体の仕様か、可能性は低そうですがGolangのinsert部分に関するmongo用ドライバの問題である可能性があります。
ISODateという形式で入っていることから、mongoの仕様として変換してるんだろうなということが予想されます。

```console:
> db.doc.find()
{ "_id" : ObjectId("5d122aa6bf374055deac672e"), "id" : BinData(0,"ugCCZy0ERyWRZRk+V2fxIw=="), "time" : ISODate("2019-06-25T14:07:34.331Z") }
```

## Mongoの時刻仕様

Mongoでは、[BSON](http://bsonspec.org/#/specification)と呼ばれるデータフォーマットでデータを保存しています。その[仕様](http://bsonspec.org/spec.html)を確認すると以下のようになっています。
下記で分かるように1. タイムゾーンはUTC, 2. データの精度はmillisecondとなります。

>UTC datetime - The int64 is UTC milliseconds since the Unix epoch.

[MongoDBのDate仕様](https://docs.mongodb.com/manual/reference/method/Date/)も確認。Date()の記載より

>new Date("<YYYY-mm-ddTHH:MM:ss>") specifies the datetime in the client’s local timezone and returns the ISODate with the specified datetime in UTC.

実行時にタイムゾーン指定がない場合は、マシンのタイムゾーンで計算⇒UTC時刻を返却としていますね。

同様にBehaviorより、millisecondなのが分かります。

>Internally, Date objects are stored as a signed 64-bit integer representing the number of milliseconds since the Unix epoch (Jan 1, 1970).

というわけで、以下が仕様であることが分かりました。

|項目|time.Time.Now()|Mongo|
|:---|:---|:---|
|精度|nanosecond|millisecond|
|タイムゾーン|JST|UTC|

## 参考

[BSON Specification Version 1.1](http://bsonspec.org/spec.html)
[MongoDB Date()](https://docs.mongodb.com/manual/reference/method/Date/)
[Stack overflow: Nanoseconds lost coming from MongoDB ISODate Object](https://stackoverflow.com/questions/17476176/nanoseconds-lost-coming-from-mongodb-isodate-object)
[mongoのISODateのtimezone問題に対処する](http://toshitanian.hatenablog.com/entry/2013/12/17/033647)
初めてGAS触ったときの使った関数メモとGASの良かったところについて

## はじめに
この記事はGAS(Google Apps Script)を触ったことない人向けの記事です。
自分がまず初めて触ったので、作ったものの作り方とGASのいいなと思ったところとかいろいろまとめていこうかなという感じです。

## GASいじってく

### 準備

まずGoogleスプレッドシートを開いてください。

そこのヘッダーのツールから

<img width="573" alt="スクリーンショット 2019-06-21 2.13.33のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247947/db98f224-8db9-efec-f4ed-ab1d621299a8.png">

スクリプトエディタを開いて

<img width="373" alt="スクリーンショット 2019-06-21 2.13.55のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247947/8f433789-165d-f40e-796d-b7f9354d40e8.png">

このページに来ます。

<img width="1056" alt="スクリーンショット 2019-06-21 2.15.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247947/01857e30-b395-ed92-f0da-bf730864c4a2.png">

ここに実行したい関数を書いていきます。

### 書き方

- 普通に変数宣言

```js
var hogeNumber = 1

var hogeString = "わーい"
```

- アクティブなシートを取得(もともと開いたスプレッドシートのファイルのオブジェクトを取得)

```js
var hogeSheet = SpreadsheetApp.getActiveSpreadsheet()
```

- そのファイルの中のシートをシート名から指定

```js
var sheetName = "シート1"
var srcSheet = hogeSheet.getSheetByName(sheetName);
```

- for文、if文

```js
for (var i = 0; i < 10 ;i++} {
  // 処理書いてく
}

if () {
  // 処理書いていく
}
```

- foreach

```js
var hogeArray = [11, 12, 13]

hogeArray.forEach(function(value) {
  Logger.log(value)
  Logger.log("hoge")
});

// 出力結果
// 11hoge12hoge13hoge
```

- ログ出力

```js
Logger.log("hoge")

// ↑を書いて一回ファイル保存
// ↑を通る処理を書いている関数を「関数を選択」という部分で選んで実行ボタン(▶)を押す
// その後にcommand + Enterを押すとログ画面が見れます
```

## GAS触ってみて良いと思った部分

1. ちょー書きやすい

宣言の仕方さえわかれば感覚的に書いていける。あとcommand + sでファイル保存したときに文法的に間違ってる場所を指摘してくれる。

2. デバッグ簡単

上に書いてる方法で出力できるので簡単に実装できる。

3. サーバーレス

サーバーにアップしなくても動かせるので、UIを作くらなくてもいいシステムを作るときにサクッと作れる。

4. スプレッドシートがDB代わりになる

普段動的なサービスを作っていくときにDBの設定とかいろいろ気にしないといけない。でもGAS使えばスプレッドシートとつながってるからそれをDB代わりにして使える。マイグレーションとかもしなくていいからすぐに列とか増やせる。

## まとめ

今回GASを使ってLINEのBotを作ったんですが、初めてにもかかわらずよくできたかなと思いますた。
次はslackからコマンド打って動かすGASスクリプトでも書こうかなと。
Javaでiniを編集するためのあれこれ。:inieditor-java


前回(https://qiita.com/haniokasai/items/336afb29060601e74a41 ) でiniを編集したら、結果として生成されるiniファイルがめちゃくちゃだったので、代替案を探す。

#注意
この記事のライブラリ、だめかもしれないので私の別記事を参照のこと。
ー＞同一変数名の項目があるとおかしくなる。

### intellij-deps-ini4j
https://github.com/JetBrains/intellij-deps-ini4j
###inieditor-java
https://github.com/nikhaldi/inieditor-java
###FastIni
https://github.com/onlynight/FastIni
###java-configparser
https://github.com/ASzc/java-configparser

別にどれでも構わないんだけど、使いやすそうな
IniEditor ( https://github.com/nikhaldi/inieditor-java ) 、君に決めた。

#Maven
```xml
<!-- https://mvnrepository.com/artifact/org.ini4j/ini4j -->
<dependency>
  <groupId>com.nikhaldimann</groupId>
  <artifactId>inieditor</artifactId>
  <version>r6</version>
</dependency>
```

#iniを読み出す
```java
IniEditor ini = new IniEditor();
ini.load("sample.ini");
ini.get("セクション","オプション");//example
//[セクション]
//オプション=example
ini.save("sample.ini");
```

#iniを書き込む
```java
IniEditor ini = new IniEditor();
ini.load("sample.ini");
ini.set("セクション","オプション");
ini.save("sample.ini");
```

#iniのセクションを消す
```java
IniEditor ini = new IniEditor();
ini.load("sample.ini");        
ini.remove("section_name");
ini.save("sample.ini");
```

#その他
ブランクの行やコメントも追加できるよ。