OmniAICreator/Qiita-1.07M huggingface dataset:
FirestoreでLike風検索（前方一致）を試す


Firestoreのクエリは相変わらずですが、工夫すれば[なんちゃって前方検索ができるというのは記事](https://note.com/shogoyamada/n/n8fe9486fcbec)でみて知っていましたが、自分で試したことがなかったのでやってみたメモ。

いちおう日本語とかで正しく処理できるかとか試して見たかった。

>挿入部は必要に応じてコメントイン・アウトお願いします。

```js:index.js
const admin = require('firebase-admin');

admin.initializeApp({
    credential: admin.credential.cert('/path/to/key.json'),
    databaseURL: 'https://xxxxxxxxxx.firebaseio.com',
});

const db = admin.firestore();

(async () => {

    // db.collection("dictionaries").add({
    //     jpName: '山田 太郎',
    //     enName: 'Taro Yamada',
    // })

    // db.collection("dictionaries").add({
    //     jpName: '山田 花子',
    //     enName: 'Hanako Yamada',
    // })

    // db.collection("dictionaries").add({
    //     jpName: '山田次郎',
    //     enName: 'Jiro Yamada',
    // })

    // db.collection("dictionaries").add({
    //     jpName: '鈴木 花子',
    //     enName: 'Hanako Suzuki',
    // })

    // db.collection("dictionaries").add({
    //     jpName: '佐藤 一郎',
    //     enName: 'Ichiro Sato',
    // })
	
	
	//クエリ
    const keyword = "山田";
    const snapshots = await db.collection("dictionaries").orderBy("jpName").startAt(keyword).endAt(keyword + '\uf8ff').get();
    const docs = snapshots.docs.map(doc => doc.data());
    console.log(docs);

})()
```

実行。

```bash
node index.js


[
  { jpName: '山田 太郎', enName: 'Taro Yamada' },
  { jpName: '山田 花子', enName: 'Hanako Yamada' },
  { jpName: '山田次郎', enName: 'Jiro Yamada' }
]
```

当然ですが、日本語、英語で問題なく動きます。

あと、keyword="山田次郎"といった完全一致（風）でももちろんヒットします。

名前を検索するのであれば、姓、名でフィールドを分けて、検索用にnameArrayとか配列フィールドを作って['山田','花子']などとして、.where("nameArray","array-contains-any",["山田","花子"])とかした方が現実的かも。

標準機能にLike検索（部分一致）欲しいなあ。。。
要素の重複しない集合（HashSetっぽいやつ）

とりあえず重複を除去したいだけならこんな感じ？
`map`で一発。

```perl
my @input = qw( a b a c );

my %wk = map { $_ => 1 } @input;
my @output = keys %wk;
```

CPANに[Set::Object](https://metacpan.org/pod/Set::Object)というのがあるが、こちらは未確認。
Webブラウザでも縦書きの美しい日本語入力を。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48027/74d4f189-3503-5b25-e0c5-c313d980e612.png)

## 三行まとめ
- Webでも縦書きで美しい日本語の「**入力**」ができるか試したかった
- `contenteditable`と`writing-mode`で実装した
- ついでにMarkdownで書けるようにした

## 実装方法
### contenteditable
`contenteditable`とは、ページ利用者にDOMの編集を許可することができる属性です。デフォルト状態では`false`を取ります。また、未指定の場合は親要素の値を継承するため、親要素でcontenteditableを有効にした場合は子要素の編集も併せて可能となります。

```html:html
<div contenteditable="true">
  <p>編集が可能な要素</p>
  <p contenteditable="false">編集が不可能な要素</p>
</div>
```

この記述だけでスタイルを保持したままテキストの編集が可能となります。

### writing-mode
cssの`writing-mode`とは、テキスト行（垂直あるいは平行）とテキストのフロー方向（左向きあるいは右向き）を選択する際に用いるプロパティです。デフォルト状態では`horizontal-tb`（テキスト行は左から右方向の水平、フロー方向は上から下）を取ります。今回は右上から左下へ進むように組みたかったため、`vertical-rl`を指定しました。

```css:css
.vertical-text {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;}
```

---

これらの`contenteditable`と`writing-mode`を指定し、最低限のスタイルを定義するだけでも、このように縦書き入力を実現することができます。とても簡単ですね。

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

## 実装（その他）
- テキストのスタイル
    - 以下のように指定しました。

```css:css
.vertical-text {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 20px;
  font-family: "Noto Serif JP", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #2c3e50;
  line-height: 2em;
  text-indent: 1em;
}
```

- フォント
    - 今回はGoogle Fontsの[Noto Serif JP](https://fonts.google.com/specimen/Noto+Serif+JP)にお世話になりました。
- 入力書式
    - せっかく`contenteditable`を用いて実装したという背景もあり、見出しやリストも出力すべく、Markdownへの対応を行いました。
    - 今回はリッチテキストライブラリ「[ProseMirror](https://prosemirror.net/)」のVue.js向けラッパー「[tiptap](https://tiptap.scrumpy.io/)」にお世話になりました。

これらの工程を経て、今回の[縦書きエディタ](https://ore0.github.io/verticalEditor/)の試作が完成しました。

## 成果物
![Dec-25-2019 05-00-32.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48027/5005f577-c0f8-3b69-8900-2bf5de0621f9.gif)
https://ore0.github.io/verticalEditor/ ※Chrome推奨です。

## おわりに
「縦書き」かつ「日本語」かつ「Web」の入力方式は非常にニッチであるが故に先行事例が非常に少ないですが、実装してみると数行程度の記述で簡単に実現できましたね。一方でカーソルキーでの操作がしづらいことや、ブラウザでは細かな文字組み対応が難しいことが課題として挙げられます。これからも引き続き調査や改良を進めながら、縦書き入力を日常的に使えるように活用方法やよりよい実装パターンを見いだせればと思います。

## 参考リンク
- [contenteditorble - MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable)
- [writing-mode - MDN](https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode)
- [tiptap](https://tiptap.scrumpy.io/)
2年越しのAIITについて

#１．お詫び申し上げること#

　2年前、このQiitaというサイトがエンジニア向けの技術共有サイトとは理解しておりませんでした。「誰も見てないでしょ！」なんて思いながら、寝不足と課題と仕事に追われて、ブログ感覚で書き始めたら、なかなか楽しく、好き勝手に書いておりました。
　しかも、大学院名まで出している全世界に発信されるネット上で、このようなブログを書いてしまい申し訳ありませんでした。2年越しに各学校関係者の皆様にはお詫び申し上げます。

・・・・・・・・・・・お詫びしたので、本題に入ります。

#２．修了後の変化#
　2年越しにこちらに投稿しようと思ったのは、~~クリスマスイブなのに~~ 本学の図書館で気になる論文サーベイをしており、自分が入学前と現在どのくらい変化があったのか？と振り返りたいと思ったからです。2年越しなので、閲覧者はいないとは思いますが:sweat_smile:　

- ####入学前のスキル####

    - 思考の傾向：文系
    - Mac：触ったことがない
    - ターミナル：空港しか知らない
    - 英語力：中1もないかもしれない
    - 数学：中2も怪しい
    - 文章力：感情論で自己満足するレベル
    - プレゼン力：人様に発表するような機会なし
    - 交流の仕方：話せばみんな友だち
    - 空気：気にしたことありません。

####■社会人学生のいろいろ
#####・人間関係######
　入学当初、今まで交流してきた友人と価値観が異なる雰囲気を感じたものの、2年間、思う存分楽しんで勉強も交流も深めてたくさん友人を作りたい！と思っていました。誰に対しても対等に積極的に話しかけたりしてました。社会人同士なので落ち着いている人が多いと思います。そのため、~~かなり浮いていたと思いますが、~~多くの方と知り合うことが出来ました。
#####・履修科目の計画
　科目の種類が多いため、選択をするのが難しかったです。自分が取得したいスキルがまだ明確に決まっていなかったので、興味を持った科目を片っ端から履修して、毎日課題に追われてました。（修了必須単位は40単位ですが、修了時52単位も取っていました:sweat_smile:）
#####・履修科目の難易度
　振り返った今であれば、情報系の科目を初めて学ぶ方々でもなじみやすく難易度はそこまで高くないと思います。社会人を対象としているので、初学者に対してポイントを絞って理解しやすいように講義内容も工夫されている印象を受けました。また先生と相談次第で色々なことは配慮していただけると思います。所感として情報系の基本を初学生にもわかりやすく丁寧な説明をしてくれる講義が多かったです。

　ただ、私のように欲張って１Q（約２か月半）で６科目とか５科目履修すると毎日課題に追われて毎日通学が必要になり、一つ一つの科目に対して時間を割くことができず、大した理解しないまま、単位を取るのに必死になってしまうともったいないと思います。あっという間に時間は過ぎ去ってしまうので、履修科目が多いといろんな意味で難易度は上がると思いました((+_+))
　
####■在学中に得たもの####
　私にとって得るものが大きかったのは、専門家や研究者の先生たちとの対話です。知識は壊滅的に足りなかったので先生たちから多くのアドバイスを頂きました。また思考プロセスの違いを目の当たりにし「先生はなぜそういう結論にいたったのだろうか？」ともらったアドバイスに対して深く考察するようになりました。（ほかにもたくさんありますがやめておきます）
　数多くのアドバイスの中から自分の基盤となったのは、どんな対象にも「本質はなにか？」と自問し、探索し、自分なりに答えを導き出し、アウトプットするというプロセスが身についたことです。（おかげさまで直感に頼ることが減りました。）

####■大人が学び続けるということ####
　日本では大人が学びなおすことはめずらしく、職種によっては高学歴もあまり重要とされないと感じています。個人的には勉学に費やした時間は、必死に費やした時間の分だけ、知識もスキルも自分に返ってくることを実感しました。なので、自分なりに学び続ける努力は継続してます。
　それでも、日々の生活や仕事でも新しい知識を得ることが少なく学び足りないと感じてます。私なりにですが、「学ぶこと」は修了しても終わりはなく、生涯続けていくことなのかもしれないと思うようになりました。

- ####修了後、できるようになったこと####

    - プログラミング言語
        - python：データ分析（ライブラリー&AzureとGCP使用）
        - C#:UnityとARcoreで簡易的なAR作成（androidのみ）
        - C++：挑戦中
        - plorog：挑戦中
    
    - 思考の傾向：理系の人の話は大枠でわかるようになった
    - 英語力：技術論文をGoogle翻訳で読む（自力だと中3？）
    - 数学：数式が読める（多様体や幾何学に興味を持てるようになった）
    - 文章力：口頭発表用に論文投稿できる（ちょっと盛ってます）
    - プレゼン力：発表はできる（相変わらず…ですけど）
    - 交流の仕方：無理しなくなった。笑
    - 空気：読むときもあれば、あえて読まない狡さを覚えました。
    - 今後の展望：お会いできたときにでも:relaxed:

####■謝辞####

　先生たちと多くの対話ができたことで、私の人生観は大きく変わりました。2年間本当にありがとうございました。先生たちに多大なるご迷惑おかけした分、自分の成長に繋がったと自負してます。本学で学んだことを糧に次のステージでも私なりに奮闘してみようと思います。本当にありがとうございました。またどこかでお会いできた時は、ぜひぜひ、世間話させてください。また、本学で知り合った皆様、皆様と過ごしたお時間はとても楽しかったです。それではまたどこかで(^^)/
ぼっちでもプレゼント交換がしたい！【クリスマスハッカソン】

## はじめに
チーム名：正の6時間
このプロダクトは[クリスマスワンナイトハッカソン](https://connpass.com/event/158943/)の成果物です。

## ところで
クリスマスですね。クリスマスといえばプレゼント交換ですが、生憎ぼっちなのでできません。
そこで、ネット上でプレゼント交換をできるようにしました。
プレゼントと言っても、交換するのは**本の情報**です。
良本の情報がプレゼントされると　気持ちがいいですよね。

## 作ったもの
### システム
ユーザーがニックネームとISBNを入力すると、
それを`Google Books API`で検索し、出た情報のうちタイトルを取得して、
それらの情報をまとめてデータベースに保管します。
その後、プレゼント交換がなされ、データベースからランダムに本の情報が受け取れます。

### 使用しているもの
- Python
- Flask
- Heroku
- etc...(GitHubにあります)

### 改善したいところ
- デザイン
    - 素のHTMLなので
- ISBN以外でも検索したい
    - それはそう
    - 本検索の精度が下がりそうなのがちょっと怖い
- 本が広辞苑と退Pyしかない
    - データが少ないので使ってください（使うと増える）

## 感想
最初はゲームみたいなのをやろうとしていたんですが時間とスキルがダメだったので1時過ぎぐらいに方針を変えました。
FlaskとPostgreSQLの併用は初めてだったのでそこでかなりてこずりました。今思えばDjangoでやった方が良かったかも。
結果的に終わったのでよかったです。これ書いてる今5:37ですが。

### プロダクトへのリンク
[プロダクト](https://onenight-xmas.herokuapp.com/)
[GitHub](https://github.com/tektomo/onenight_hack_app)
X11Fowardで「Cannot open display」となったときの対策

# にゃーん
クライアントで

```
ssh -X user@hoge.server
xeyes
Cannot open display: :0.0
```
:telephone::cat:<どうして…

# サーバーに`xauth`がないからでは？
参考：http://luozengbin.github.io/blog/2014-06-21-[メモ]リモートxの接続方法.html

サーバー(Ubuntu)で

```
sudo apt install xauth
xauth list
hoge/unix:0  MIT-MAGIC-COOKIE-1  72kuxtu334nandeya
```
このあとサーバーを再起動すれば`xeyes`は多分通るようになってると思います．
C#のデリゲートとイベントハンドラがいまだによくわかんないので振り返り

# はじめに
はじめてQiitaに投稿します。
業務でたまにC#を触るのですが、デリゲートとイベントハンドラについて
よくわかっていなかったので振り返りをおこないました。

# 目次
* デリゲートまとめ
* デリゲートの用途
* イベントハンドラまとめ
* Windowsフォームアプリのイベントハンドラ

# デリゲートまとめ
"int"や"string"等と同様、型のひとつです。
インスタンスを生成する際にメソッドを登録して使います。
"delegete"(=代表、委譲、委託)という英単語の意味のとおり、
使う側には処理の内容は書かずに別のクラスへ委譲できる役割を果たします。
使う側は引数と戻り値の定義のみ記載して実際の処理の内容は書きません。
ポイントとしては複数のメソッドが登録できることです。

下記のように宣言します。

```c#:delegatetest.cs
// delegate 戻り値定義 デリゲート名(引数定義)
delegate int AddDelegate(int a,int b);

```

上記例の場合「int型の引数を2つを受け取ってint型の戻り値を返すメソッド」
を代入できるデリゲート型を宣言したということになります。

宣言したデリゲート型は下記のように使います。

```c#:delegatetest.cs
delegate int AddDelegate(int a,int b);

class Program
{
   static void Main(string[] args)
    {
        // 宣言したデリゲート型インスタンスを生成
        // その際にメソッドを登録(Addメソッド)
        AddDelegate add = new AddDelegate(Add);
    }

   // 2つの整数の加算結果を返すメソッド
   static int Add(int a,int b)
    {
        return a + b;
    }
}
```

`実行結果:3`


# デリゲートの用途
一見すると通常のメソッドと変わらないように思えますが、
デリゲートを使うことで処理を汎用化することができるみたいです。
https://ufcpp.net/study/csharp/sp_delegate.html

上記リンク先の「デリゲートの用途」を読んでみると、
実際に処理する側(Selectメソッド)はPredictデリゲート型で渡された
引数の内容(デリゲート変数に何のメソッドが入っているか)は興味がなく、
単純に引数に入っているメソッドから得られたアウトプットをもとに処理をすればいいだけになっています。

逆に処理を委譲する側も、「この結果がほしい」とリクエストをしています。
知りたいのは「10超か」なのか「5超15未満か」なのか、委譲先のふるまいをコントロールできます。

「委譲」と聞いて何もしないかのように勘違いしてしまいましたが、
実際は委譲する際にはどんなアウトプットがほしいかリクエストしています。

# イベントハンドラまとめ
イベントハンドラとは、ボタン押下や画面が開いた・閉じた、等のイベント発生時におこなう処理のこと。
デリゲートを利用して実現している。

イベント発生側とイベント受取側で分けるなら、イベントハンドラはイベント受取側。

イベント受信開始(イ)
↓
イベント発生
↓
イベント送信
↓
イベントハンドラが受信(イ)
↓
委譲された処理を実施(イ)

(イ)がついている役割をイベントハンドラが担っていると理解しました。


ポイントとしてはイベントハンドラへのメソッドの追加・削除はクラス外からもできますが、
イベントハンドラの呼び出しは同クラス内からのみおこなえる、という制約があります。(event構文の役割)

# Windowsフォームアプリのイベントハンドラ
私がイベントハンドラが何者なのかつかみ切れていない正体はこれだったみたいです。
WindowsフォームアプリケーションのコントロールをVisual Studioで描画すると、
イベントハンドラも自動生成されるのでイベントハンドラにメソッドを登録するくらいしかおこなっていません。
普段はフレームワークの中に入ってしまっているのであまり意識しませんが、
下記リンクではイベントハンドラを自作できるので内部の動きの理解に役立ちました。
https://ufcpp.net/study/csharp/sp_event.html


これも自動生成なので普段あまり気にしてません(気にしないようにしてました)が、
イベントハンドラの謎の引数(object sender, EventArgs e)の正体は下記リンクがわかりやすかったです。
https://qiita.com/Ich_wei_/items/1e5993c316f4a78fac79

# おわりに
業務をとおしてたまにC#を触っているのですが、
パッケージ開発が主業務ではないというのもあり(言い訳)中途半端な理解のものが多いです。
デリゲートとイベントハンドラもVSの機能で自動生成させているのでよくわかってませんでした。
誤りやご指摘等あればいただけると大変ありがたいです。

# 参考URL
https://ufcpp.net/study/csharp/sp_delegate.html
https://ufcpp.net/study/csharp/sp_event.html
https://qiita.com/Ich_wei_/items/1e5993c316f4a78fac79
クリスマスにちなんだインタプリタ言語を作った


この記事は[クリスマスワンナイトハッカソン](https://connpass.com/event/158943/)の成果物報告の記事です
# はじめに
クリスマスを英語で書くとChristmasになりますね！！
なので、CとHとRとIとSとTとMとAで表現するBrainfuckに似せたインタプリタ言語を作りました！

その名も
**Christma（クリスマ）**
です！

ChristmaのインタプリタはC++で開発しました。Python版もあります。

# メンバー
[@Iwancof_ptr](https://twitter.com/Iwancof_ptr)
[@FPC_COMMUNITY](https://twitter.com/FPC_COMMUNITY)
[@e381x](https://twitter.com/e381x)
みんなとてもつよつよで頑張ってくれました。ありがとうございました。
# About Product
トラック倒し、バイトテロ、童貞いじり...
何かあったらすぐに炎上してしまう世知辛いこのデジタルの時代、私たちクリぼっちがクリスマスに一人でいるなんてことが全国のリア充どもに知られたら、暇つぶしに総攻撃を受けるに違いありません(偏見)
いつもみたいに、音ゲーのリザルトも、萌え絵も、くだらないコラもツイートすることすらできなくなってしまうのです！
しかし、そんな全国のボッチ達の悲壮な声にならない叫びを聞き、それらの問題を解決するプロダクトを作りました。
**画像にプログラムを隠し**、さらにインタプリタがないと**実行すらできない**という徹底された隠蔽...現代の辛い若者達のために作られた対リア充最終防衛ライン。その名も

**C R I S T M A** です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248889/711a68fa-b74c-7d55-9477-dbae4aa49f1d.png)

# 言語仕様
Christmaは、C, H, R, I, S, T, M, Aの８文字で表現するBrainfuckに似せたインタプリタ言語です。拡張子はchriです。

- C: ポインタをインクリメント
- H: ポインタをデクリメント
- R: ポインタの値をインクリメント
- I: ポインタの値をデクリメント
- S: 現在のポインタの値を出力
- T: 入力から１バイト読み込みポインタが指す値に代入
- M: ポインタの値が０なら、次のAまで飛ぶ
- A: ポインタの値が０じゃなかったら、前のMまで飛ぶ

# インタプリンタの機能
インタプリンタにはChristmaの実行の他にもこのような機能が実装されています。

| インタプリンタ | 機能 |
|------|------|
| C++ | 引数を指定せずに実行するとクリスマスツリーのAAが表示される |
| Python | Christmaのコードが隠し埋め込まれた画像を復号・生成する<br> [復号] python read.py hoge.png<br>[生成] python steg.py poyo.png hoge.chri|

画像に隠されたコードを復号・生成するのには「ステガノグラフィー」という技術を用いてます。

# 遊び方
- プログラムコードの実行方法<br>
     実行はコマンドライン引数からファイルのパスを取得して、そのパスのファイルを実行します。
     もしコマンドライン引数が指定されずに実行した場合、クリスマスツリーが出力される仕様になっています。
- 画像からの実行<br>
    [このツイート](https://twitter.com/Iwancof_ptr/status/1209552251133427713)にあるような画像をダウンロードしてきて、それをread.pyに第一引数に指定して実行してください。そうすると...


# ソースコード＆ドキュメント
https://github.com/FlexiblePrintedCircuits/Christma/
shortcuts，使ってますか？

# はじめに
この記事は東京高専プロコンゼミAdventCalendar② 24日目 の記事です．
①https://adventar.org/calendars/4321/
②https://adventar.org/calendars/4322/

すでに日本では25日になっていますが，僕はハワイ在住なのでセーフです()．

# 作るもの
今回は，前々から使いたかったiOS shortcutsのssh機能を使ってraspberry piに計算をさせる何かを作りました．

# shortcutsとは？
![Apple-Shortcuts-v2-logo-icon.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547432/d53056eb-0642-83ff-46eb-5fb75d0f2c86.jpeg)
>https://support.apple.com/ja-jp/guide/shortcuts/welcome/ios
ショートカットは、Appでの1つまたは複数の作業をすばやく完了するための機能です。「ショートカット」Appでは、複数の手順を組み合わせた独自のショートカットを作成できます。たとえば、海の波情報を取り込み、ビーチまでの所要時間をチェックし、サーフミュージックのプレイリストを再生する、という「サーフタイム」ショートカットを構築できます。

# できたもの
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ゴミができた <a href="https://t.co/MjhuL4HITS">pic.twitter.com/MjhuL4HITS</a></p>&mdash; ふぁぜろぐ (@fazerog02) <a href="https://twitter.com/fazerog02/status/1209555039586439168?ref_src=twsrc%5Etfw">December 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こんな感じで計算式を引数で送ると計算結果がメールで返ってきます．

# 書いたコード
#### raspberry pi側
```python
import sys
import smtplib
from email.mime.text import MIMEText
from email.mime.base import MIMEBase
from email.utils import formatdate


MY_ADDRESS = "送る側のメールアドレス@gmail.com"
PASSWORD = "パスワード"
TO_ADDRESS = "受け取る側のメールアドレス@gmail.com"


class Mail:
    def __init__(self):
        self.smtpobj = smtplib.SMTP_SSL('smtp.gmail.com', 465)
        self.smtpobj.login(MY_ADDRESS, PASSWORD)

    def make_massage(self, from_address, to_address, subject, text):
        message = MIMEText(text)
        message["Subject"] = subject
        message["From"] = from_address
        message["To"] = to_address
        message["Date"] = formatdate()
        return message

    def send(self, from_address, to_address, message):
        self.smtpobj.sendmail(from_address, to_address, message.as_string())

    def close(self):
        self.smtpobj.close()


mail = Mail()

# 引数を取得 ["main.py", "1+2"]みたいな感じで取得される
args = sys.argv
# 式を実行
ans = eval(args[1])

message = mail.make_massage(MY_ADDRESS, TO_ADDRESS, "result", str(ans))
mail.send(MY_ADDRESS, TO_ADDRESS, message)
mail.close()
```

raspberry piのssh設定に関しては，[https://qiita.com/3no3_tw/items/4b5975a9f3087edf4e20](https://qiita.com/3no3_tw/items/4b5975a9f3087edf4e20)を見るといいと思います．

####shortcus側
これはコードとは言えないですが...
<img width="414" alt="InkediOS の画像 (3)_LI.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547432/acc67190-aa1b-5cc8-0b53-69a7b32c8391.jpeg">

# まとめ
<br>
***それ，電卓でよくね？？？？？？？？？？？？？？？？？？？？？？***

shortcuts，自由度が高くて色々なことができるので，興味があるiOSユーザーの人はいじってみると面白いと思います．

拙い文章ですが最後まで読んでいただき，ありがとうございました．
Vimで日本語入力！ノーマルモードに戻ると自動で日本語入力から英語入力へ　gvimのススメ

#はじめに　vimで日本語入力をする際の問題点
vimを使って日本語入力をしたいという方は多いことでしょう。私もその一人なのでvirtual boxで仮想環境を作り、文書を作成したものを送ってきたりしていました。vimは元々日本語入力には向いていないといわれますが、それを差し引いても慣れ親しんだカーソル移動や編集能力が欲しいと個人的には感じています。
今回新しいWindows用のvimを発見したのですが、日本語入力をする際の問題点の一つが解決するかもと感じました。サンタさんからのプレゼントかな？

#vimで日本語入力
ノーマルモードに戻った時に英語入力に自動で変わる機能が見つけられず、毎回escしてからコマンドを使うために英語入力に戻すというのが非常に面倒でした。
#Windowsで使える新しいvimソフト
しかし、この度みつけた 2019年12/13よりリリースされた新しいvimをダウンロードしたところ、**挿入モードからノーマルモードに戻った時に自動で英語入力に切り替わっていました!!!**
MacVimではできるようですが、Mac持ってないし。。。
ダウンロードは窓の社からワンクリックでできます。
https://forest.watch.impress.co.jp/library/software/vim/
でてきた項目をそのままyesにして進んでいくと、デスクトップに３つvimのアイコンができていました。違いはあまり確認はしませんでしたが、一番上にあるものがよさそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455763/2707a4d2-c5db-6f74-d28c-558c00cff280.png)

もちろん、vimrcも使うことができます。
vimrcの設定は https://qiita.com/8M5MgHqNywfgw7q/items/e8b672008dcb7d12ba34
を参照してください。 

また、もう一つの利点として普段自分が使っているCentOS7の変換機能よりもMicrosoftの変換のほうが精度が高い気がします。

#文書の共有
Wordで作ったファイルを直接開くことはできませんでした。しかし、vimで作成した文書をwordにコピペすることはできるようです。

#カーソル移動について
vimのデフォルトのhjklのカーソル移動だと改行した行ごとに上下にカーソルが移動します。(論理行）しかし、プログラムではなく文書を作成する場合には読点を打つたびに改行するわけではないので、カーソルを表示行で上下に移動するためにはjkのかわりにgj,gkを使う必要があります。それは非常に面倒なのでgvimを文書作成に使用することが多い方は以下をvimrcに追加することをお勧めします。

```
nnoremap j gj
nnoremap k gk
nnoremap gk k
nnoremap gj j
```
#個人的に気になること
・背景を黒っぽくしても日本語入力の変換が決定するまで白色なのがまぶしい。
イメージてきにはこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455763/4e771cf8-4778-3fdd-dc63-3b0c7ca8c3fc.png)
まだダウンロードしたばかりなのであまり触れていませんので気づいたことがあれば追記したいと思います。
Fix broken Qiita

e.g.

https://www.java.com/en/

JAVA + YOU, DOWNLOAD TODAY!


https://www.java.com/ja/

あなたとJAVA, 今すぐダウンロード


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12160/6fe62558-7fcf-ac2b-e2b6-cafccb1d2574.png)


This is terrible and I can't read Qiita articles without solving this. Unfortunately Qiita has been ignoring this issues for at least about 6 years. 

`word-break: break-all` is the root cause. We must figure out how to remove this part. Note that I don't want to install browser extensions (e.g. for Chrome or for Firefox) for every computers, so browser extensions are not an option.

## Links and notes

* https://qiita.com/chaspy/items/f9fcc81d54a2e37d2ec2#datadog---dashboardtbd
* https://cdn.qiita.com/assets/public/style-bd3851202164012312ef9738b2df2882.min.css
今年一番驚いた技術、それは全文検索「Algolia」

### メリークリスマス！！

今年も最後のアドベントカレンダー担当させて頂きます！m(_ _)m

さて、今年も弊社色々チャレンジしました！

- `Solidity` (ブロックチェーン)
- `Firebase` (インフラ)
- Webスクレイピング

・・・etc

**色々やりました！！**

そんな中、私が今年一番「**これはヤバい！**」と思ったモノを紹介して締めたいと思います！
その名も

### `Algolia`

=> [https://www.algolia.com](https://www.algolia.com)

- `ミドルウェア`ではなく`SaaS型`の`全文検索エンジン`
- `PHP`、`Swift4`など対応言語が豊富！！
	- <img width="1434" alt="20191225001.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151630/1c5c7c1e-7283-2d53-2972-156ea15a5191.png">
		- (※私は`Javascript`で利用しました)
- なんと日本語にも対応！！
	- (50カ国後に対応しているそうです)
- **無料で使える範囲でもちゃんと十分使えちゃいます！！**

他にも色々ヤバいんですが、Algoliaについて書かれた記事はたくさんあるので是非色々ご参考下さいm(_ _)m


## 使ってみた

私は今回`Firebase`のプロジェクトで`Algolia`を利用しました。
`Firebase`もまた言わずもがなの死ぬほど便利な`サーバレス`なアーキテクチャなワケなのですが  
いかんせん **検索に弱い** と言う弱点を感じていました。
何故なら`Firebase`で利用出来る`Cloud Firestore`と言うデータベースは扱えるQueryにかなり制限があります。
**例えばOR条件が使えません。**
(※公式には2つのクエリーで取得した結果をくっつけろと説明してます)
それから`!=`も使えなかったらり`>=``>`などの比較演算子は1度に一つのフィールドに対してした使えないなど
割と**検索を殺しにくる成約が多い**です。

そんな`Cloud Firestore`の救世主として`Firebase`自身も推薦の全文検索が`Algolia`でした！
(※公式推薦:[https://firebase.google.com/docs/firestore/solutions/search?hl=ja](https://firebase.google.com/docs/firestore/solutions/search?hl=ja))

デモサイトがたくさんありますので見ながら実装するのが良いです。

[https://react-instantsearch.netlify.com/examples/e-commerce/](https://react-instantsearch.netlify.com/examples/e-commerce/)
⬆
私はここを参考に実装を行いました。
他にも

- [https://www.algolia.com/doc/guides/building-search-ui/resources/demos/react/](https://www.algolia.com/doc/guides/building-search-ui/resources/demos/react/)
- [https://codesandbox.io/embed/github/algolia/doc-code-samples/tree/master/InstantSearch.js/getting-started](https://codesandbox.io/embed/github/algolia/doc-code-samples/tree/master/InstantSearch.js/getting-started
)

など参考にさせて頂きましたm(_ _)m
(※実装方法についてはいっぱい情報ありますので割愛します ⬅おい)

簡単に手順だけ説明しますと・・・

- サービスに登録してAPIキーを発行する
- Webの場合は「`InstantSearch.js`」と呼ばれる純正ライブラリの一式をページに読み込む
- あとは検索フォームを表示したいhtmlに初期化する処理を書く

**以上、わかっていれば説明する程も無いほど死ぬほど簡単です ⬅おい**


## そんな超絶簡単な`Algolia`の弱点

こういった先駆けとなるプロダクトの一番よくある弱点・・・
そうです

#### 基本英語で日本語のドキュメントが少ない！

もうあるある過ぎる！！
・・・なんですが **朗報も！！**

#### 今年の5月に日本法人設立が発表されました！！ヽ(=´▽`=)ﾉ

[https://www.globenewswire.com/news-release/2019/05/29/1856745/0/ja/Algolia-日本へのグローバル展開を発表.html](https://www.globenewswire.com/news-release/2019/05/29/1856745/0/ja/Algolia-日本へのグローバル展開を発表.html)

ドキュメントの日本語化も間近です！！
**来年にはきっと日本語化されてもっと利用が広がっているのじゃないかな？？**
と、密かに期待しております(´ω｀)

### 来年是非 `Algolia` 注目してみて下さい！！

それでは良いお年を！ヽ(=´▽`=)ﾉメリークリスマス！
Dropboxでのフォルダ／ファイルの同期除外（無視）を設定する方法

#2020/11 更新
気付いたら、DropboxのAppでファイル・フォルダの無視（同期しない設定）が正式に対応され、ページも更新されていました。
参照：[Dropbox ファイルを「無視」に設定する | Dropbox ヘルプ](https://help.dropbox.com/ja-jp/files-folders/restore-delete/ignored-files)

但し、

> 注：Dropbox Business ユーザーはこの機能をご利用いただけません。 Dropbox Business ユーザーは、次のコマンドラインの手順をご利用ください。

とのことなので、Dropbox Businessを利用されている皆様は、今もコマンドラインでの対策が必要のようです。

#前提と背景
## 環境
| 項 目 | 内 容 |
|:--|:--|
| やりたいこと | Dropboxで特定フォルダの同期除外 |
| OS | Windows 10 Pro |
| Dropbox Plan | Plusプラン |
| 該当ファイル数 | 500,000+ （除外前） |

## 経緯

これまで自身のプロジェクト関連ファイル（ソースファイル、ドキュメントファイルなど）は、Gitやバックアップソフトを使用しての外付けHDDなどにバックアップを行ってきた。

最近思い立って、どうせならDropboxの容量も2Tになった（料金も上がる）のでもっと活用しようと思い、Dopboxの同期を使用したリアルタイムバックアップを試してみることにした。
Plusプランなら、30日間の過去履歴も取られているので、その辺も安心材料。

ただし、あくまでもソースのバージョン管理はGitがメインであり、Dropboxは予期せぬ事態に備えたもの。「備えあれば憂いなし」の実践。

#Dropboxには.gitignore に相当するものは（今のところ）無い

私にとっての問題は、Dropboxには「.gitignore」に相当する無視リストの機能がなく、Dropboxフォルダ全てが同期されてしまう点だった。

これは多くのデベロッパーが使用しているだろうNode.jsの「node_modules」フォルダがソースに含まれており、ファイル数が膨大なため、同期に非常に時間がかかる。時間だけならまだしも、CPUやメモリもガッツリ使用し、作業に支障が出てしまっていた。マジ無理ってくらいに。

「選択同期」はクラウドのみファイル・フォルダを置き、ローカルから消すため、逆の機能だな、と。

上記「環境」にも書いたが、全ファイルを対象とすると50万を超えるファイルとなってしまう。
Appからも「500,000以上のファイル同期は遅くなるよ！」という警告を頂いた。

#ローカルの身にファイル・フォルダを置く方法を見つけた

ネットを探すとすぐに出てきた。試したのは、以下の2つ。結果的には2つ目を採用した。

##方法１：「選択同期型の競合」を利用する

諸兄の過去の投稿 [Dropbox で特定のフォルダを無視する](https://qiita.com/icedpasta1832/items/fe952cb422d3ebe4c649) などを参考にし、Dropbox公式のヘルプ（[選択型同期の競合](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&ved=2ahUKEwid9-6Y887mAhWWjp4KHSuBAmQQFjACegQIBRAB&url=https%3A%2F%2Fhelp.dropbox.com%2Fja-jp%2Finstalls-integrations%2Fsync-uploads%2Fselective-sync-conflict&usg=AOvVaw2vMyFZ2NfOfLiXgpS_Vkwk)）を見ながら設定してみた。

手順的にも面倒なのと、しっかりとフォルダ名に「（選択型同期の競合）」という文字列が追加された。ウケる
動作的にはできるのかな？という感じだったが、複数ある除外したいフォルダに対しての操作（コピーとか）が面倒＆時間がかかるので、ちょっと私の状況では厳しい感じであった。

##方法２：Dropboxオフィシャルベータ機能「Dropbox ファイルを「無視」に設定する」を利用する

ベータ機能としてDropboxが提供しているものを発見した。
[Dropbox ファイルを「無視」に設定する](https://help.dropbox.com/ja-jp/files-folders/restore-delete/ignored-files) というものだが、記事内には、

>現在この機能はベータ版で提供しており、一部の Dropbox ユーザーのみご利用いただけます。今後、他のユーザーにもご提供する予定です。

とある。「一部」って誰が該当するのだろうか。。。「早期リリース」を設定しているユーザかな？と思ったが、「早期リリース」はONにせずに試してみた。

*※上記記事内には、Mac、Linuxでの指定方法もありました。*

PowerShellでコマンドは以下

`Set-Content -Path FILE-PATH -Stream com.dropbox.ignored -Value 1`

FILE-PATH を除外したいファイル・フォルダのフルパスにして実行するだけで、同期対象から除外された。私は一部のユーザらしい。ホントかよ・・・
但し、PowerShell6では動作しなかった。（私の勉強不足です、ごめんなさい。誰か教えてください。）

#結論

Dropboxでは無視・除外リストは実装されていないが、コマンドベースでは無視に指定できるようだ。
今回は念のため、除外したフォルダのリストをTXTにして、DropboxのRootフォルダに入れておいた。今後、正式な機能として実装されたときにどういったGUIになるのかわからないが、その時までこれで凌ごうと思う。

もし、Dropboxの無視リスト関連でこのページに辿り着いた方が居た時にお役に立てれば幸いだが、これについて書かれている記事を見つけられなかったので、実は使い方間違ってるんじゃないかと不安でしょうがない。。。
【HTML】ブロックレベル要素とインライン要素

# ブロックレベル要素
<img width="1083" alt="スクリーンショット 2019-12-25 2.54.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/9432578a-8c67-aea2-4be6-b47554ed13b3.png">

Qiitaのホーム画面をだいぶおおまかですが、色別にわけると上記のような画面になるかと思います（２０１９/１２/２５時点）
この 緑・茶色・白 の部分で分けられたひとつのかたまりをブロックといいます。

このブロックのなかにQiitaホーム画面の緑色部分で言うなら見出しだったり、キーワード入力だったり。マイページなどの要素がある。

## div
:sunny: divで囲った部分をブロックレベル要素としてグループ化することができる。
　 Qiitaホーム画面でもこの 緑・茶色・白 の部分で div を使用してそれぞれグループ化されている

# インライン要素
:sunny: ブロックレベル要素の中にいれて、文字の修飾などに使われる。
　　文字の太くしたり、文字にリンクを設定したりなど。
Flutter少し触った.

クリスマスワンナイトハッカソンでFlutterとFirebaseで何か作ろうとしたが, 眠気に負けたのでここでギブアップです.

一応Flutter少し触ったので成果物的な何かを.

英語の単語を2つ組み合わせて新しい名前を作りそれをListViewで表示するSomethingです.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80165/e5738e42-221e-40d2-daec-4ee9cf2df3e2.png)

誰かとハッカソンに出たいだけの人生だった...

寝ます.
HoloLens2のQRCodeMatcherを試してみる(実機はない)

# QRCodeMatcher

公式ドキュメント
https://docs.microsoft.com/ja-jp/windows/mixed-reality/qr-code-tracking

HoloLens2のトラッキング用カメラを使って、ドライバーレベルで動くものだそうで、広範囲の検出と省電力が期待できるらしい。
現時点で手元に実機はないので、サンプルプロジェクトをEditorで動かして、確認してみる。

# サンプルプロジェクト

https://github.com/chgatla-microsoft/QRTracking
このサンプルプロジェクトを動かしてみる。

# 動かすまで

リポジトリをクローンしてくると、Unityバージョンが、2018.3.14f1だったので、まずはそのインストールから。
インストールして当該バージョンでプロジェクトを開く。

Warningで、DepthBufferが24bitはよくないと言われるので、16bitにする。
同様に、Audio SpacializerにMSのHRTF Spacializerを使えと言われるので、それも変更しておく。

# 動かす

Editorでは、それだけでとりあえず動いた。最も、エラーなく動作しましたというだけで、機能を確認するためには実機が必要なので、だれかHoloLens2使わせてくださいお願いします。

# エミュレーターで試してみる

HoloLens2エミュレーターで動かすところまで頑張ってみる。
Unityでビルドして、できたプロジェクトをVS2019に持って行ったところ、VS2017用のビルドツールの設定になってるから、リターゲットしてと言われる。言われたとおりにリターゲットしてビルドすると、すんなり通った。
ところが、HoloLens2 Emulatorにデプロイして実行してみたが、実行途中で落ちるみたい。
やはり実機がないとだめなのか。残念。誰か、HoloLens2ください。というところで、時間切れ。
e-Stat (政府統計) のTableau Webデータコネクタを作った話

![e-stat.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30931/2f9097ef-940c-4a59-45d5-87b2fd548094.gif)

# 概要
e-Stat (政府統計)のWebデータコネクタを作成することで、政府の統計データを簡単にTableauから繋げるようにしました。
下記がWebデータコネクタのURLです。
https://arahabica.github.io/e-stat-tableau/

# e-Statって
<img width="1242" alt="スクリーンショット 2019-12-19 10.10.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30931/c0d50092-8d82-c7d5-a454-1fc67679e8a7.png">

日本の統計が閲覧できる政府統計ポータルサイトです。
GDP、国勢調査、人口動態など様々な統計が取得できます。
APIもあります。

# Tableau Web データコネクタって
<img width="792" alt="スクリーンショット 2019-12-19 10.16.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30931/3d3abce5-ccdd-e6af-565b-c4ee5b5ee6c2.png">

Tableauのjavascriptを含んだWebサイトです。
Webサイト内のjavascriptでデータ処理をすることで、Tableauにデータを登録することができます。
名前的に任意のWebサイトをスクレイピングするのかなと思いましたが、そういう訳ではないです。

# 開発
開発の手順は下記のサイトに詳しいです。
http://tableau.github.io/webdataconnector/docs/ (公式)
https://www.ricksoft.jp/blog/archives/8040/ (日本語)

基本的には下記のサンプルコードをちょこちょこ編集することで意外と簡単にできます。
https://github.com/tableau/webdataconnector

# 完成
e-StatのWebデータコネクタのURLです。
https://arahabica.github.io/e-stat-tableau/

# 使い方

実際に使用するイメージはトップのGIFのような形になります。
下記はトップのGIFと同じ手順になります。

### e-Stat アプリケーションIDを取得
こちら( https://www.e-stat.go.jp/mypage/user/preregister )からユーザ登録をするとアプリケーションIDが付与されます。
こちらをメモしてください。

### e-Stat内で目的のデータのAPIのURLを取得
e-Stat内で目的のデータを探します。
データベース(x件)と表示されている項目はAPIに対応しています。
項目一覧ページまで来ると、右側に[API]というボタンが表示されるので、こちらをクリックします。
するとAPIのURLが表示されるのでこちらもメモしておきます。

### Tableau側での操作

Tableau => 新しいデータソース => Webデータコネクタ の順にクリックします。
「WebデータコネクタのURLはここに入力してください」の欄にhttps://arahabica.github.io/e-stat-tableau と入力します。

表示されたページでe-StatアプリケーションIDとメモしたAPIのURLを入力して、OKボタンを押します。
登録ボタンが出てくるので、これを押します。

しばらくすると、Tableauにデータが読み込まれます。

# 終わりに
Webデータコネクタが登場してからだいぶ年月が経ちましたが、あまり記事になってるものは多くなかったです。
あまり使われてないんですかね。

公開されてるWebデータコネクタが増えれば便利なんじゃないの？と思って記事にしました。
["1", "2", "3"].map(&:to_i) とは何か。

色々読んで混乱したので、自分が理解するためにできるだけ一次ソースを拾いながらまとめてみました。
間違っている点等あれば、教えていただけますと助かりますm(_ _)m

## まとめ

**&をつけて渡したオブジェクト(:to_i)の`to_proc`メソッドが暗黙的に実行され、
Procオブジェクトを返し、最終的にはよく見る形になって実行されている。**

```rb
["1", "2", "3"].map{ |obj| obj.to_i }
```



## 下記の結果は同じ。
なんでこうなるの？

```rb
["1", "2", "3"].map{|v| v.to_i}
=> [1, 2, 3]

["1", "2", "3"].map(&:to_i)
=> [1, 2, 3]
```

## &は何をしているか。

mapメソッドはブロック付きメソッド。

ブロック付きメソッドの引数には、ブロックを渡す必要(※1)があるが

to_procメソッドを持つオブジェクトの前に、&をつけることでmapメソッドの引数としても渡すことができる。

つまり、**&はto_procメソッドを持つオブジェクトを引数として渡している。**

> to_proc メソッドを持つオブジェクトならば、`&' 修飾した引数として渡すことができます。
> [メソッド呼び出し\(super・ブロック付き・yield\) \(Ruby 1\.9\.3\)](https://docs.ruby-lang.org/ja/1.9.3/doc/spec=2fcall.html#block)

(※1)
ブロック付きメソッドの引数にブロックを入れた変数を渡すと、ブロックではなく引数として認識されエラーになる例。
(つまり、ブロック付きメソッドにはブロックを渡す必要がある。)

```rb
blok = Proc.new {|v| v.to_i} # ブロックをオブジェクト化したもの。オブジェクト化しないとエラーになるため。
["1", "2", "3"].map blok
=> ArgumentError: wrong number of arguments (given 1, expected 0)
```

## to_procメソッドを持つオブジェクトとは何か。

`:to_i`のこと。

```rb
# :to_iは、Symbolクラス。
:to_i.class
=> Symbol

# Symbolのインスタンスは、to_procメソッドを持っている。
:to_i.method(:to_proc)
=> #<Method: Symbol#to_proc>
```

## &をつけて、to_procメソッドを持つオブジェクト(:to_i)を引数に渡していることがわかったけど、どういうこと？？

じつは、&をつけてto_procメソッドを持つオブジェクトを引数に渡したときには続きがありまして、
暗黙的にto_procメソッドを持つオブジェクトの`to_proc`メソッドを試みるそうです。

> to_proc メソッドを持つオブジェクトならば、`&' 修飾した引数として渡すことができます。デフォルトで Proc、Method オブジェ クトは共に to_proc メソッドを持ちます。to_proc はメソッド呼び出し時に実 行され、Proc オブジェクトを返すことが期待されます。
> [メソッド呼び出し\(super・ブロック付き・yield\) \(Ruby 1\.9\.3\)](https://docs.ruby-lang.org/ja/1.9.3/doc/spec=2fcall.html#block)

**つまり、.to_procが暗黙的に実行されています。**

```rb
["1", "2", "3"].map(&:to_i.to_proc)
=> [1, 2, 3]
```

## to_procは何か。

ちょっと古いですが、わかりやすさを優先してピックアップ。
下記の通りです。

> Symbolクラスのインスタンス(つまりSymbolオブジェクト)に対してto_procメソッドが実行されると、「Proc.new { |obj, *args| obj.send(self, *args) }」というProcオブジェクトを返す、という挙動をしているよ。
[ActiveSupport\(2\) \- Symbol\#to\_proc \- バリケンのRuby日記 \- Rubyist](https://rubyist.g.hatena.ne.jp/muscovyduck/20061222/p1)

to_procが実行されると、`Proc.new { |obj, *args| obj.send(self, *args) }`というProcオブジェクトが返ってきます。

to_procはインスタンスメソッドなので、to_procが実行されたときに返ってくる`Proc.new { |obj, *args| obj.send(self, *args) }`のselfは:to_iになるので、

```rb
["1", "2", "3"].map{ |obj, *args| obj.send(:to_i, *args) }
```
となる。ちょっと、いつもと見慣れた形になってきました。

ここでは引数をひとつしか取らないから、下記になるそう(ここがなぜかはわからない。。教えてほしい。。)。

```rb
["1", "2", "3"].map{ |obj| obj.send(:to_i) }
```

sendメソッドは、引数で与えられた文字列またはシンボルに対応するメソッドを呼び出すので、

```rb
["1", "2", "3"].map{ |obj| obj.to_i }
```
となる。



## 参考

色々参考にさせていただきましたが、下記が一番わかりやすかったです。

[ActiveSupport\(2\) \- Symbol\#to\_proc \- バリケンのRuby日記 \- Rubyist](https://rubyist.g.hatena.ne.jp/muscovyduck/20061222/p1)

[Rubyのmap &:to\_iとはなんなのか \| Akashic Records](http://a-records.info/ruby-map-ampersand-colon-to_i/)
【Rails】RailsでAPIを作る`rails new  <name> --api` コマンドざっくりまとめ

## はじめに
RailsでAPIを作成するために使用する

```shell
$ rails new <name> --api
```
について、通常の`rails new`と**何が違うのか**ざっくりまとめました。

※自分用メモです。:bow_tone1:

## 環境
```yaml
OS: macOS Catalina 10.15.1
Ruby: 2.6.5
Rails: 6.0.2.1
```
## 作成コマンド

```shell
$ rails new my_api --api
```

`--api`を付けることで、APIに必要なファイルだけがインストールされる。

## 通常の`rails new`との違い
- ApplicationControllerが継承するのはActionController::APIになる。（※通常はActionController::Base)
- ブラウザ向けアプリケーションでで使われるミドルウェア（cookiesのサポートなど）
- ブラウザ向けアプリケーションでしか使われないモジュール
- ビュー、ヘルパー、アセットは生成されないようにジェネレーターが設定される
    - 例：`rails g controller home index`でビューが生成されない
- `rails g scaffold`すると、jsonを返すようにアクションが設定される



【例】

```ruby
def show
  render json: @record
end
```

## おわりに
最後まで読んで頂きありがとうございました:bow_tone1:

## 参考にさせて頂いたサイト（いつもありがとうございます）
- [Rails による API 専用アプリケーション - Railsガイド](https://railsguides.jp/api_app.html)
プログラムの仕様を税金の申告書風にしてみた

計算式をインタープリタとして動作させる処理で、クセをどのように表現したら見やすいか、わかりやすいか、と頭を絞っていたときに思いついたものです。
このケースでは、あの動作で・・・という組み合わせ。税務申告書を書いていたら、似ている！！と気づいたときのものです。

あの複雑な税務計算を、あくまで義務教育の算数から足し算と掛け算だけで算出が可能・・・という【仕様制限】の中で行えるように知恵を絞られたものが税務申告書だということに気付いたのです。



![比較演算子の動作を申告書風にしてみた_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374317/26900131-1a15-390c-12de-5546ee93158d.png)
![比較演算子の動作を申告書風にしてみた_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374317/e163d878-ddd4-a7ad-37db-b3434bf3f49b.png)
![比較演算子の動作を申告書風にしてみた_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374317/c01d8c6f-75c0-ae3d-ba29-e39e9d633050.png)
C#9.0で提案されてる気になる6機能ピックアップ【前半】


# 最初に

本記事はC#9.0に関する情報を自分なりにまとめて書いたものとなります。

普段C#をメインで使用している人もUnityを使ってゲーム開発している人にも、これからのC#に関する予習となれば幸いです。

あとこれアドカレ記事なんですが、完全に遅刻してます、すいません。

↓後半は以下から↓
https://qiita.com/4_mio_11/items/962ed9839019c799e6ba

# C#9.0について

 現在C#9.0はまだまだ計画段階であり、現在35の機能提案が行われています。

以下でC#の言語機能の提案・計画を確認することができます。

[csharplang/projects](https://github.com/dotnet/csharplang/projects/4#column-4899858)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/cd98d953-c39c-6222-be77-8a76576e485a.png)



全てがC#9.0に確実に入るというわけではないのですが、この中でもいくつか気になる機能の方をピックアップして軽く紹介したいと思います。

ざっくり下記の機能について見て行きます。

- Records【前半】
- Discriminated Union【後半】
- null合体演算子での暗黙的変換【前半】
- 開発者向けへの警告【後半】
- 配列作成時における型の省略化【後半】
- 引数のnullチェック簡略化【前半】



このほかにも細かな構文の変更が提案されていますが、それは追々リリースされてからで…。



## Records

インスタンスが保持しているデータの一部を変更したものを、新しく作成して差し替えることができるようになります。（https://github.com/dotnet/csharplang/blob/main/proposals/csharp-9.0/records.md)

```c#
class Point3D
{
  public readonly float X;
  public readonly float Y;
  public readonly float Z;
  public Point3D With(float x = this.X, float y = this.Y, float z = this.Z) => new Point3D(x, y, z);
}
```

```c#
var p = new Point3D(1.0, 2.0, 3.0);
p = p.With(x: 4.0);
```

ここで新しく`With`というキーワードが出てきました。`readonly`なプロパティを書き換えられるこの`With`というメソッドは、オーバーロードによる解決でプロパティの変更差し替えを可能にしているみたいですが、この辺は本実装されてからぼちぼち確認していきたいです。



## null合体演算子での暗黙的変換

`T t = e1 ?? e2`にて`t`と`e1`と`e2`と型が異なる際に、`e1`又は`e2`を`T`型へ暗黙的に変換を行います。

（https://github.com/dotnet/csharplang/issues/2473)

```c#
void Test(List<int> list, uint? u)
{
  IEnumerable<int> x = list ?? Array.Empty<int>();
  long l = u ?? -1;
}
```



## 引数のnullチェック簡略化

引数の値がnullとなっているかどうかのチェックを簡略化することができます。

（https://github.com/dotnet/csharplang/issues/2145)

```c#
// これまでの書き方
void Test(string s)
{
  if(s is null)
  {
    throw new ArgumentNullException(nameof(s));
  }
  ...
}

// C# 9.0で提案されている書き方
void Test(string s!)
{
  ...
}
```

ただこちらの機能はなかなか賛否両論となっている印象です。このnullチェックの簡略化のためだけに引数名最後に`!`をつける構文を使用してしまうより将来的に他のことで使ったほうがいいのでは　という意見が特に目立ってるような…。



# 参考

- [C#9](https://medium.com/@alugili/c-9-cef7d6b04ab5)
- [ピックアップRoslyn: C# 9.0での、パターン、records、switch、null チェックの改善](https://ufcpp.net/blog/2019/12/pickuproslyn1221/)
MusicFMを潰したい高校生の話。〜動的解析でわかったこと〜

##あらすじ
クラスでこんな会話をよく耳にします。

「〇〇の新曲リリースされたらしいよ」
「まじ？MusicFMにあるかな」
「通信制限やばいからwifiつないでダウンロードしとこ」

MusicFMやmangabankなどの海賊版サービスは、もはや中高生の生活に必要不可欠です。ネット上ではここまで著作物がルーズなのかと高校生ながら危機感を感じました。僕が大好きなMr.childrenやスピッツの楽曲もダダ漏れ。
よし、MusicFMを潰そう。

##動作環境
iPhone8 ios12.1
App名: Music HD デベロッパ: Xu Yingqi
Ubuntu 18.04.3

##iPhoneの通信をパケットキャプチャ
iPhoneの通信をPCでキャプチャするには、iPhoneネットワークデバイスを仮想ネットワークインターフェースとしてPCに設定します。

rvictlコマンドをlinuxで実装してくれるツールを発見したので今回はこれを使います。
rvi_capture.py: https://github.com/gh2o/rvi_capture

Wiresharkも一緒に使えるし神ツール。

` $ ./rvi_capture.py --[iPhoneのUDID]`
基本これだけでキャプチャして.pcapで書き出してくれます。

##パケット解析
アーティスト名を検索して曲を再生する一連の動作をキャプチャしました。
おなじみのWiresharkで見ていきます。
![Screenshot from 2019-12-24 23-48-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555310/3eec6dde-c219-1bfc-2f1d-507629bc32a0.png)
プロトコル別に見てみると、TCPがほぼ全部を占めていました笑　一目瞭然。

ここでhttpに絞って見てみると
![Screenshot from 2019-12-24 23-59-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555310/bdf142da-c5bd-fe8a-b523-a37655db5a45.png)
「Mr.children」と検索したときや、楽曲データベースがあるサーバーとはhttpで通信していることがわかりました。ちょっとずつ見えてきたぞ？
![Screenshot from 2019-12-25 00-03-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555310/fa49378b-dea7-21b7-a232-32372a03ae0e.png)
すると、明らかに怪しいリクエストをしてるパケットを発見。追跡してみる。
![Screenshot from 2019-12-25 00-05-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555310/c11ff26a-9468-8c0d-ab60-296507f90730.png)
レスポンスされたURLに.mp3って書いてある。さっそくアクセスしてみました。
![Screenshot from 2019-12-25 00-11-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555310/c003f45e-4cc1-abf9-1d12-166b36e020fe.png)
流れたー！！！！(　 Д )　ﾟ　ﾟ
##結果
- IPむき出しのサーバー(115.28.252.235)に曲情報のリクエストが送信され、レスポンスに別のDBサーバー(win.web.ra01.sycdn.kuwo.cn)にあるURLが返ってくる仕組み
 - MUSIC_0000000という形で保存されている
 - http://115.28.252.235/kuwo/geturl.php?id=MUSIC_1182892
　

- win.web.ra01.sycdn.kuwo.cnが楽曲のデータベースサーバー
- 他にもmusic.musicnewtree.com,search.kuwo.cn,player.kuwo.cnと通信

##Whois情報
ドメイン名から中国にサーバーがあることはわかりますね。調べる前からそんな気はしてました。

```Whois.国と組織名
- music.musicnewtree.com 
    country:US
    org:ORG-LL198-RIPE
- search.kuwo.cn
    country:CN
    descr:Shanghai Yovole Networks Inc.
- player.kuwo.cn
    country:CN
    descr:21ViaNet.inc
- 115.28.252.235
    country:CN
    descr:Aliyun Computing Co., LTD
- win.web.ra01.sycdn.kuwo.cn
    country:CN
    descr:hangzhou huoyou inc.
```
中国のクラウドコンピューティング系の企業が多いですね。
肝心のwin.web.ra01.sycdn.kuwo.cnの組織は調べても出てきませんでした。おそらく架空の企業でしょう。

##まとめ
一番の目的である音源のDBサーバーを見つけることができました。
通信しているサーバーが全てSSL化されていなかったことが救いです。
MusicFM系のアプリは他にもたくさんリリースされているので、また調べるつもり。
もしアプリ関係なくDBサーバーが同じだとわかれば大きな進展ですね。

こういうのは公の機関に報告すれば対応してくれるものなんでしょうか...?

違法海賊版サービスが絶滅し、売上がアーティストに還元されるクリーンな音楽サービスが一日でも早く来ればいいと思ってます。
SeleniumとBeautiful Soupのよく使うメソッド

SeleniumとBeautiful Soupのコーディングでいつも迷うので自分用にメモ。
jQueryも載せておく。

# 環境
- Python 3.7.4
- selenium 3.141.0
- beautifulsoup4 4.8.0
- requests 2.22.0

## pip
```cmd
pip install requests
pip install beautifulsoup4
```


# Selenium (Python)
```python
# 初期化
from selenium import webdriver
driver = webdriver.Chrome()
url = 'https://qiita.com/users'
driver.get(url)

# 一つのエレメント取得(css selector)
element1 = driver.find_element_by_css_selector('.UsersPage__header')
# テキストの取得
print(element1.text)

# 複数のエレメント取得(css selector)
elements = driver.find_elements_by_css_selector('.UsersPage__user')
for elem in elements:
    # 属性の取得
    href = elem.find_element_by_tag_name('a').get_attribute('href')
    print('{}<{}>'.format(elem.text, href))
    
driver.quit()
```

# Beautiful Soup (Python)
```python
# 初期化
from bs4 import BeautifulSoup
import requests
url = 'https://qiita.com/users'
resp = requests.get(url, headers={'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36'})
# resp.encoding = resp.apparent_encoding # 文字化けする場合は追加
html = resp.text
soup = BeautifulSoup(html, 'html.parser')

# 一つのエレメント取得(css selector)
element1 = soup.select_one('.UsersPage__header')
# テキストの取得
print(element1.get_text())

# 複数のエレメント取得(css selector)
elements = soup.select('.UsersPage__user')
for elem in elements:
    # 属性の取得
    href = elem.find('a').attrs['href']
    print('{}<{}>'.format(elem.get_text(), href))
```

# jQuery (JavaScript)
```Javascript
// 初期化
location.href = "https://qiita.com/users";
var s=document.createElement("script");
s.setAttribute("src","https://code.jquery.com/jquery-2.2.4.min.js");
document.body.append(s);

// 一つのエレメント取得(css selector)
const $element1 = $(".UsersPage__header");
// テキストの取得
console.log($element1.text());

// 複数のエレメント取得(css selector)
const $elements = $(".UsersPage__user");
$elements.each(function(i,elem) {
  let $elem = $(elem);
  // 属性の取得
  let href = $elem.find("a").attr("href");
  console.log(`${$elem.text()}<${href}>`);
});
```
【クソ記事】俺ガイルの玉縄くんがロジカルシンキングで論理的なアドバイスをしてくれるslackbotを作った。

## 初めに
今回は皆さんの悩みを解決するbotを作りました。
このslackbotがあれば生活水準が格段に上がること間違いないでしょう。
(この記事は作者の独断と偏見で作られていますのでご了承ください。)
## 解決しようと思った課題
皆さん、今日は暇で何をすればいいか分からない。逆に忙しすぎて何から手をつけていいのか分からない。そういった経験はありませんか。おそらくこのような経験をしている人は多いことでしょう。
特に忙しすぎて何から手をつけていいか分からくて、考えていたら1日が終わっていたなんて日常茶飯事でしょう。
ということで今回はそういった問題を解決することにしました。
## 解決方法
俺ガイルの玉縄くんがロジカルシンキングで論理的なアドバイスをしてくれるslackbotを作る。
ここはタイトル通りです。
玉縄くんが誰かという人は俺ガイルのアニメを見るか、下の記事を見ましょう。
https://matomame.jp/user/FrenchToast/b53120d3499f5abff7fd?page=1
要は僕たちと違ってロジカルシンキングで論理的な考え方をできる人です。
彼にアドバイスをもらえるようにすることで、上記の問題を解決します。
今回はslackBotにしました。
## 完成品
<img width="685" alt="スクリーンショット 2019-12-25 1.29.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255216/ce4e63bb-1782-bba5-a485-4b1b789690bf.png">
見ての通り、何をしていいか分からない僕に対して素晴らしい助言をくれました。
とりあえずブレストを重ねて結果にコミットすればいいわけですね。
スケジュールをクラウドで共有するなんてまさにロジカルシンキングで論理的なアドバイスです。
さらに暇なときにアドバイスを求めてみると、、
<img width="571" alt="スクリーンショット 2019-12-25 1.32.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255216/4e5426e9-a48e-b78f-337c-c99d14a73bbb.png">
なるほど。クリエイティビティな部分についてディスカッションすればいいわけですね。
このように僕の悩みを見事に解決してくれました。
## コードと参考記事
ほぼ下記の記事のコードをコピペしました。
slackbotの作り方については下記の記事を見れば5分でできます。
https://qiita.com/nekonekonekoe/items/b39cc763945bdcef35fb

```ruby
require 'slack-ruby-client'
  array = [
    "そろそろ次の会議のアジェンダを確認しないとね。",
    "スケジュールはクラウドで共有してもいいよね。レジュメもアップしておいた方がいいか",
    "じゃあブレストを重ねて結果にコミットしよう。",
    "それぞれのタスクのプリオリティを考えた上で優先順位をつけていくべきだね。",
    "ブレインストーミングをやっていこうか。ロジカルシンキングで論理的に考えるべきだよ。",
    "ビジョンを共有すれば、もっと一体感を出せると思うんだ。",
    "今日はもっとクリエイティビティな部分についてディスカッションしていこう。"
  ]
  Slack.configure do |conf|
    conf.token = 'slackbotのapikey'
  end

  # RTM Clientのインスタンス生成
  client = Slack::RealTime::Client.new

  # slackに接続できたときの処理
  client.on :hello do
    puts 'connected'
    client.message channel: 'channelのapikey', text: 'やあ、こんにちは'
  end

  # ユーザからのメッセージを検知したときの処理
  client.on :message do |data|
    key = rand(5) - 1
    if data['text'].include?('何をすればいいか分かりません。')
      client.message channel: data['channel'], text: array[key]
    end
  end

  # Bot start
  client.start!
```
## 終わりに
自分としてはグローバルでCommonなproblemをsolutionできるBotができたのではないかと満足しています。
皆さんも是非使ってみてください。
kintoneとのAPI連携でつまづいたこと


##はじめに##
<a href="https://qiita.com/advent-calendar/2019/ielove">いえらぶAdventCalendar</a> の23日目です。

初めてこういう記事を書くので温かい目で見ていただけると嬉しいです。

今回の記事は、私が開発していたkintoneへのAPI連携のところでつまづいたところをまとめていきます。

今までkintoneは一切触ったことありませんし、社内でも使ったことがないツールです。
手探り状態で開発を進めていましたが、開発すればするほど、よく分からないエラーがでてきてたくさんつまづきました。
今振り返るとなんでこんなところに引っかかったのか、と思うのですが、私のつまづいたところが、これから開発する方の参考に少しでもなればいいなあと思います。

ちなみにですが、kintoneの画面上の操作は一切できませんし、設定とか権限とか操作の方法は分からないので、その辺のことは<a href="https://jp.cybozu.help/k/ja/index.html">kintone ヘルプ</a>をご覧ください。

では早速いきます。


##kintoneとは##
<a href="https://kintone.cybozu.co.jp/">こちら</a>を見たら早いと思います。
簡単に説明すると、自社の業務に合わせてカスタマイズできる業務支援ツールです。

##何をやったか##
自社サービスに入ったデータをバッチ処理で、クライアントのkintoneへ登録・更新するための開発を行っていました。

###kintone API##
これに関してもAPIについてまとまった記事がありますので、<a href="https://developer.cybozu.io/hc/ja/articles/360028177472">こちら</a>を見ていただければと思います。

今回は<a href="https://developer.cybozu.io/hc/ja/articles/360000313406">kintone REST API</a>を使って開発しました。
言語はphpです。

##つまづいたこと##

###その1　どうやって連携するの###

kintoneはじめてかつAPI連携はじめて開発するので、正直びびってました。
が、方法は簡単に見つかりました。

####連携の方法####
kitnoneへ登録・更新をするには、「APIトークン認証」もしくは「パスワード認証」で行います。
自社ではkintone使っていないので両方を作成してもらいました。

違いを簡単に説明すると、

- APIトークン認証<br>
・・・アプリごとに生成でき、そのアプリだけに処理できる。
- パスワード認証<br>
・・・ルックアップフィールドの登録（ルックアップキーというのがあって、それを指定するだけで他のアプリからデータ取得してきて登録とか更新とかしてくれる）のような、他のアプリが関係してくるときに処理できる。

こんな感じでとらえてます。
私は、1つのアプリだけに書き込むときはAPIトークン認証、ルックアップフィールドへの登録・更新が関わってくるときはパスワード認証のようにしてました。他のアプリに影響しないよう念のためです。
基本はパスワード認証でもよかったのかなあとは思っています。


###その2　アプリへ登録ができない###
アプリへあるデータを参照したり登録したりしようとしていたのですが、
*権限がありません。*
というエラーが出ました。が、すぐ解決しました(-_-;)

####原因####
使っていたAPIトークンに権限がありませんでした。

####解決方法####
作成していただいたAPIトークンに、

- レコード閲覧
- レコード追加
- レコード編集

の3つの権限を追加していただきました。
この後の開発中にも、権限によってエラーになっているのもあったので、まずは権限がきちんと付与されているか確認したほうがいいかもしれません。

###その3　ルックアップの参照先から値をコピーできません。###

仕様の相談も必要だっため、これが一番解決に時間が掛かった部分です。

ルックアップキーを指定して、ルックアップフィールドの値を登録しようとすると、以下のようなエラーが出てきてしまいました。

*ルックアップの参照先から値をコピーできません。「コピー元のフィールド」に指定したフィールドの設定で「値の重複を禁止する」を選択しておく必要があります。*


####原因####
ソースコードを追ってみても、明らかに登録のところでエラーが出ていました。

やはり原因はエラー文にもある通り、ルックアップ先のフィールドの設定で「値の重複を禁止する」を設定する必要がありました。

そもそもルックアップをするためには、

- ルックアップキーに指定した値がルックアップ先のフィールド内で重複しないこと
- ルックアップキーに指定したフィールドの設定で「値の重複を禁止する」を選択している。

この2つの条件を満たしていることが必須です。

ルックアップキーに指定されているフィールドがアプリ内で重複しており、また値の重複を禁止するの設定もされていなかったので、エラーが起こっていました。

####解決策####

- ルックアップキーが重複しないようにルックアップキーを変更
- フィールドの設定を、「値の重複を禁止する」に設定

以上2点を相談し、設定を行っていただきました。

他にも方法はあったかもしれませんが、今回は重複しないフィールドを作っていただくことで解決できました。
もともと重複しない値がルックアップキーに設定されていればフィールドの設定だけでよかったですが、そうではない場合もあるかと思いますので一応参考にしていただければと思います。

##まとめ##
ソースコードを1つ1つ追って解決していくのも大事ですが、それによって何が原因なのかわからないループにはまったこともありました、、、。
アプリやフィールド、APIトークンなどあらゆるところに権限や設定ができるようなので、どうしても解決できないときは確認してみることをオススメします。

間違っている内容があれば、ご指摘いただければ幸いです、、、。

※また思い出したら追記するかもしれないです。
クリスマスハッカソン参加記&制作物紹介

## これはクリスマスワンナイトハッカソン参加記および作品紹介です

# 眼鏡っ娘と写真旅行
僕は眼鏡っ娘と写真旅行にいきたいです。勇気が出ないので一人で行っています。来年はいけるといいね  
そんな願いも込めて、チーム名は「眼鏡っ娘と写真旅行」にしました。

---
## メンバー
Lock - [Twitter](https://twitter.com/LockDef)
nanigasi_san - [Twitter](https://twitter.com/nanigasi_san), [いいえ](https://twitter.com/nanigasi_3)

## 制作物紹介
さっきまでカラオケで大熱唱していたので、何も話し合っていませんでした。帰りの電車で「眼鏡っ娘がクリスマスイベント教えてくれる奴作りたい」とLockが言い出したので、それを作ることにしました。

内容としては日本でやっているクリスマスイベントをランダムに選んで、それを眼鏡っ娘におススメされるので断らざるを得ないという天才Webアプリです。

仕組みはめちゃくちゃ簡単で、拡張性のためにAPIサーバーとページ表示のサーバーがわかれていますがそんなくらいです。
![onenight_hack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322161/30941f4f-3dcb-3603-94ac-e7b116cd9a99.png)

---

## 実際の様子
こんな感じです

![](https://media.discordapp.net/attachments/657492467951599637/659068447833194565/unknown.png)

楽しいね


---
## 感想
大体3時間で完成したので(Lockが帰宅したのが23時なのも原因の一つなのですが)、まぁサクッと作れてよかったなと思いました。簡単なWebアプリをつくる技術があることが分かったので、もう充分です。寝ていい？もういますごい眠い。カラオケ万歳
次回あったらまた参加する～～～

## リンク
[作品](https://onenighthackathon.netlify.com/)
[APIサーバー - GitHub](https://github.com/nanigasi-san/onenight_hack)
[フロントエンド - GitHub Gist](https://gist.github.com/Lockdef/464d20c97f00c6f12a9756f130ca7c38)
TOPPERS賞のモデルが出来るまで

はじめまして！
アドバンストクラス「がんちゃん＋X」から、企業名非公開の組織より参加していました松本と申します。昨年度の大会ではCS大会総合準優勝、今年度のCS大会では総合4位とTOPPERS賞を受賞しています。
この記事では、どのように今年のTOPPERS賞モデルが出来たのかをご紹介します。
来年度以降で参加される皆さんに少しでも参考になれば幸いです。

#そもそもTOPPERS賞とは
公式HPの[表彰内容](https://www.etrobo.jp/award/)に詳細が記載されています。
ETロボコンを含めて年に２つしか授与されない表彰とのことです。

#なぜ「がんちゃん＋X」がTOPPERS賞に選ばれたか
公式HPの[【チャンピオンシップ大会】表彰チーム公開！](https://www.etrobo.jp/2019cs-award/)に詳細な受賞理由が記載されています。
モデル書いた本人もここまで高い評価を得られるとは思っておらず大変光栄です。

#TOPPERS賞のモデルが書けた理由
[表彰内容](https://www.etrobo.jp/award/)に記載されている通り、TOPPERS賞の審査は設計モデルに重点が置かれています。他のチームと比べて、当チームの設計モデルにおける強みを分析しました。

- 競技用のソフトを実際に作っている人がメインで書いている
タスクの振る舞いやシーケンス図は、実際に実装している人にしか上手く書けないと思います。
チームによっては実装とモデル作成が担当別に分かれているかと思いますが、常日頃から議論して設計を進めることが大事です。

- 設計方針を早期に立てた
審査規約が出た直後の５月には設計方針に着手して完成させていました。この時期に早期に立てておくことでその後の、詳細設計や実装を詳細に実施することが出来ました。

- 過去の事例を研究した
異常処理や代替処理については、過去の大会での競技で失敗したチームの競技内容を分析し、思いついたものを記載しています。過去大会の動画はyoutubeにアップされていますので、参考にしていました。また、当チームは過去の大会や試走会で多くの失敗を経験したので、その内容から書くことができました。

- モデルの配置・配色を専門にするメンバーがいた
モデルシート１枚には多くの情報を詰め込まなければなりません。複雑な情報が整理され見やすく記載されているかは、審査に影響します。特に設計モデルのクラス図のようなUMLでは、クラスと関連の線を整理するだけでも多くの工数を取られてしまいます。当チームにはその作業を専門で実施するメンバーがいたため、見やすさの向上を実現することができました。

#「がんちゃん＋X」でのモデル作成のやり方
がんちゃんの連携チームは、2017年の東北地区大会で個人１人参加の私が地区ゴールドモデルを取ったことで、岩手大学の先生からお声がけ頂き、大学生＋社会人エンジニアの体制で2018年,2019年の大会に出場することになっていました。毎年の活動は３月からCS大会までの毎週土曜に実施していました。

学生の皆さんには、モデルのような設計書は書いた経験がほとんどないため、当初は大変苦労しました。しかし、毎週土曜にモデルレビューを行い、過去モデルを精査することにより、学生の皆さんのモデルに対する理解力が向上しました。地区大会の提出直前の時期には平日にもかかわらず学生同士で、自主的にモデルレビュー会を開催し改善点を詳細に書き込んだ成果物を出してきて、改善提案をしてくれました。そのような取り組みのおかげで、CS大会の上位チームレベルのモデルを書き上げることが出来ました。

良いモデルを書くにはチーム内レビューを繰り返し実施することが重要です。

#CS提出モデルの修正版
当チームがCS大会向けに提出したモデルを、後日見直したところ初歩的な記載ミスが複数発見しました。今年は締め切り前に駆け込みで多数の記載を修正したこともあり、レビューによる指摘が追いつきませんでした。
TOPPERS賞を獲得したモデルとして、来年以降の参考モデルとして閲覧されるのが恥ずかしいことあり、この投稿をお借りして審査コメントも踏まえてモデル全体を修正したものを投稿します。

1. アブストラクトシート
![アブストラクト_ver3.1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546950/6ebf489b-c403-8646-b85b-36fecac831f6.jpeg)
2. 要求モデル
![要求モデル_ver11.6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546950/27c5b04f-5cbd-235b-dfce-ef734dc2d095.jpeg)
3. 分析モデル
![分析モデル_ver6.0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546950/747a934c-e99a-0138-fb8d-4b5337ef8706.jpeg)
4. 設計モデル(１枚目)
![設計モデル_ver20.8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546950/4f4cba95-efc7-6e72-877a-a50386f8686b.jpeg)
5. 設計モデル(２枚目)
![設計モデル_ver20.8１.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546950/db5b2ff2-16ec-aab8-8d01-1f2636622700.jpeg)
6. 制御モデル
![制御モデル_ver4.22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546950/bbd8edb0-603c-6182-0806-20704f704093.jpeg)

#来年以降について
個人的な話ですが、私は競技者を卒業して、東北地区実行委員にステップアップし、地区全体のレベルアップをさせることが次の目標です。
岩手大学から出場するがんちゃんチームは、新たな体制で来年の大会に挑みます。これまでの主要メンバーも卒業してしまうので、弱体化することが懸念されているのですが手は打ってあります。来年以降も引き続き全国の頂点を目指して頑張って欲しいです。
【HTML】全体像

```HTMLおおまかな全体像.html
<!DOCTYPE html>
<html>
  <head>
    Webに表示されない
  </head>
  <body>
    h1要素とかp要素とかWebに表示したいものをここに記入
  </body>
</html>
```

おおまかに説明するとまず
<!DOCTYPE HTML>
が一番最初に記入されている。

そして親要素の html 要素のなかに
子要素の head 要素と body 要素がある。
head 要素と body 要素の簡単な違いは

head・・・Webに表示されない
body・・・Webに表示される

この body のなかに h1 要素や p 要素を記入していく。
では他にはいったい何を記入していくのか？
それを下記にて説明。

## !DOCTYPE HTML
:sunny: HTMLのバージョンを宣言する（<!DOCTYPE HTML>はHTML5の宣言方法）
:sunny: HTMLを記入するときに**一番最初に必ず記入**する。
　 記入しないと、レイアウトが崩れたり表示されない場合がある。

## html
:sunny: この文書はHTMLで作成されていますよーという宣言
:sunny: HTMLを記入するときに**必ず記入**する

## head
:sunny: Webページの設定に関する情報を記入
:sunny: 文字コード、ページタイトル、読み込み先のCSSファイル名　の３つを必ず記入する
:sunny: Webには表示されない

```例.css
  <head>
    <meta charset="utf-8">
    <title>タイトルだよーん</title>
    <link rel="stylesheet" href="CSSのファイル名.css">
  </head>
```

### meta charset="utf-8"
:sunny: 文字コードを指定する
:sunny: 文字コードを指定することで文字化けを防ぐことができる
:sunny: UTF-8は、HTML5で推奨されている文字コード

### title
:sunny: ブラウザのタブの部分に表示される。
<img width="178" alt="スクリーンショット 2019-12-25 1.07.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/ba5b7069-cf04-545d-7bf4-abf64247948b.png">

### link rel="stylesheet" href="CSSのファイル名.css"
:sunny: どのCSSファイルを読み込むかを指定する

- link rel="stylesheet"・・・CSSファイルを読み込みますよー
- href="CSSのファイル名.css"・・・読み込むCSSファイル名はこのファイル名ですよー