OmniAICreator/Qiita-1.07M huggingface dataset:
デイトラ　Web制作コース初級編　DAY1〜9

DAY1〜9ではHTML、CSSの基礎・コーディングの練習を行いました。
重要だと思った部分を整理していきたいと思います。

#上手な質問の仕方
コーディングの話ではないですが、とても重要な部分でした。

**自己解決能力
正しく情報を伝えることにより手助けをしてもらい素早く解決する能力**

がエンジニアにはとても重要です。

どの職業でもそうですが、質問をすることは他人の時間を奪うことなので、まず自分で調べてそれでも分からない場合は問題を分かりやすく伝え、素早い解決に繋げることが双方にとって大切です。

だからと言って分からないことは分からないですし、質問することにより質問された側の勉強になることもあるので上手な質問の仕方を今のうちに身につけることが重要です。

デイトラでの質問点は今のところ過去の回答を見ることによって解決できています。

#marginとpadding
marginは外側の余白
paddingは内側の余白

なのは分かりますが、使い分けについてはまだ難しい部分が多いので
その都度使用する理由を考えていきます。

#VS CodeのLive Server
デイトラをはじめる前もVS Codeを少し使っていましたが、
**Live ServerというHTMLやCSSファイルの更新をライブプレビューできるようにするプラグイン**は初めて知りました。

ファイルを編集すると同時に変更が反映するのでとても楽です！

#Emmet
Emmetについてはデイトラをはじめる前も知っていましたが、そこまで重要なものだという認識はしていませんでした。
ですが**コーディング速度を上げる、タイプミスなどを減らす**意味でもとても重要なので、はじめのうちから使用することが大切です。

#float
「floatさせたら親要素の高さが0になってズレる」
？？？です。

float=浮く

ブロックの構成から浮いてしまう=下の要素が詰まってしまいます。
なのでCSSの共通部分に書いてクリアにします。

☆
・擬似要素afterかbefore使う
・contentという空要素
・display:block
→clearをつけた要素の後にリセットされる
（afterはこの要素の終わりの直前に入る）（beforeはこの要素の始まった直後）
HTMLはfloatする部分の親要素のclass名に付け加える

```css
.clear::after{
    content:"";
    clear: both;
    display: block;
}
```

```html
<div class="floatする部分の親要素のclass名 clear">
```

なかなか難しいですね笑

#Flexbox
[日本語対応！CSS Flexboxのチートシートを作ったので配布します]
(https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)
印刷して手元に置いて復習します。

#お問い合わせフォーム
```html
<form action="移動するページのURL" method="POST">
<input type="email" name="email" id="email">
<button type="submit"></button>
</form>
```
・お問い合わせフォームはmethodがPOSTが一般的
・typeは表示されるテキストフィールドの種類を指定
・nameはPHPなどで入力された値を送信する際に必要
・idはCSSやJSでタグを指定する時に必要（label for""に合わせる）　
・buttonのsubmitでサーバー側や別ページに送信することができる

#まとめ
コーディングする上で重要なことは
**HTMLを書き上げてからCSSをあて調整する**

HTMLを書く際は
**完成形をイメージ・スタイルの当て方を考える・レスポンシブも見越す**

設計図がなければ家は建てられないです。
この点を意識してコーディングすることが重要です。

#さいごに
まだはじめたばかりですが、
デイトラをスタートしてから以前の完全独学からの軌道修正がかなりできています。
また、勉強を継続する習慣がついてきました。
一人でコーディングは現状難しいので、どれだけできるようになるか今後が楽しみです！
[CSS] 画像の縦横比を維持したまま拡大縮小(リサイズ)する

```
img {
  width: 300px;
  height: 300px;
}
```

このままではリサイズしたい画像が横や縦に伸びてしまう場合があります。
画像の縦横比を維持したままリサイズするには
`object-fit: cover;`
を先ほどのCSSに追加してあげましょう。

```
img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}
```


画像は、縦横のうち小さい方を基準にして自動で拡大・縮小されて、はみ出した部分は切り取られます。また、中央の位置で切り取られます。
（`object-position: 横の位置 縦の位置;` で切り取る位置を指定することもできます。）
2020年に使った技術

うなすけ氏が書いてるのを見て、自分もやってみようかなと思いました
（フロントエンド、サーバーサイドエンジニアとか関係無しに個人的なものとして）

参考：https://blog.unasuke.com/2020/wrap-up-my-coding/

# Application

- frontend
    - Vue.js
- backend
    - python, Flask
    - java, Spring Boot
- other
    - Docker
    - Kubernetes

Vue.js, python, flaskは去年からずっと利用しているが、java, Spring Bootはつい最近触り始めた。
今のところ雰囲気でなんとかなっているが、ちゃんと勉強しとこうかなぁというところ。
Dockerも前から触っていたがkubernetesは今年になってちゃんとやった。

# Cloud (GCP)

- computing
    - GAE (Google Application Engine)
    - GKE (Google Kubernetes Engine)
    - GCE (Google Compute Engine)
    - Cloud Run
    - firebase
    - Container Registry
- DB / storage
    - datastore
    - BigQuery
    - Cloud SQL
    - realtime database
    - Cloud Storage
- network
    - Pub/Sub
    - Cloud Endpoint
    - Cloud Tasks
    - Cloud Load Balancing
    - Cloud DNS
- monitoring
    - Stackdriver
    - Cloud monitoring
- other
    - Cloud workflow
    - secret manager

GCPばかりいじっていた。やってるプロダクト、プロジェクトにも深く関わるのが大きな要因だが、couseraの学習コースとかでも触る機会が多かった。仕事だとGAEがメインだったが、cousera上ではGCEを作ったり消したりを繰り返していた。あとは新しく出たサービスが気になって動かしてみたものもある。
去年と比べるとネットワーク周りの設定を行ったり、GKEをガッツリさわった。
なお今年AWSは触らなかった模様。

エディタの話は以下に書いたので割愛。
https://qiita.com/woody-kawagoe/items/2ab0226dd325bba5681b

# 感想

GCPばかりやってて他に書く技術記事無えなぁと思いつつ過ごしていたけど振り返ってみると本当にGCP関連しかしてないことがわかってきた。仕事でかなり使うというのもそうだけど、新しいサービスが日々出るので気になるところであった。それとたまたま仕事でGKE触る機会ができたのも良かった。別にインフラエンジニアやってるわけではなくwebアプリ開発の方が主の業務なのだが、技術的な興味の向き先がどっちかというとインフラよりなのかもしれない。来年はkubernetes周りとかネットワークとかもっと汎用性のある記事かけたら良いなーと思う。
HoloLens2はじめの一歩～buttonを出そう～

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650145/0f4efbff-59c2-f847-eefd-efc33b63846a.png)
こんにちは。
こちらはHoloLens Advent Calender 2020の18日目の記事です。

12月11日我が家にピカピカのHoloLens2✨がやって来ました。

ここ１週間くらいはチュートリアルをしたりして、遊んでいましたが
開発にもチャレンジしたいと思います(*^^*)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">HoloLens2のチュートリアルほんとにすき <a href="https://t.co/UY6xxDgBRt">pic.twitter.com/UY6xxDgBRt</a></p>&mdash; 🌼ブブ (@sbubu12) <a href="https://twitter.com/sbubu12/status/1337804767985188865?ref_src=twsrc%5Etfw">December 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

基本的なことになりますが、
prefabのpressable buttonをbuildするところまでを記事にします。
##HoloLens2でbuttonをbuildしよう

◇環境
Unity 2019.4.0f


Unityの3Dprojectを作成します。
作成したら、File>Build SettingsからUniversal Windows Platformにswitch platformします。
次に
[GitHub](https://github.com/Microsoft/MixedRealityToolkit-Unity/releases)からMRTKをダウンロードします。
Microsoft.MixedReality.Toolkit.Unity.Foundation.〇.unitypackageをダウンロードしてください。
他のMRTKもダウンロードする場合には、同じバージョンのものにしないとエラーになります。
設定を続けます。

次に
画面上部のUnityメニューでMixedRealityToolKit>Add to Scene and Configure..の順に選択して
MRTKを現在のシーンの追加します。
HierarcheでMixedRealityToolkitをタッチして、InspectorのMicedRealityToolkit構成プロファイルを
DefaltHoloLens2ConfigurationProfileに変更します。
![hololens2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650145/8eadba7b-7a38-e210-3a9e-98af421b1566.png)
ProjectSettingsで、Player>XR Settingsの順に選択し、＋をクリックします。
Windows Mixed realityを選択します。これを忘れると、
buildしたときにHoloLensにprojectがブラウザの形式で
表示されるようになってしまいます。（私これやった）


Assetから　PressableButtonHoloLens2を選択して、Sceneにドラッグ＆ドロップします。
「Pressable」で検索するとみつけやすいです。
再生するといらっしゃいます。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650145/1b1852aa-2a4a-b00d-940f-9114101104cc.png)
見つからないときは、SキーやWキーで動いて、探してみてください。

build作業に移ります。
buildは公式の[こちら](https://docs.microsoft.com/ja-jp/windows/mixed-reality/develop/unity/tutorials/mr-learning-base-02)の説明を参考にしてみてください。


buttonを自分の目の前に出現させることができました。
buttonを押したら、紙吹雪がSetActiveTrueになって自分をお祝いしたかったのですが
どこで発動しているのかわからず！
玄関でbuildしたときは、zを2にしてみたのですが、壁の奥にいました。
位置設定の感覚をこれからつかんでいきたいです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ボタンいた <a href="https://t.co/fAKp8E6PcZ">pic.twitter.com/fAKp8E6PcZ</a></p>&mdash; 🌼ブブ (@sbubu12) <a href="https://twitter.com/sbubu12/status/1339939804180434947?ref_src=twsrc%5Etfw">December 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<追伸>
Holo2で録画した動画、画質が良すぎてそのままTwitterにあがりませんでした、、！
動画アップに30分もかかってしまった。
JavaScriptに頼りきらないLaravel開発

## web開発で欠かせないJavaScript
webアプリケーションで動きをつけるならJavaScriptがまだまだ主流かと思います。

ただ、あまりにもできることが多く何でもかんでも`JavaScript`に頼る開発もなんだかなと思うところもあり、今回は`Laravel`でフロント側に頼りきらず`全画面共通のコンポーネントを作成`する方法を紹介したいと思います。

## 環境
言語 : `PHP 7.3.18`
フレームワーク : `Laravel 6.18.43`

## サンプル
今回は`Qiita`のような記事投稿ができるサービスを作っている前提で、サイドバーに項目を設けて既読の記事があれば通知を出すような機能を作ってみたいと思います。

・サイドバーは全画面共通でどの画面からも開くことができる
・各項目の横に既読があれば通知を出す

モック：
![スクリーンショット 2020-12-18 22.56.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376889/211408ba-f7dc-73af-0318-4592483c012d.png)


## View Composer
`Laravel`にはすごく便利な`View Composer`が存在しそれを使えばすごく簡単にモックの様な共通処理を作成することができます。

使い方は[ドキュメント](https://readouble.com/laravel/7.x/ja/views.html)を見ればすぐにわかりますが、今回は汎用性も兼ね備えた実装をしたいと思います。

#### Providerを追加する
まずは以下コマンドで`Provider`を作成します
`php artisan make:provider ViewServiceProvider`

後々この`Provider`に最終的な処理を記述します。

#### Interfaceを作成する
そして、`Interface`を作成しておきます。
`View composer`を使うためには`composer`メソッドにターゲットとなる`view`,`compose`メソッドが必須になるのでそのメソッドが実装されたクラス名を引数に指定します。なのでそれらを作成するメソッドを必須メソッドとして管理しておきます。

`compose`メソッドについて後々説明します。

また、使用したい`blade`ファイルは複数指定が可能なので、`PHPDoc`で`array`が使用可能なのも記述しておきます。

```php
<?php

declare(strict_types=1);

use Illuminate\View\View;

interface ViewComposer
{
    /**
     * @return string|array
     */
    public static function getTargetComponents();

    /**
     * @param View $view
     */
    public function compose(View $view): void;
}
```

#### 具象クラスを実装する
先ほど作成した抽象クラス(`Interface`)の具象クラスを実装します。

`getTargetComponents`メソッドは対象としたい`view`を返す, `compose`メソッドには`blade`ファイルで使用したい変数とデータを返すように実装していきます。

```php
<?php

declare(strict_types=1);

use Illuminate\View\View;

class SidebarCompose implements ViewComposer
{
    public static function getTargetComponents(): string
    {
        return 'parts.sidebar';
    }

    /**
     * @param View $view
     */
    public function compose(View $view): void
    {
        $view->with('countPer', APIなどで取得した各項目ごとの件数データなど);
    }
}
```

今回使用したいのはサイドバーなので、`parts/sidebar.blade.php`の様なディレクトリ構造を想定して`parts.sidebar`と指定します。

`compose`で`with`メソッドの中に第一引数に変数を, 第二引数に変数に格納するデータを指定します。

#### Providerで使える様にする
一番最初に作成した`ViewServiceProvider`に実際に使えるように処理を追記します。

```php
declare(strict_types=1);

use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider;
use PrtimesAdmin\View\Composers\SidebarCompose;

class ViewServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     *
     * @return void
     */
    public function register()
    {
        View::composer(SidebarCompose::getTargetComponents(), SidebarCompose::class);
    }
}
```

`View`ファサードを使用し、`composer`を呼び出します。

第一引数に、使用したい`blade`ファイルを指定するので、先ほど実装した`SidebarCompose`クラスから`getTargetComponents`を呼び、第二引数には呼び出すクラスを指定するので`class`をそのまま指定します。

`composer`メソッドは、第二引数に指定されたクラス名に実装されている`compose`メソッドを呼び出し第一引数に指定された`view`で適用できるようにしてくれます。

#### bladeファイルで作成した変数を使う
最後に`blade`側で変数を記述すれば実際に表示できる様になります。

```html
<div>
 .
  .
   .
    <p>{{ $countPer }}</p>
</div>
```

### JavaScriptに頼りきらないLaravel開発
今回紹介した機能は`JavaScript`だと例えばページが読み込まれたときに表示するような処理が実装できるかと思います。
余裕があればそうすれば良さそうですね。

しかし、チーム開発をしているとフロント側の実装者が少なくフロントの工数をあまり使いたくない場合も出てくるかと思います。そんなときに`Javascript`に頼らずバックエンドで実装してしまうのも手かと思います。
cloud9でmySQL開始の際に使用したコマンド

##`cloud9`から**`mysql`利用する際に使ったコマンド一覧**#

`new terminal`から新規ターミナルを作成し以下のコードを打つ

```sql:sql利用開始
ec2-user:~/environment $ sudo service mysqld start
```

```sql:sqlログイン
ec2-user:~/environment $ mysql -u root -p
```
※パスワード未設定の時は`-p`つけない

```sql:UTF対応してるか確認
SHOW VARIABLES LIKE "chara%";
```
↓このようになっていればOK、なっていない場合は[こちら](https://qiita.com/Summonfire/items/141958ae99214f45c287 "こちら")
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/941408/3c2c9a56-147c-a2b5-bc73-8bc4248e0f78.png)


```sql:ユーザ作成
create user ' summon_fire`@`localhost' IDENTIFIED BY 'password'; 
```

```sql:パスワード変更
set password for 'name'@'localhost' = password('pass');
```

```sql:ユーザ削除
drop user summon_fire@localhost;
```

```sql:DB一覧
show databases;
```
```sql:DB作成
create database new_db_name;
```
```sql:DB使用
use new_db_name;
```

```sql:データ型設定(id自動採番)
create table new_teble_name(
    id INT(11) AUTO_INCREMENT NOT NULL, 
    name VARCHAR(30) NOT NULL ,
    age INT(3) NOT NULL,
    PRIMARY KEY (id));
```
**＜データ型＞**
`INT`・・・数値型
`FLOAT`・・・浮動小数点型
`DECIMAL`・・・正確性が求められる金銭などのデータを扱う
`char`・・・固定長の文字列
`VARCHAR`・・・可変長の文字列
`TEXT`・・・可変長の文字列型
`DATE`・・・YYYY-MM-DD
`TIME`・・・HH:MM:SS.SSSSSSS
`DATETIME`・・・日付と時刻を併せ持つデータ型.


**＜指定可能なオプション＞**
`UNIQUE`・・・重複NG
`DEFAULT`・・・未入力時に表示する用のデフォ値
`PRIMARY KEY`・・・主キーに設定
`AUTO_INCREMENT`・・・自動採番
`NOT NULL`・・・入力必須項目

```sql:昇順、降順
desc new_table_name;
asc new_table_name;
```
```sql:INSERT文
insert into new_table_name (id, name, age) VALUES (1,'山田', 23);
```
```sql:SELECT文
select from new_table_name where id=1;
                            └条件句
```

```sql:APDETE文
UPDATE new_table_name SET age = 10 WHERE age = 5;
```

└ageが5のカラムのageを10に変更

```sql:DELETE文
delete FROM new_table_name WHERE age = 5;
```

└age=5のカラムを削除

```sql:DELETE文
delete from new_table_name;
```

└全削除

```sql:終了
exit
Bye
```
アジャイル開発の応用範囲は広い

この記事はNTTコミュニケーションズ Advent Calendar 2020の20日目の記事です。昨日は @kanatakita さんの [PipeCD Operator を実装してみた](https://zenn.dev/kanatakita/articles/d0bb0814256e808967bf) でした。

## はじめに

NTT Communicationsのヒューマンリソース部で、全社育成・組織開発などをしている @iwashi86 です。

tl;dr;的に言うと、本記事では「アジャイル開発の概念は開発以外に使えるぞ」という内容を述べていきます。

## 経緯

本記事の筆者は、2020年4月より開発系のポジションから、人事系の部署(以下、HR部)に異動しています。HR部はもちろんエンジニアが多く属している部署ではないため、本記事で頻繁に登場する「アジャイル開発」の概念が広く浸透しているわけではないです。

そんなHR部で、もともとは開発でよく使われるアジャイル開発の振る舞いをしたことで、働き方がより良く進化してきています。

## 何をやったのか？

スクラムの概念である、透明性・検査・適応をシンプルに適用していっただけです。別にアジャイル開発の概念や、スクラムについていきなりレクチャするというわけではなく、良い働き方の一環として透明性・検査・適応を活用します。

### 透明性

あるあるかもしれませんが、業務が非常に忙しい場合、なかなか情報を周囲に発信できないことがあります。情報を発信すること自体、コストがかかるためです。（例：簡単に整形して、どこかに転記して…　など）

これが続くと業務環境の透明性が失われます。透明性が失われると不必要な問い合わせが発生し、業務のスピード感が失われます。また、透明性がないことで自律的な意思決定も困難になります。したがって、透明性の保持は非常に重要です。

透明性を確保するための簡単なプラクティスとして、代表的なものはカンバンです。チームでは、Microsoft 365を活用しているため、Plannerでカンバンを作り、チームで定期共有するようにしています。この、定期共有と言うのはポイントで、看板を見る仕組みをプロセスとして組み込まないと、やがて見られなくなる寒波が誕生します。（余談ですが、スクラムにおける、各種イベントは見直す契機になっており、よくできているなと思うことがあります）

その他、透明性を強化するための方法として、朝会（デイリースタンドアップ）を導入しました。個人的には、メンバーがどのような仕事をしているかわからなかったので、朝会は非常に有用でした。ただし、その朝会も継続的に進化しており、それは[別の場所で講演予定](https://confengine.com/regional-scrum-gathering-tokyo-2021/proposal/15023/remote-work-native-agilehr-)です。

### 検査

多くの人は、仕事をうまくやりたいと思っているはずです。そのためには、継続的にふりかえりをして、何が課題だったのかを検査・発見して、常によりうまくやる方法を考え続ける必要があります。

ただし、ふりかえりといっても実際には簡単ではありません。それは何故でしょうか？とてもシンプルな理由ですが、忙しいから振り返りをしていない、というケースがあります。

だから、ふりかえりを継続的に行えるように、プロセスとして導入しました。1週間や2週間という、一定のタイムボックスを切って、定期的にふりかえりを4月から実施しています。これにより働き方にリズムが生まれ、改善が進むようになります。

### 適応

2020年は、最も適応が求められた年だったかもしれません。コロナウィルスの流行という外部環境の変化が、非常に激しいものだったためです。その変化に対応するために、適宜スウォーミングして話し合い、またふりかえりによりチームの課題を発見して、出現する課題に地道に対応していきました。

適応と言う概念からは少しずれますが、この迅速な適応を支えているものは、チームメンバー同士の信頼性だったと思います。私が所属していたチームは、1ヵ月に2時間程度のチームビルディングの時間を設けていました。チームビルディングの場では、Management 3.0のプラクティスであるムービングモチベーターズなどを利用して、お互いの価値観などを共有しあう時間を設けていました。これは、地道に効果的だったかなと私は思います。

## 結果として

アジャイル開発という考え方や、スクラムの3本柱である透明性・検査・適応を別に意図的に広めようというつもりはありませんでしたが、チームで上手く仕事をすすめるために、結果的に寄っていった形になると思います。

アジャイル開発の概念は、開発以外にも応用可能な点が非常に多いので、もしご存じでなければ一度学んでみることをお勧めします。

## まとめと宣伝

透明性・検査・適応を軸とした実際の行動概要について、本記事で述べました。

来年のRegional Scrum Gathering Tokyoにて、[Remote Work Native な働き方を志向した結果、Agileな状態に爆進しているとあるHRチームの話 - 組織全体への波及を添えて](https://confengine.com/regional-scrum-gathering-tokyo-2021/proposal/15023/remote-work-native-agilehr-)というテーマにて、より具体的なプラクティスや課題・工夫についてお話しする予定です。もしご興味あれば、ぜひ参加いただけますと幸いです。

さて明日は、 @xkumiyu さんの "Amazon ECSとALBを利用した推論APIサーバの負荷分散" です、お楽しみに！
【Cakephp】全てのテーブルとカラムにコメントを付与する作業メモ


# 前提条件
cakephp3.xでmysqlを使用していること。

# 手順


#### 1. mysqldumpでスキーマのDB定義のみを出力した 『バックアップA』 を作成
```
mysqldump -u {ユーザー} -p -h {DBサーバホスト} {DBスキーマ名} -d -n > schema-dump-A.sql
```


#### 2. 現在のDBからマイグレーションファイルを作成

```
bin/cake bake migration_snapshot {マイグレーション名}
```


#### 3. マイグレーションファイルを編集

- downメソッド の中身をごっそり消す
- テーブルコメント更新用のSQL処理追加
- createメソッド を updateメソッド に置換
- addColumnメソッド を changeColumnメソッド に置換
- カラムコメント追加
- addIndex の部分のコードはトルツメ
- idのchangeColumn処理追加（auto_incrementなどが元々の制約が消えないようにオプションの引数を注意する。コメントしない場合は不要。）


```php:マイグレーションファイル
use Migrations\AbstractMigration;
use Cake\Datasource\ConnectionManager;// ← テーブルコメント更新用のSQL処理で必要なので追加

class {マイグレーション名} extends AbstractMigration
{
    public function up()
    {
      // 例） user（ユーザー）テーブルの場合
      
      // ↓ テーブルコメント更新用のSQL処理追加
      $connection = ConnectionManager::get('default');
      $connection->execute('ALTER TABLE user COMMENT :table_comment', [
          'table_comment' => 'ユーザー'
      ]);
      
      $this->table('user')
          // ↓ idのchangeColumn処理追加
          ->changeColumn('id', 'integer', ['comment' => 'ID','identity' => true]) 
          // ↓ addColumnメソッド を changeColumnメソッド に置換
          ->changeColumn('name', 'string', [
              'default' => null,
              'limit' => 255,
              'null' => true,
              'comment' => '名前' // ← カラムコメント追加
          ])
          // × addIndex の部分のコードはトルツメ
          ->update(); // ← createメソッド を updateメソッド に置換

    }

    public function down()
    {
      // 使わないので空にする
    }
}
```

#### 4. マイグレーション実行

```
bin/cake migrations migrate
```

#### 5. 再びmysqldumpでスキーマのDB定義のみを出力した 『バックアップB』 を作成

```
mysqldump -u {ユーザー} -p -h {DBサーバホスト} {DBスキーマ名} -d -n > schema-dump-B.sql
```


#### 6. 『バックアップA』 と 『バックアップB』をテキスト差分比較しコメントだけ追加できているかチェック
コメントだけ追加できていれば成功。
もしそれ以外の箇所が違うものが書き換わっていた場合はシステムに影響が出るかもしれないので影響確認が必要。
なるべくバックアップAと一致するようにマイグレーションファイルを修正する。




# トラブルシューティングTIPS
問題の箇所だけテーブルコメントみたいにSQLを直接実行する方式に置き換えれば大概解決できますが、マイグレーションのソースコードを直して解決できたものをまとめてます。

####  ON UPDATE CURRENT_TIMESTAMP が取れる場合

```
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
　　↓ マイグレーション後コメント付与後
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '変更日時',
```

##### 対応
[MYSQL default value: CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP](https://github.com/cakephp/phinx/issues/868)
このissueによるとchangeColumnに第３引数の配列にupdateを追加すれば良いみたい。
手順どおりのままだと自動追加されないみたいなのでマイグレーションを修正。

```php
->changeColumn('modified', 'timestamp', [
    'default' => 'CURRENT_TIMESTAMP',
    'limit' => null,
    'null' => false,
    'update' => 'CURRENT_TIMESTAMP', // ← 追加
    'comment' => '変更日時'
])
```
SQL入門(基本的なクエリの備忘録)

# SQL クエリ

備忘録です。

## カラムとテーブルの選択

```sql
SELECT カラム名
FROM テーブル名;
```

</br>

***

## データの取得

</br>

#### WHERE

```sql
SELECT *
FROM テーブル名
WHERE カラム名 = 要素  -- 「取得したい要素」と一致するものを検索
WHERE カラム名 LIKE %要素%  -- 「取得したい要素」を含む要素を検索
WHERE NOT カラム名 = 要素  -- 「取得したい要素」と一致しないものを検索
WHERE カラム名 IS NULL  -- 指定したカラムのなかでNULLのデータを検索
WHERE カラム名 IS NOT NULL  -- 指定したカラムの中でNULLでないデータを検索
```

</br>

#### 比較演算子等

```sql
カラム名 =             -- 一致
カラム名 >=            -- 以上
カラム名 <=            -- 以下
カラム名 <             -- より大きい
カラム名 >             -- 未満
カラム名 LIKE          -- 含む
NOT カラム名 演算子     -- NOT文
カラム名 IS NULL       -- NULL値である
カラム名 IS NOT NULL   -- NULL値でない
```

</br>

#### AND / OR

```sql
WHERE 条件
AND 条件;  -- AND文

WHERE 条件
OR 条件;  -- OR文
```

</br>

#### 並び替え

```sql
ORDER BY 並び替えたいカラム 並び方;  -- 並び替え文法
ASC  -- 昇順 ascending order
DESC  -- 降順 descending order
```

</br>

#### 取得データ数の制限

```sql
LIMIT データの件数;  -- 指定したデータの件数を取得する(numpyのheadとおなじ)
/*クエリの最後に記述する*/
```

***

## データベース・テーブルの作成

</br>

#### テーブルの作成

```sql
CREATE TABLE テーブル名(
    行名1 データ型,
    行名2 データ型
)
```

</br>

#### データ型の種類

|分類|データ型名|説明|
|:-:|---|---|
|数値型|int|整数型|
|^|decimal(桁数)|固定長小数型|
|^|money|通貨|
|^|float|浮動小数点数値|
|文字列型|char(文字数), nchar(文字数)|固定長文字列型(~8000字)|
|^|varchar,nvarchar|可変長文字列型(~8000字)|
|^|text,ntext|可変長文字列型(~10億文字)|
|日付型|time|hh:mm:ss|
|^|date|YYYY-MM-DD|
|^|datetime|YYYY-MM-DD </br>hh:mm:ss|


***

## データの追加・更新・削除

</br>

#### データの追加

```sql
INSERT INTO テーブル名  -- 操作するテーブルを指定
(列名1,列名2,列名3)  -- 操作する列を指定
VALUES 
(値1,値2,値3);  -- 追加する値を入力
```

</br>

#### データの更新(既に登録されているデータを新しいものに置き換える)

```sql
UPDATE テーブル名
SET 列名1 = 値1, 列名2 = 値2, 列名3 = 値3  --更新する値を入力
WHERE 条件  -- 更新する場所の条件を指定
```

</br>

#### 行の削除

```sql
DELETE FROM テーブル名
WHERE 条件  -- 指定した条件を満たす行を削除する
```

</br>

#### 列の追加・削除

```sql
ALTER TABLE テーブル名 ADD 列名 データ型 初期値  --列の追加
ALTER TABLE テーブル名 DROP COLUMN 列名  -- 列の削除
ALTER TABLE テーブル名 ALTER COLUMN 列名 データ型  -- 指定した列のデータ型の変更
```

***

## データの加工

</br>

#### 重複する要素を省く

```sql
/*指定したカラムから重複をのぞいて計算する*/
SELECT DISTINCT(カラム名)
FROM テーブル名;
```

</br>

#### 計算を実行する

```sql
SELECT カラムⅠ,カラムⅡ*5  -- カラムⅠと、カラムⅡに5を掛けた値を取得
```

***

## python(SQLiteの使い方)

</br>
#### モジュールのインポート

```python
import sqlite3
```

</br>
#### データベースとの接続

```python
conn = sqlite3.connect("データベース.db")  # データベースファイルと接続
c = conn.cursor()  # カーソルオブジェクトの作成
```

</br>
#### クエリの実行

```python
c.execute('''
クエリ
''')  # クエリの実行
```

</br>
#### データベースとの切断

```python
conn.close()  # 切断を怠るとデータベースにロックがかかってしまう。
```
Power Appsで料理記録アプリ🍳

仕事でPower Appsに触れる機会が増え、基本的なスキルを学んだので
プライベートでも何か実用的なアプリをひとつ作ってみようと思い、
自分の料理記録アプリを作ってみました。

#作った理由
・料理を作ったときの気付きを記録に残し次に活かしたい。
　(良かった気付きも、悪かった気付きもすぐ忘れる…)
・作ったレシピ(C●●kPadとか)を履歴化して活用したい。
　(「あれ良かったなー」とか思っていても、次回探せなかったりする)
・(1つのレシピサイトでなく)いろいろなサイト横断でレシピのURLを残したい。
・料理の記録を見ることで、同じような料理に偏らないようにしたい。

#環境＆アプリ構成など
「Microsoft365契約プラン」
[Microsoft 365 Business Basic](https://www.microsoft.com/ja-jp/microsoft-365/business)付属のPowerApps for Office 365
※法人プランですが個人で契約してます。

「データ保管先」
SharePointオンラインのリスト
 (料理作るのは週末だけなので、データ件数としては十分)

データ項目はこんな感じ↓

|作成日|料理名| 評価(自分の)|レシピのURL|画像|メモ|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|

先にSharePointリストで項目を作ってから、Power Appsを発行します。
入力フォームは、下のような感じです。(とてもスタンダードな作り方ですね)
![アプリ入力2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453733/9355a395-f19f-3274-2997-8ca0b2f5673f.png)

一点、画像データ(料理写真)の入力機能は、一癖(以上？)あり
「画像の追加コントロール」取り込んだ画像BinaryデータをJSON関数を使ってbase64DataURI文字列に変換する、というプロセスで取り込んでいます。
(職場のエンジニアの方にご教示いただきつつ、何とか作りました笑)
※参考とさせていただいたQiita記事↓
[Power Appsにおける画像の扱いについて](https://qiita.com/Yellow11/items/8206debc747cc3a4f16d)

#成果物
最終的にできたのはこんな感じです
![トップ画面2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453733/adbe2743-a6b2-e65f-57c5-21dbeed59e04.png)

![記録2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453733/98764731-8781-c3db-1ac6-4b74b9cb4b81.png)
「評価」をswitch関数で「⭐」にしたのがちょっとした工夫。

![レシピ一例2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453733/8de54992-1376-ed46-0130-117728dc3111.png)

#まとめ・気づき
・アプリは、目的に照らし、記録・管理したいデータ項目から設計することが大事。
・既存アプリでなく、自前で作るとデータの管理が自由にできてよい。(エクスポートも簡単)
・記録としての画像は大事。(テキストデータだけだと味気ない…)
・思っていたよりも料理を作っていない。(家では週末に自分が作るルール)
・揚げ物のレシピが多い。

#次やりたいこと
・Power Apps上でデータのグラフ化
　(料理回数や評価を簡易BIのようなもので見える化)
・Power Automateと組み合わせた何か
SetThreadAffinityMaskについて

# はじめに
SetThreadAffinityMaskについて, 私のライブラリの対応が甘かったので書き記します.
ただし, 公式のはっきりしたドキュメントを見つけていないため, 全て推測です.

これが気になる理由は, SIMTの効率を考えると, 物理プロセッサ単位で拘束したいためです. OSは賢いので気にしなくても良きに計らってくれるようにも思いますが.

[Microsoft Reference](https://docs.microsoft.com/ja-jp/windows/win32/api/winbase/nf-winbase-setthreadaffinitymask) の記述には次のようにあります,
> A thread affinity mask is a bit vector in which each bit represents a logical processor that a thread is allowed to run on.

では, 物理プロセッサと論理プロセッサ, そしてそのマスクの関係はどうなっているのか？ということが気になります.

# 物理プロセッサ, 論理プロセッサ, そしてマスクの関係

`GetLogicalProcessorInformationEx(RelationProcessorCore` で取得できる `PROCESSOR_RELATIONSHIP`構造体が答えだと思われます (オレは詳しいんだニキ教えて).

寄り道して, プロセッサグループについて.
Win32 APIの範囲では, 1プロセッサグループあたり, 64論理プロセッサです. Windows ServerもEPYCも所有していないため詳しいことは実験できません. 64論理プロセッサを超えた場合, 別のプロセッサグループに割り当てられるということでしょう. ついでに, 1プロセスは1プロセッサグループを超えてスケジューリングされません.

1プロセッサグループ内の関係は次のようになるのかな？

- 物理プロセッサ数: `PROCESSOR_RELATIONSHIP.GroupCount`
- 論理プロセッサ数: SIMTが有効なら物理プロセッサ数×2
    - SIMTが有効なとき `PROCESSOR_RELATIONSHIP.Flags` に `LTP_PC_SMT`が立つ
    - 現在2スレッドより多い数のSIMTはないし, 今後半世紀ぐらいは現れない
    - 物理プロセッサ単位でSIMTをON・OFFする可能性は考慮されていない
- マスク
    - `PROCESSOR_RELATIONSHIP.GroupMask[x].Mask`を見ると, SIMTが有効な場合, 2ビットずつになっていることがわかります. つまり同物理プロセッサ内の論理プロセッサは, `Affinity Mask`が隣り合っているはずよね？ということです.

# まとめ
SIMTが有効な環境で, 物理プロセッサ単位でスレッドを拘束したい場合, SetThreadAffinityMaskは2bits設定してくださいということです.
webViewでandroidのデフォルトのエラーページが表示される/チラつく時の対処方法

## 注意
本記事はreact nativeの記事です。

## はじめに
webViewでページを表示する時に何らかの読み込みエラーとかが出るとあまり印象が良くないので

~~~typescript
      renderError={() => {
        return (
          <View>
            <Text>読み込みできませんでした</Text>
          </View>
        )
      }}
~~~

みたいな感じでエラー用の表示を作ると思うのですが、なんとAndroidだと**renderErrorを無視してデフォルトのエラーページがでーんと残ったりページを開く時や閉じる時にエラーページがチラつく**といった現象が発生します。
色々と調べて対処したので、お困りの方は是非お試しください。


## 対応内容
- ページを表示する時にディレイをかける
- ディレイ中は読み込みインジケーターを表示させる
- エラーになった場合は`about:blank`のページを読み込む


~~~typescript
state = {
  url: '',    // webViewで読み込む用のurl
  loading: true　　　// ディレイ用の変数
}


componentDidMount(){
    // 読み込むページのurlを格納する
    this.setState({ url: this.props.url })

    // androidの時、1秒のディレイをかける
    Platform.OS === 'android'
      ? setTimeout(() => {
          this.setState({ loading: false })
        }, 1000)
      : this.setState({ loading: false })

}

// blankページをセットする関数用意
setUrlBlank() {
  this.setState({ url: 'about:blank' }, () => {})
}

render() {
  return (
    {!this.state.loading ? (
      <WebView
        source={{ uri: this.state.url }}
        onError={e => {
          this.setUrlBlank()
        }}
      />
    ) : (
      <View style={styles.loadingIndicatorContainer}>
        <ActivityIndicator size="large" />
      </View>
  )
}
~~~

## 解説
まず、**ページを読み込んだ時のチラつき**を防ぐために、ページ表示前にディレイをかけます。
ディレイ中にインジケーターを表示させることで、ユーザーのストレスを軽減します
エラーになった時にデフォルトエラーページが出ないように`about:blank`のページをwebViewで読み込ませます。
ただこれだとエラー時に真っ白なページを表示するだけになってしまうので、別途エラー用のHTMLを用意して
読み込ませてあげるとなお良いと思います。

これで一旦は対応ができますが、個人的にはもっとベストプラクティスがありそうな気がしています。。
自作キーボード3 基盤配線設計

[前回記事](https://qiita.com/kirin123kirin/items/2d17795d0833f4e87345)で回路図まで出来上がったので、次からは物理設計として基盤レイアウトと配線を決める。

## 基盤レイアウトの操作
Youtube[回路図の書き方](https://www.youtube.com/watch?v=dNfaLM5PUVM&list=PLKe0_8RR2yrSu2fZAs2D8_bfYQ3JGBO-w)で学び要領をつかんでいく。

## 自動レイアウトツール
* http://www.keyboard-layout-editor.com で作ったレイアウトデータを活用し、Kicadの基盤図に自動的にスイッチとかを配置してくれる

* [keyboard-layouter](https://github.com/yskoht/keyboard-layouter)というツールが公開されているのでそれを活用した。

* そのままRunを実行するとダイオードがあらぬところに固まってしまうので手動で調整し丸1日かかった。
* 実はそれもいい感じに配置してくれるオプションに気づかなかった。
Diode-offsetの数字を微調整してやれば、ある程度近くに配置してくれる。無駄な労力を使った。

## 自動配線ツール
* レイアウトが決まったら、配線をつなぐ必要がある。
  どれをつなげばよいかはKicadの機能で示してくれるが、実際に配線の経路と接続は果てしなくマウスドラッグ操作が必要。
* 次に見つけたのが[freerouting](https://freerouting.mihosoft.eu/)という自動配線ツール。
* JRE最新版をインストールし実行。基盤図の外枠を書いておかないとエラーで実行できない。
* 変な経路を通されたりするのはパラメータ調整である程度解消できるようだ。

出来上がった基盤図面がこれ、おおおーーそれっぽいじゃん！
配線は交差することが、できないらしいので、表と裏で分けて配線するというのがセオリーらしい。これを2層基盤というらしい。

### 表面(右手側)
![PCB.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135714/2ea49e0e-305a-2b40-6756-b3c690976796.png)

### 裏面(右手側)
![PCB2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135714/7c093611-eacc-3578-6715-53bc8c2ff85a.png)

### 3D表示(右手側)
![PCB3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135714/3add2a0c-58c3-b8db-c293-11f45db18f01.png)

~ 左手側の画像は省略 ~

天道虫のマークを押して検証してエラーが出なかったのでOKかも。
何も電気の知識なくてもなんとなかなったような気がする。

一番難関だと思ってたところが、ついにできた。
Amazonでコスパ良さそうなはんだごてを早速注文。

[はんだごてセット](https://amzn.to/2WvZMEt)
こういうやつね
<a target="_blank"  href="https://www.amazon.co.jp/gp/product/B074SJ7HVR/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B074SJ7HVR&linkCode=as2&tag=kirin123kirin-22&linkId=f94cb2d2a61cf6d15127c0371097152b"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B074SJ7HVR&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160_&tag=kirin123kirin-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=kirin123kirin-22&l=am2&o=9&a=B074SJ7HVR" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

早速プリント基板適当にググって自動見積できるところを探す。検索上位に出てきたP板.comというサイトで見積もってみた。
右手側の方がデカいから、片方だけ見積もってみたらなんと、
![PBANCOM.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135714/10176dcd-c720-109d-070a-b13ce2d6a1e8.png)

これは無理。3万ってそんなにかかるの？そんなに出せない
左手も作ったら5万、数千円かと思ってた。その後、ケースも作るのに、、

やっぱりキットで頑張るしか個人ユーザには選択肢はないのかな。
[必見!!!]　オブジェクト指向についてまとめてみた！

#はじめに 
**初学者の方にとってオブジェクト指向は参考書でも度々目にするが、そのまま調べずに終わっていませんか？**
**また、オブジェクト指向わかった気になっている方もいると思います。**

今回はオブジェクト指向について分かりやすくまとめてみましたのでご覧ください！


##この記事のターゲット
- プログラミング初学者
- オブジェクト指向のプログラミング言語を学習している方(Ruby,JAVA,C++など)


##オブジェクト指向プログラミングとは
「モノ」を組み立てるように表現して、コンピュータに動作をさせる


現在ではオブジェクト指向言語が主流になっていますので、プログラミングをする上でオブジェクト指向の概念を押さえておくことは非常に重要です。
たとえば、以下のプログラミング言語はすべてオブジェクト指向言語です。

- さまざまなプラットフォームで動作するJava
- Webページに動きを与えるRubyやPHPやJavaScript
- Mac OSやiOSのアプリ開発で使われるSwift
- 商用のプログラミング言語として定評のあるC++
- WordやExcelのマクロとして使用されているVBA

##分かりやすく説明すると.....
オブジェクト指向プログラムとは、
モノと操作を分けて完成(アプリ)を作り上げること

例えると
オブジェクト(モノ)　→リモコン
操作　→ボタン、電池

みたいな感じです！笑

## メリット
- 効率よくプログラムを設計、開発できる
webアプリのボタンを例にすると、
モノと定義したボタンの場合、同じようなボタンがあった場合、ボタンの色を変えれば、他の削除や編集ボタンを作ることができる。

- 不具合の原因を特定しやすくなる
モノと操作にオブジェクト思考で分かれているので、どこでエラーが起こったのか(モノのコード)、
どんな操作をした時か(操作のコード)がわかりやすくエラーが特定しやすい。

- プログラムの使用が変わっても対応しやすい
例えば、100個のボタンがあり、ボタンの幅を400px→300pxに変えたとします。100個のボタンを修正するのはだいぶ手間になる。
しかし、オブジェクト指向で定義した「ボタン」の横幅を変更するだけで、全てのボタンのサイズが変わる

- オブジェクト指向を使えば、開発した後も時間をかけずに修正することができます。

##覚えておきたいキーワード
1.カプセル化
→他のプログラムからできるだけ変更できないようにする仕組み
ボタンを例にすると、全ボタンで高さと横幅を変えたくないとすると、他のプログラムから簡単に設定して守るのが、カプセル化です。

2.継承
同じようなプログラムを１箇所にまとめてコードを再利用する仕組み
→似たような処理を一つずつ書いていると、例えば「データを登録する処理」のコードを修正することにより時間がかかってしまいます。
継承を使えば、登録、更新、削除などのカテゴリーとしてコードをまとめておける
カテゴリーとしてまとめておけば、新しい機能を作るときに同じような処理を使うことも可能。似たような処理がないか確認もしやすくなる。

3.抽象化
重要な要素や共通な要素を抜き出して、他は切り捨てる考え方
→車に例えると
どんなサイズ？どんなデザイン？などの聞かなければわからないことではなく、
エンジンがついている。ハンドルが4つついているなどの必ず必要な共通要素
何が言いたいかというと、「詳しいことは決まってないけど、開発するうえで必ず必要な要素は○○だな」と捉える。

4.ポリモーフィズム
継承したコードの一部を変更して利用するための仕組み
コードの一部のみを変更して利用できるのがポリモーフィズム
→例えばボタンの色だけを変えて登録、更新、削除のボタンを作ったことが、一部を変更し継承するという意味になります。

##終わりに
もし、オブジェクト指向を理解せずにプログラミング学習していた人も、この記事を読んであの部分がそうだったのかと気づくはずです！
皆様のご参考になれば嬉しいです！

##参考記事

[オブジェクト指向とは？誰でもわかるようにやさしく解説](https://www.sejuku.net/blog/5973)
Manjaro で HHKB Professional HYBRID Type-S を Bluetooth 接続で使う

## 背景
もともとは Ubuntu を愛用していたのだが、思うところがあり Manjaro へ乗り換える。

その際にキーボード (HHKB)の Bluetooth 接続が Xfce の GUI アプリからでは何故かうまくいかなかったのでメモ。


## CLI で Bluetooth キーボードをペアリングする

### bluez-utils をインストールする

```
$ sudo pacman -S bluez-utils
```

### HHKB をペアリングモードにする

Fn + q を押したあとに
Fn + Ctrl + 1 〜 4 の登録したい数字を押す


### bluetoothctl で設定する

bluetoothctl を使用し、キーボードとのペアリングを行う。

```
$ bluetoothctl 
```

bluetoothctl のプロンプトに入ったら、ペアリングコードの送受信のためにデフォルトエージェントを設定する。

```
# default-agent 
```

次にスキャンを行い、キーボードを見つける。

```
# scan on
```

キーボードを見つけたら、ペアリングを行う

```
# pair [MAC アドレス]
```

pass key が表示されているので、それをペアリングしたいキーボードで入力し、Enter を押す。

以上で設定が終わったので、bluetoothctl を終了する。

```
# exit
```


## ログイン画面での Bluetooth 接続を有効にする

このままでは、Xfce  のログイン画面では Bluetooth が接続されないので、設定を変更する。

```
sudo nano /etc/bluetooth/main.conf 
```

設定ファイルの最終行にある設定を以下のように変更する。

```
AutoEnable=true
```


以上
登録した情報をなかったことするコマンド

#はじめに
　アプリケーションを作成している過程で色々な情報を保存していると思います。そんなときに、テーブルを真っ新な状態にしたいときに使うコマンドです。


##登録した情報を削除する

カレントディレクトリがアプリケーションであることを確認して、ターミナルで

```bash
rails db:reset
```
保存されているデータは全てなくなりますが、テーブルがなくなるわけではありません。
【Swift】現在時刻を数値で取得

# どういうことか

例えば **12時34分** という時刻から `12` と `34`という数値を取得したい。
Swiftの日時取得は初めてで `DateFormatter` を使うというのはたくさん見つけたんだけど、文字列型で取得されて、それをうまくキャストすることが（ぼくには）できなかった。
なんとか見つけた方法でうまくいった。

## Calendar

```swift
let now = Date()

let time = Calendar.current.dateComponents([.hour, .minute], from: now)

print(time.hour!) 
print(time.minute!)
```

PHPで型に甘えてたのかなぁとぼんやり思ってます。
それにしてもこんな単純なことでこんなに手間かかるもんなんでしょうか。簡単な方法あったらぜひ教えていただきたいです。
真っ新なMacBookAirにUnityをインストールしてスマホ向けアプリの動作確認をするまで

自分の好みの快適な開発環境にする方法と動作確認までメモ

# 環境
### 構築する開発環境
* MacBook Air 2019 (Intelチップ)
    * Mac OS Catalina 10.15.7
* Unity 2019.4.16f1 (LTS)
    * Android Build Support
    * iOS Build Support
* Visual Studio Code version 1.5.2

### 作ったアプリの動作確認環境
* Mac : MacBook Air 2019 (Intelチップ)
    * Mac OS Catalina 10.15.7
* Android : Pixel 3a
    * Android OS Version 11
* iPhone : iPhone 8
    * iPhone OS xxx

# ステップ
1. Unityのインストール
2. Visual Studio Codeのインストール
3. Unityの起動と設定
4. Visual Studio Codeの起動と設定
5. MacBookAir向けにビルドして動作確認
6. Android向けにビルドして動作確認
7. iPhone向けにビルドして動作確認

# 1.Unityのダウンロードとインストール
1. 以下からUnity Hubをダウンロードし、UnityHubSetup.dmgを実行してインストール
  * https://unity3d.com/jp/get-unity/download
2. UnityHubを起動してアカウントの設定（Unityアカウントを持っていなければ作成）
3. UnityHubからUnity2019.4.16f1をインストール
  1. Visual Studio for Mac をアンチェック
  2. Android Build Supportにチェック
  3. iOS Build Supportにチェック
  4. ドキュメンテーションをアンチェック
  5. 日本語をチェック

# 2.Visual Studio Codeのインストール
* 以下からMac向けのVisual Studio Codeをダウンロードし、VSCode-darwin.dmjを実行してインストール
https://code.visualstudio.com/download

* 以下の拡張機能を入れる(その他の自分好みの設定や拡張については別途)
 * C#
 * Debugger For Unity
 * Mono Debug

# 3.Unityの起動と設定
## Visual Studio Codeをエディタに設定する
1. 適当な名前でプロジェクトを作成
2. Unity > Preferences… > External Tools から External Script EditorにVisual Studio Codeを選択
3. Genetate .csproj files forの下にあるチェックボックスをすべてチェック

### Android NDKエラーが出ている場合
Unity > Preferences… > External Tools から External ToolsからAndroid NDK installed with Unityで警告が出ていたので確認
表示されているパスを確認するとなぜかNDKが空っぽなのでUnity Hubから一度Android Build Supportを削除して、もう一度インストールするとちゃんと入っていた
理由は不明（UnityHubにフォルダアクセス権限がなかった？でも他のものは生成できているので謎）

# 4. Visual Studio Codeの起動と設定
* 適当にC#スクリプトを作成
* Unityの上のメニューバーからAssets > Open C# Projectから起動　←重要

### インテリセンス（補完機能）が効かない場合
* Home Brewが入っていない場合はターミナルから下のコマンドでインストール

```
/bin/bash -c "$(curl -fsSL 
https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

* monoをターミナルからHome brewコマンドでインストール

```
brew install mono
```

* Visual Studio CodeのSetting.jsonに以下を追記（コマンドパレットから検索で開ける

```
"omnisharp.useGlobalMono": "always",
"omnisharp.monoPath": "/usr/local/Cellar/mono/6.8.0.105"
```

これでインテリセンスが聞くようになった

# 5. MacBookAir向けにビルドして動作確認
* UnityでFile > Build Setting
  * PlatformをPC, Mac & Linux Standaloneが選択された状態にする
  * Build and Run

# 6. Android向けにビルドして動作確認
* UnityでFile > Build Setting
  * PlatformをAndroidが選択された状態にする
  * まだしていなければAndroid端末を開発者モードにする（ビルド番号を７回タップ）
  * USBケーブルでMacとAndroid端末をつなぐ
  * Build And Run

# 7. iPhone向けにビルドして動作確認
まだ
iPhone持っていないので、家族に借りてこんどやってみる
Cryptomator をバージョンアップした後に起動しない！

最近、Cryptomator のアップデートをすると起動しなくなることがあり、全然 Fix されないので調査しました。
マイナーなアプリ？な情報があまり上がっていませんでしたので、同じような状態で困っている方の助けになれば幸いです。

## Cryptomator って何？

仮想ドライブを作成し、その中で管理されるファイルはファイル単位で暗号化し、実際の保存領域ではディレクトリ構造やファイル名なども構成をかえるアプリです。
乱暴な言い方をすると、ランサムウェアの技術を良い方向に活用しているようなアプリです。（技術は使い方次第という良い見本の素晴らしいアプリです。）
私はクラウドで端末間を同期するファイルの安全性を向上するために使用しています。


## 原因

Cryptomator 1.5.9 以降で発生する現象のようです。
私の環境では、以下のようなエラーログファイルが生成されていました。

```
#
# A fatal error has been detected by the Java Runtime Environment:
#
#  EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc=0x00007ffb7dcaf932, pid=14612, tid=10856
#
# JRE version: OpenJDK Runtime Environment AdoptOpenJDK (15.0.1+9) (build 15.0.1+9)
# Java VM: OpenJDK 64-Bit Server VM AdoptOpenJDK (15.0.1+9, mixed mode, tiered, compressed oops, g1 gc, windows-amd64)
# Problematic frame:
# C  [awt.dll+0x8f932]
#
# No core dump will be written. Minidumps are not enabled by default on client versions of Windows
#
# If you would like to submit a bug report, please visit:
#   https://github.com/AdoptOpenJDK/openjdk-support/issues
# The crash happened outside the Java Virtual Machine in native code.
# See problematic frame for where to report the bug.
#
```

Java Runtime に渡す引数が原因で、日本語環境で影響が発生しているとのこと。
（根本原因はまた別にあるのですが。。。）
公式 GitHub に Issues として報告が上がっていました。

> Cryptomator doesn't open in Windows 10 with Japanese UI - OpenJDK bug? #1465
> https://github.com/cryptomator/cryptomator/issues/1465

## 解決方法

2パターンあります。

### 設定ファイルの修正

`Cryptomator.cfg` ファイル内の以下の行を削除してください。

```ini
java-options=-Dfile.encoding=utf-8
```

標準インストール環境では、`C:\Program Files\Cryptomator\app\Cryptomator.cfg` にあるかと思われます。

### ロールバック

よくわからない場合はこちらを推奨。
アンインストールした後で、改めて Cryptomator 1.5.8 をインストールしなおします。

> Cryptomator 1.5.8
> https://github.com/cryptomator/cryptomator/releases/tag/1.5.8

私は scoop で管理していたので、シンボリックリンクの張り直しでロールバックが完了しました。
（scoop は前バージョンを消さずに新しいバージョンをインストールできるので、問題が発生したときに楽にロールバックできて便利！）
Cloud9 MySQLの文字化け対応

Cloud9にはデフォでMySQLがインストールされていますが日本語未対応で文字化けしてしまうのでUTF-8に対応できるように設定します。

###1.`new terminal`からターミナルに以下の`vi`コマンド（ファイルを開くLinuxコマンド）で展開


```sql:
sudo vi /etc/my.cnf
```

続いてキーボードの`i`キー（Linuxコマンド）を押下しターミナルを編集可能にする

###2.`[mysqld]` セクションに挿入
挿入場所は`[mysqld]`と`[mysqld_safe]`の間

```sql:
character-set-server=utf8
[client]
default-character-set=utf8
```

###3.編集完了
`Esc`キーで編集モードを終了し、`q:`（Linuxコマンドの強制終了）を入力して`Enter`キー

これでMySqlはUTF-8に対応しているはずなので実際に開いて確認してみましょう。
確認方法は[こちら](https://qiita.com/Summonfire/items/393ecd61e1892647493b "こちら")
【Unity】Debug機能を便利にしたい！DebugExtensions

# 現状のUnityEngine.Debugの問題
皆さんUnityのDebugクラスよく使いますよね？ `Debug.Log()`とか。
でもたまに不便だな～って思う時ありません？

配列を表示したい時とか

```c#
    Debug.Log(new string[] {"a", "b", "c"});
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409758/9435b7a0-dff7-27b8-23fb-8fc7e1461efc.png)
↑配列なことぐらいわかってるわ！要素が欲しいんじゃ！
こういう場合はforeachなどで回すか、LINQでゴニョゴニョするとかしか無いんですよね、、、

**非常にめんどくさい！！**

というわけで作りました。その名も[DebugExtentions](https://github.com/HarumaroJP/DebugExtensions)！
まだ制作途中で、機能が豊富とは言えませんが、一部をgithubに公開いたしましたので今回はそれをご紹介したいと思います。


DebugExtensions機能一覧
・普通のDebugクラスの機能全部（もしかしたら実装漏れがあるかも）
・命名の関係上`ClearDeveloperConsole()` → `ClearConsoleError()`になっています。
・多少制限はあるけど、structも表示できます。
・Colorクラスの表示が見やすくなった
・`Array, List, HashSet, Dictionary`の要素表示（Format系は対応してないですごめんなさい、、）
・ログのテキスト保存
・コンソール全クリア
・リッチテキストを簡単に使えるぞ


## 1. Array, List, HashSet, Dictionaryの要素表示
個人的に一番最初に実装したかった機能。
こんな感じで表示されます。

`Array・List・HashSet`

```C#
    void Start() 
    {
        string[] wordArray = new[] {
            "apple",
            "blue",
            "cactus",
            "default",
            "emission"
        };

        DebugEx.Log(wordArray);
    }
```

### 実行結果
```
Array<String>: 
[
   "apple",
   "blue",
   "cactus",
   "default",
   "emission"
] Length = 5
```




`Dictionary`

```C#
    void Start() 
    {
        Dictionary<string, int> dict1 = new Dictionary<string, int>() {
            {"normalSword", 5},
            {"superSword", 2},
            {"apple", 100},
            {"water", 1}
        };

        DebugEx.Log(dict1);
    }
```

### 実行結果
```
Array<String, Int32>: 
[
   {   
      "key": "normalSword",
      "value": "5"
   },
   {   
      "key": "superSword",
      "value": "2"
   },
   {   
      "key": "apple",
      "value": "100"
   },
   {   
      "key": "water",
      "value": "1"
   }
] Length = 4
```


内部ではJsonUtilityを用いているので、Json形式に近い表記になっています。
他に、型情報と要素数も表示してくれる用になりました。
ログに突っ込むだけで簡潔に要素を表示してくれるので、かなり便利です。


## 2. ログのテキスト保存
```c#
DebugEx.RecordStart();
処理
DebugEx.RecordStop();
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409758/9d5abec4-2ba1-5c04-b2a2-e192e319ebf7.png)

`RecordStart()`と`RecordStop()`の間で、ロギングが行われた場合、情報が保存されます。
`RecordStop()`が実行されたときに保存されるので注意。
デフォルトでは`DebugExtensions/Logs`に保存されますが、設定で変えることができます。


## 3. コンソール全クリア
```c#
DebugEx.ClearConsoleAll();
```

その名の通り、まとめてログを全削除します。
## 4. リッチテキストを簡単に使えるぞ
```c#
"Alpha".Color(Color.red) //色の変更
"Bravo".Bold() //太字にする
"Charlie".Italic() //イタリック体にする
"Delta".Size(12) //文字のサイズを変更する
"Echo".RemoveRichText(); //リッチテキストを取り除く
```
Consoleでは[リッチテキスト](https://docs.unity3d.com/ja/2019.4/Manual/StyledText.html)を使うことができるので、string型の変数に上記のようなメソッドを連結することで、リッチテキストに変換することができます。
コンソールの文字をちょっといじりたいときなどに便利です。

## 5. その他設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409758/495842b6-1582-61a6-f758-948d89f9cb57.png)

`LogSavePath: ログファイルを保存するパス`
`SaveStackTrace: ログの下の部分にくっついている、呼び出し元のトレース情報をログファイルに書き込むか`

コレクションをログで扱うの大変だったので、とても助かりました～
普通の人は「何がエラーか」なんて分からない　～デスクトップアプリ＆ブラウザ(Colab)アプリをリリースして～

# はじめに

この記事は「[個人アプリ/サービス開発の進め方と運用、得た学び - 03【PR】 Lenovo Advent Calendar 2020](https://qiita.com/advent-calendar/2020/lenovo_app_03)」の25日目の記事です。大トリ！

# この一年でリリース（バージョンアップ含む）したアプリ

**VMDサイジング**

  -  機能概要：特定のモデルに合わせて作られたモーションを、他のモデルの体型に合わせて調整するアプリ（デスクトップ）
  -  解決したかった課題：MMDで使用されるモデルは概ね標準・準標準と呼ばれるボーンが搭載されており、互換性があるように見えるが、身長や体形などによってボーンの付け方が異なっており、実際に作られたモーション（元モーション）を他のモデルで読み込むと、微妙に（あるいは大幅に）違いが出てしまうため、適用したいモデルに合わせたモーションに変換したかった。

**モーションサポーター**

 - 機能概要：MMDのモーションを操作する時に便利かもしれない小ネタアプリ（デスクトップ）
 - 解説したかった課題：MMDモーションを作成する際に、標準・準標準に準拠して作ろうとすると若干無理が出るところがあり、それをフォローしたかった。

**MMD自動トレース**

 - 機能概要：MMDモーショントレースを自動で行うアプリ（Colab：ブラウザ）
 - 解決したかった課題：MMDのモーションデータは手でひとつずつキーを打っていくか、あるいはKinectなどのキャプチャーソフトを使用してキャプチャーを行うかの二択しか無かったため、単眼映像からモーションデータを生成できるようにしたかった。

内部処理はすべてPython

# ターゲットユーザー

MMDで遊んでいるユーザー　…　PCは持っているが、スペックと習熟度は人それぞれ。年齢性別も千差万別。

# 心がけた点（デスクトップアプリ）

 - **ユーザーフレンドリーである事**
    - MMDは（多くは無料配布されている）モデルとモーションを手元にダウンロードして、読み込むとそれだけでモデルがモーションを踊ってくれる、という気軽なソフト。その為に使用するツールも出来るだけユーザーにとって気軽に使ってもらえるものにしたかった。
    - 工夫点
        - ファイルの指定は、ファイルダイアログ・D&D・履歴の3種類から好きに選べるようにした。
        - 現在の進捗（全体の工程のどこまで進んだか等）をユーザーが確認したい時に確認できるようにした。
        - 選択肢は出来るだけプルダウンやスライダーなどで、感覚的に指定できるようにした。
        - MMDの表示形式に合わせたレイアウトとするとことで、学習コストを下げた。
 - **繰り返し使ってもらえる事**
    - モデルとモーションの組合せはとても多くあるため、そのたびに変換をしてもらえるようにしたかった。
    - 工夫点
        - 過去に設定した内容を記録して、履歴として再利用できるようにした。
        - 履歴データはJSONとして外部保持し、バージョンが上がっても移植できるようにした。
        - 速度にも考慮して、Cythonや並列処理などを取り入れた。
            - マシンスペックに配慮して、デフォルトのexeでは並列処理を行わず（正確には並列数1）、並列数5で実行出来るハイスペック版を提供した。
 - **エラーハンドリングを丁寧にする事**
    - エンジニアではない人々は、ログがずらーっと出ていても、どれがエラーメッセージに相当するものなのかなどを判断することはできない。逆に、エンジニアとしては、ログそのものを提出してもらわないと、エラーメッセージだけでは原因の判断がつかない。
    - 工夫点
        - 最初に、「どういった処理をどのバージョンで行うか」のメッセージを表示するようにした。
        - デフォルトのexeの他にログファイル出力版を提供し、問題が起きた場合に、情報を提供してもらいやすくした。
        - ハンドリングできるエラーについては、エラーログまでは出力せず、「何が問題で、どう対処すべきか」をメッセージとして表示するようにした
        - 想定外のエラーについてはエラーログまですべて出力し、エラー理由まで追えるようにした。

# 心がけた点（Colabアプリ）

- **どこまで進んだかを明確にする**
    - セルにナンバリング表記を追加して、順番に処理してもらえるよう促した。（これにより、サポートもやりやすくなった）
    - それでもすっ飛ばされる事が多かったため、各セル単位で実行有無をチェックして、前のセルが実行されていない場合には、実際の処理前にエラーを出すよう心がけた
    - 不安にさせないため、無視可能な警告などは、図入りで案内するようにした。
    - 内部処理では、`tqdm` を活用して、長いループ処理でどのくらい進んだか、またいつ頃終わるかを表記するようにした。
- **ブラウザ上で出来るだけ完結させる**
    - Colab内でmp4をwebmに変換して表示させるなどして、出来るだけブラウザのみで作業が完結するようにした。
- **使い方動画を作成する**
    - 文章だけではイメージがつかみ取ってもらいにくいため、動画でひとつずつの作業を案内した。

# 成果

 - VMDサイジング：累計DL数　約13500
 - モーションサポーター：累計DL数　約1200
 - MMD自動トレース：リリースしたばかりでまだ不明

# 所感

 - ユーザーフレンドリーは難しいし面倒くさい。だが、きちんと作り込めば、その分だけ使ってもらいやすくなる。
 - 普通の人の感覚だと「なんか分からないから不安」というのがかなりありそう。その不安を具体的な数字を示すことである程度取り除く事が出来る。
 - 沢山のユーザーに喜んでもらえたのがとても嬉しい。

Merry Christmas & Happy New Year !!!
【備忘録】フィボナッチ数列について

# フィボナッチ数列について
直接的な言語で出てくることがあるのかは、今後に任せるとして…
このような数列があるということだけは覚えておきたい。

```
1,1,2,3,5,8,13,21,34...
```
n番目の数(n-1)番目と(n-2)番目の数の和からなっている数列。
この数列を覚えるというよりは、算出するときの考え方・頭の柔らかい使い方を覚えておきたい。

```php
$a = 1;
$b = 0;
// 以下部分をwhile文だったりfor文だったりでループさせる。
$s = $a + $b; // この値をechoで出力したりする。そしてこの後の考え方が重要だと思った。
$a = $b;
$b = $s; // $aに$bを、$bに$sを入れていくことで、n-1番目とn-2番目を表現していくことができる。
```
とても素敵な考え方だと思った。
覚えておきたい考え方…多いなぁ…
【FileMaker】FileMaker Goアプリをわざわざ開けずにFileMakerアプリを立ち上げる

FileMaker Proで開発したアプリは、FileMaker Goに入れたらFileMaker Goを開いてからそのアプリを立ち上げる、という一つの方法しかない、と思ってませんか？

実は簡単にホーム画面にアイコンを追加して、あたかも独立したアプリのように立ち上げられます。

例えば、こんな。
![IMG_3481.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/b97d266e-7ddd-aa5f-8b52-1e20a9519717.png)
おおおーーーー！
ってなりましたか？

めっちゃ簡単です。（当社比）

ここ最近いくつか挙げている、「ショートカットアプリ」を活用します。
↓あなたのiPhoneやiPadにもこのアイコンがホーム画面にありませんか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/40b2097b-37ec-8b38-9296-a2d8c454a33e.png)
これが、「ショートカットアプリ」です。

では、早速やっていきましょう。

1.ショートカットアクションを作成
ショートカットアプリを開いたら、「マイショートカット」（最初に出てくる画面）の右上にある「＋」をタップして、新しいショートカットを設定します。
![IMG_3484.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/1a774aff-1156-ecc0-33da-35b9eed68524.png)

2.アクションを指定する
「アクションを追加」をタップしてスクリプティングを選択します。
![IMG_3485.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/ec4a3c8e-8744-003b-851b-5ba57f8f3b27.png)

3.XコールバックのURLを開く
「XコールバックのURLを開く」をタップします。
似ているようで全然動きが違う「URLエンコード」はタップしないように。
![IMG_3486.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/55adeffe-8da4-0557-c83a-f8b81df5a501.png)

4.fmpで始まるコールバックを指定
fmpで始まるコールバックの書き方やその他設定の仕方は、[【FileMaker】このお客さんの情報って、、、とiPhoneでFileMakerをすぐ閲覧したい](https://qiita.com/tyuma/items/4a08cb29daccfa2dba42)を参考にしてください。
![IMG_3483.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/f791a78b-1fe2-0ba3-05e0-6ccb1d9428ab.png)
アプリ名はなんでもいいのですが、あまり長いとアイコンの幅に収まらないので10文字くらいに納めておいた方がいいです。

5.まさにボタンマーク（設定）をタップ
作成したショートカットの右上にある丸ボタンをタップします。
ここが、ホーム画面にアプリを置く設定の入り口です。
![IMG_3483.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/ddf1f9e0-436b-d001-86a7-414f3d4be4d7.png)

6.アイコンを整える
アイコン、色やマークを変えられます。
![IMG_3479.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/d7a25d58-7455-45aa-f201-083cf910b8b3.png)
![スクリーンショット 2020-12-18 22.39.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/be23fafb-0ac0-10db-6159-bb775a12858e.png)

7.設定を確認して追加
アイコンやアイコン名がこれでよければ、「追加」をタップしてホーム画面に追加します。
![スクリーンショット 2020-12-18 22.42.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/8a1ad1a8-a25c-7811-9930-96f40d19d925.png)

と、こんな感じで、見た目プロっぽいオリジナルアプリの完成です。
FileMaker Goアプリを知らないユーザも、こうしてホーム画面にアイコンがあれば馴染みやすいですね。
今年のヒーローズ・リーグ オンライン2020を裏で支えた「ProtoPedia2.0」の話

一枚の個人賞から始まったProtoPediaの改修計画、そのフェーズごとの裏話を綴ってみました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/f358aef0-119f-600e-e7d8-4322bf75ec1d.jpeg" width="300">
[ProtoPedia 2.0](https://protopedia.net/prototype/1946)の作品は[こちら](https://protopedia.net/prototype/1946)から！

# 1. 1.0から2.0への移行計画
1.0 の時はのシステムはCMSのDrupal 8.0 をベースにProtoPediaは構築されており、いろいろなプラグインをつかっていました。
ProtoPedia 1.0 をリリースした時はよかったのですが、時間の経過ともにCMSのバージョンアップをそのままにしていたり、プラグインの廃止等もあり、この状態からProtoPediaの拡張はできるのか？バージョンアップはできるのか？結果として、誰も触れない状態になってしまった。。。
そんなこともあり、**新しいProtoPediaを作ろう！！！**と計画は始まりました。

# 2. データ移行どうするの？
でも、**新しいProtoPediaを作ろう！！！**と言っても、ProtoPedia 1.0 はHacklog※1 の時のデータも保持しており、データの移行は必須でした。
Hacklog の前には MakersHub という同じようなサービスも終了しており、ここら辺のサービス終了はいろいろと悪評もたっていたりしました。
なので、[DrupalのDB構造](https://annai.co.jp/article/drupal8-node-structure-1)を解析して、解析した内容から移行用のViewを作り、新DBにデータを移行する方法をとりました。
DBの解析とデータ移行ツールの作成は１ヶ月くらいかかりましたね。。。

※1:Hacklog は ProtoPedia 1.0 の前身となっていたサービスで2018/6/20にサービス終了。

# 3. リリース時期を早めたい
システムを作り始めてから開発も波に乗り、当初の予定では11月中くらいの予定でしたが、作ってみるといい感じて、新しいUIの作品登録の部分だけでも ProtoPedia 2.0 を先行してリリースしたい！！！
そんな感じで、10/10のリリースが決定したのですが、、、

表には見えない機能もあるわけで、

* ログイン機能の調整（SNSログイン、新旧ユーザーの整合性、パスワードリセット）
* 作品データの項目差異の調整（新旧のデータでの項目違い）
* 開発素材の機能もテクニカルパートナーで使えるように
* などなど・・・

新規開発ではなく、システム改修なので、いろいろとリリースまでには調整がたくさん入りました。

# 4. フィードバック機能ほしい

Hacklog にあって ProtoPedia でなくなったもの。
それが、コメントやいいねのフィードバック機能でした。
通知機能は 2.0 の新機能ですが、自分の中では落ち着いてから実装しようと思っていましたが、やはり強い要望？で実装を早い段階で対応しました。

やはり、自分の作品を公開するポートフォリオになるとフィードバックがあると通知が欲しい、コメントやいいねがあるとテンションが上がる、閲覧数みんなが見てるテンション上がる！！！

実装して正解でしたね。　

# 5. 受賞の公開をProtoPediaで行いたい

2.0 の機能でイベント機能があり、コンテストを開催したい場合に利用すると作品応募から受賞のお知らせまで、行うことができるようになるのですが、リリース時は作品を応募するだけの機能でした。

[受賞の公開](https://protopedia.net/event/1)はこの時点では対応していませんでした。
受賞の公開を新しい ProtoPedia で行いたい。この部分は、いろいろと大変で、賞をもらった人は分かるかもしれませんが、作品ページ内に受賞マークがついたり、コメントが付いたり、受賞のお知らせで通知が飛んだり、システム的にも多岐にわたり、リリース後の気遣いも大変でした。
途中ミスって一部の人たちにメールが飛んだりもしていて（ごめんなさい🙇）、とにかくに気を使いました。

でも、受賞で喜んでる人たちも多く、受賞の発表で機能を通して、反応が見えるのは開発者冥利につきましたね。

# 6. まとめ

**コンテスト駆動開発？**というものがあるなら、これはコンテストに合わせてリリースを行っていく**リアルコンテスト駆動開発**なので、失敗もなく、たくさんの人に使ってもらえたことで、今年もゆっくりとHLロス（昔はMAロス）になることができそうです。来年はまた癒しを求めるサービスが作れそう。。。



<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/3ffe7bbc-1475-544d-37ec-2acf56c96f74.jpeg" width="300">
アプリケーションのエラーメッセージを日本語化にする

今回はアプリケーションのエラーメッセージの日本語設定についてです。

##日本語化設定
application.rbを編集して、言語設定を変更します。
:jaは日本語設定にするという意味です。

```ruby:config/application.rb
# 中略
module hoge-app
 class Application < Rails::Application
   # Initialize configuration defaults for originally generated Rails version.
   config.load_defaults 6.0

   # 日本語の言語設定
   config.i18n.default_locale = :ja
　　# 省略
 end
end
```

```ruby:Gemfile
gem 'rails-i18n'
```
記入後はbundle install。

登録されている日本語は下記のURLから参照できます。
[rails-i18nに登録されている日本語](https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/ja.yml)

##日本語化用のファイルを作成
エラーメッセージを全て日本語にするためには、もう一つファイルを用意する必要があります。そのファイルのことをlocaleファイルと言います。

locale（ロケール）ファイルとは、様々な言語に対応できる言語ファイルです。
localeファイルの中に日本語化用のファイルを作成することで、英語を日本語に翻訳してくれます。

そして、その日本語へ翻訳するためのファイルは、通常YAMLというファイル形式を用います。
YAMLとは、ファイルの書き方のルールの一つで、中身が文字だけで記述されてるテキストファイルです。
database.ymlもこれに当てはまり、データベースの接続に必要な設定が記述してあります。

デフォルトでは、下記の例のように「英語」でYAMLファイルが書かれていますので、一部の該当箇所のエラーメッセージが英語で表示されます。

```ruby:例】config/locales/devise.en.yml
en:
 devise:
   confirmations:
     confirmed: "Your email address has been successfully confirmed."
     send_instructions: "You will receive an email with instructions for how to confirm your email address in a few minutes."
   errors:
     messages:
       already_confirmed: "was already confirmed, please try signing in"
       not_found: "not found"
```

config/localesディレクトリに、devise.ja.ymlというディレクトリを手動で作成します。

下記のサイトに記述内容が掲載されているので、丸ごとコピーして作成したdevise.ja.ymlの中に貼り付けます。
[devise.ja.yml](https://github.com/tigrish/devise-i18n/blob/master/rails/locales/ja.yml)

これでほとんどの日本語設定は済んでおりますが、「Nickname」、「Text」、「Image」などは
Gem 'rails-i18n'やdevise.ja.ymlを導入したことによって使える日本語に含まれていないので、英語で表示されてしまいます。
したがって、これらを翻訳するファイルを手動で作成していきます。

config/localesディレクトリに、ja.ymlディレクトリを作成。

```ruby:config/locales/ja.yml
ja:
 activerecord:
   attributes:
     user:
       nickname: ニックネーム
     tweet:
       text: テキスト
       image: 画像
```

最後にテストコードのエラーメッセージ文が英語のままになっているので↓

```ruby:spec/models/user_spec.rb
it "nicknameが空だと登録できない" do
       @user.nickname = ''
       @user.valid?
       expect(@user.errors.full_messages).to include("nickname is invalid")
     end
```

```ruby:spec/models/user_spec.rb
it "nicknameが空だと登録できない" do
       @user.nickname = ''
       @user.valid?
       expect(@user.errors.full_messages).to include("ニックネームを入力してください")
     end
```

日本語に直して完成です。