OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.jsで簡易的ないいねボタン

こんにちは
Vue.jsに関して色々調べながら書いてます。
備忘録で簡易的にコンポーネントに関して色々勘違いしていたので
書き直してみました。
（触り始めたばっかなので間違ったらそっと教えていただければと思います！）

vue-cliでのプロジェクトの作成やらは省きます。
（いっぱい記事あったので書いても意味ないかなと🤔）

##環境
vue/cli 4.4.6
vue: 2.6.11
FontAwsome（アイコンで使いました。CDNでやっちゃってます）

##ディレクトリ
![スクリーンショット 2020-08-27 22.59.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383398/614d3532-b7f0-2169-0f4c-6b4932ab212f.png)

この画像のWEB以下のcomponentsとviewsを使います。（あとrouter）
（Javaのプロジェクトも混ざってるのでbuile.gradelとか余計なファイルもあります🙇‍♂️）

##components
componentsのディレクトリの下に"goodButton.vue"というファイルを作成します。
src/
&nbsp;&nbsp;&nbsp;&nbsp;├ components/ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└ GoodButton.vue

```vuejs

<template>
  <div>
    <!-- fontawsomeのCDN -->
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <i
      class="far fa-heart"
      @click="clickHeart"
      :class="{ 'heart-red' : isActive }"
      >
      <span class="count">{{ goodArticleCount }}</span>
    </i>
  </div>
</template>

<script>
export default {
  data () {
    return {
      goodArticleCount: 0,
      isActive: false
    }
  },
  methods: {
    clickHeart () {
      if (this.isActive) {
        this.goodArticleCount = this.goodArticleCount - 1
        this.isActive = false
      } else {
        this.goodArticleCount = this.goodArticleCount + 1
        this.isActive = true
      }
    }
  }
}
</script>

<style>
  .fa-heart {
    font-size: 20px;
    margin-left: 35px;
    color: #5F5B5B;
    position: absolute;
    top: 150px;
    left: 700px;
  }

   .count {
    color: #5F5B5B;
  }

  .heart-red {
    color: red;
  }
</style>

```
ボタン押したらカウントが0から１になる。
もう一度押したら1から0になる。
ハートのアイコンが灰色から赤色になるという処理を書いてます。
（めちゃくちゃ簡単に書いてます。バックエンドのこととかは意識してません）


##views
次にGoodButton.vueをviewsの下に作成したgoodButtonResult.vueにてimmportし、
componentとして利用します。

src/
&nbsp;&nbsp;&nbsp;&nbsp;├ components/ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└ GoodButton.vue
&nbsp;&nbsp;&nbsp;&nbsp;│
&nbsp;&nbsp;&nbsp;&nbsp;├ components/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└ goodButtonResult.vue

```vuejs
<template>
  <div>
    <good-button></good-button>
  </div>
</template>

<script>
import GoodButton from '../components/GoodButton'
export default {
  components: {
    'good-button': GoodButton
  }
}
</script>

```


##結果
![スクリーンショット 2020-08-28 14.42.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383398/abd309c3-ed5f-08e8-3ef4-e779e8dca183.png)
![スクリーンショット 2020-08-28 14.42.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383398/4acec38b-0e76-f2ba-226d-42fd973c6ab8.png)

クリックすると赤くなり１カウントされます。

##命名規則とかも注意した方が良いかも🤔
👇のQiita参考にしました（ドキュメントにも同じように書いてあったような）
https://qiita.com/ngron/items/ab2a17ae483c95a2f15e




>引用
https://jp.vuejs.org/v2/guide/components.html

まだまだ不足してる情報等発見したら書き足すか別記事にて🙇‍♂️
Snowflake のデフォルトウェアハウスは自分のものしか変更できない

## 背景

ACCOUNTADMINロールを持ったユーザで、他のユーザのデフォルトウェアハウスを変更しようとしたのだがエラーが出て動作しなかった。

```
ALTER USER HOGEUSER SET DEFAULT_WAREHOUSE='HOGE_WH';

=>SQLアクセス制御エラー： user 「HOGEUSER」で操作するには権限が不十分です
```


## 解決

該当のユーザでログインして、デフォルトウェアハウスを変更しましょう。

```
HOGEUSERでログインし直す

ALTER USER HOGEUSER SET DEFAULT_WAREHOUSE='HOGE_WH';

=>成功
```


## 理由

デフォルトウェアハウスなど一部のオブジェクトパラメータは、該当ユーザ自身でしか変更できない。
ドキュメントには日本語では変更できないとは書いていないけれど、実際にはできなかったので注意してください。

https://docs.snowflake.com/ja/sql-reference/sql/alter-user.html#usage-notes

>個々のユーザーは自分で ALTER USER コマンドを実行し（つまり、コマンドでユーザー名/識別子を指定することにより）、以下を変更できます。
>・DEFAULT_WAREHOUSE
>・DEFAULT_NAMESPACE
>・DEFAULT_ROLE
>・セッションパラメーターのデフォルトのいずれか
DroidKaigi 2020 Liteで知らなかったことメモ

ちょっと見てみて知らなかったことをメモしておきます！Lite版でしたが楽しかったです！
まだ今日のナイトセッションと明日のコードラボがあるようなので楽しみにしています！！ :eyes: 

# MDCの内部実装から学ぶ 表現力の高いViewの作り方 / HiroYUKI Seto
https://www.youtube.com/watch?v=cReIMUxMxs4

## MaterialShapeDrawable  
backgroundとして使うDrawable
いろんなカスタマイズができる
**Shadowのカスタマイズもできるので複雑な形のShadowが表示できる。ただAndroidのShadowより少し濃いShadowになる。**

MaterialShapeDrawableがMaterialShapeDrawableStateを持っていて、その中でShapeAppearanceModelが保持される。
ShapeAppearanceModelに形状や辺や角などの設定がある

## Drawable  
**intrinsicWidth / Height**
BitmapDrawableでは画像の解像度
VectorDrawableではwidthなどに設定されているもの
**これを参考にViewがサイズを決める**

## Viewの再描画
invalidateではなく、postInvalidateを使うと別のThreadからinvalidateを呼べる。内部的にHandlerが使われるので、遅れる可能性がある。postInvalidateOnAnimationを使うと次のフレームで再描画を呼ぶことができるので、遅れる可能性が少ない。

## BottomAppBarのテキストのアニメーション
**TextViewではTextSizeを変化させると再レイアウトが走ってしまうため、TextScaleというTransitionを使って、ValueAnimatorでscaleX、scaleYを変化させる。**
TextInputLayoutではCanvasを使ってTextの大きさを変える。(こちらは知っていた)


# 自動生成でさくさく実装するユニットテスト / Nozomi Takuma
https://www.youtube.com/watch?v=lj6IMuRcVHY
https://github.com/tkmnzm/test-gen を使うと
fun test(a: String, b:String) :Boolean {}みたいな関数からgenerateでParameterized testを自動的に生成してくれる！
IntelliJプラグインを作る知見などが語られています。

Night Sessionメモ:
**RobolectricがJUnit５で動かないらしい。**
あとRuleはextensionに移植する必要がある。
UIテストのパターンとして、Page Object Design Patternというのがあるらしい。

# Androidで音声合成(TTS)をフル活用するための知識と実践事例 / maKunugi N/A [JA]
https://www.youtube.com/watch?v=yIbqlAM080s
音声合成 = 読み上げ
音声合成はWaveNetというのがブレイクスルーだった(Googleが2014年に買収)
Android 1.6から音声合成が使える
TextToSpeachのかんたんな使い方をわかりやすく説明してくれていました。
Google CloudのText to Speechを利用するとSSML、音声合成用のマークアップ言語で取得できる。

contentDescriptionにsubmit buttomみたいにすると submit button buttonみたいに言われてしまうので良くない。

# KotlinのDelegated Propertiesを活用してAndroidアプリ開発をもっと便利にする / chibatching
https://www.youtube.com/watch?v=G5x1WUMj1gE
lateinitはprimitive型だと使えない。DelagetedPropertyのDelegates.notNull()であれば使えるが、これは**Javaコード的にはfinalなフィールドなのでDaggerが使えないので困る。がsetterは使えるので `@set:Inject`であればInjectできる。**

Delegates#vetoableを使うと代入を受け入れるかどうかを判定して行うことができる。
DelegatedPropertyでは重たい処理は意図せずに使ってしまうので向かない。

provideDelegate operatorでDelegatedPropertyを返すようにすることで、provideDelegateオペレーターを実装しているクラスとは別のクラスでDelegatedPropertyを実装できる。イメージ

```kotlin
val a by B()

class B {
  operator provideDelegate(..): DelegatedProperty {
     return C()
  }
}

class C : DelegatedProperty...
```
HTTPメソッドの指定がない場合はブラウザ側はGETでリクエスト

#環境
・Rails 6.0.3.2
・mysql Ver 14.14 Distrib 5.6.47
・osx10.15

#はじめに
Railsで初めてWebアプリを作成中、`form_with`や`link_to`を使用するとき`HTTPメソッド`の指定がないのに`ルーティング`が動いていいることに疑問を感じて調べた内容です。

#ルーティングとは
`URI Pattern`と`HTTPメソッド`を受け取り、どのアクションを動かすかを指定する役割があります。
なのでブラウザ側で`URI Pattern`と`HTTPメソッド`を指定する必要あります。

#たとえば

詳細ボタンを押すとあるアクションが動く記述（こちらはPrefix）

```erb
<%= link_to '詳細', tweet_path(tweet.id), method: :get %>
```

とか（こちらはURI Pattern）

```erb
<%= link_to '削除', "/tweets/#{tweet.id}", method: :delete %>
```

みたいに`method:`でHTTPメソッド指定と`URI Pattern`の指定がなされている



#[本題]HTTPメソッドの指定がない場合
具体的には以下のような記述

```erb

<%= link_to '詳細', tweet_path(tweet.id) %>
```

上記の例と見比べると`method: :get` がなくても正常に動きます。

あれ？HTTPメソッド指定ないのに？？？

初心者の私にとっては指定がないのになぜ動くの？
ルーティングのルールがわからなくなった瞬間でした。。。

#結論

`HTTPメソッド`の指定しない場合、ブラウザ側ではデフォルトでサーバーに対して `GET` でリクエストを送るということです！
`Rails`のルーティングなどに関係なくただブラウザの話。
（※コメントにてご指摘いただき修正しました）

なので指定なくともブラウザが`URI Pattern`と`HTTPメソッド`を送信し、あるアクションが動いたということになります！！

指定されてないのに動くってことに初心者の私にはなかなかわからない感覚でした。

#参照
Railsのルーティング
・https://railsguides.jp/routing.html
【iOS14版】iOSのアップデート対応についてざっくり調べてみた

こんにちは、ITクライマーです。
エンジニアとクライマーを彷徨っています。

iOSアップデート対応について、具体的に何をするか調べてみました。
今回はiOS14版です。

##OSアップデートの時期
>■過去リリース履歴
・iOS13：2019年9月13日
・iOS12：2018年9月12日
・iOS11：2017年9月23日
・iOS10：2016年9月13日

**毎年9月にメジャーバージョンがリリース**されていますね。
リリースのプレッシャーがやばそうなAppleさん。

公式発表はされていませんが、[iOS14も2020年9月14~18日頃にリリースされる予定](https://www.macworld.co.uk/news/apple/ios-14-release-date-3779520/)です。

##iOS14のBeta版でアプリの動作確認

通年通りですと、**6月頃に新しいOSのBeta版がエンジニア向けにリリース**されます。
また、Beta版自体も数週間単位でアップデートされるみたいです。

具体的な確認手順は以下です。
###■手順
1. [Apple Developer Programに登録する](https://developer.apple.com/jp/programs/enroll/)
2. [デバイスのバックアップをとる](https://support.apple.com/ja-jp/HT203977)（Beta版からOS復元用）
3. [Beta版を実機にインストールする](https://developer.apple.com/jp/support/install-beta/)
4. Beta版で既存アプリの動作確認をする
5. [Beta版から既存のOSバージョンに復元](https://support.apple.com/ja-jp/HT203282)

[4.]のBeta版で問題が発生した場合は、iOS14がリリースされる前に対応するべきか検討が必要ですね。

##Xcode12のBeta版でアプリの動作確認

続いては、Xcode(開発環境)のBeta版で動作確認をします。

[Xcode12のBeta版をインストールする方法](https://developer.apple.com/jp/xcode/resources/)
※Apple Developer Programの登録は不要みたいです。

Xcode12からiOS14のSDKが含まれるため、**iOS14の機能を利用したい場合はアップデートが必要**ですね。
##※iOS14とXcode12のアップデートは別で考える
私はここで躓きました。
iOS14リリース時にXcodeを最新版(今回はXcode12)にアップデートする必要があると勘違いしていたことです。

###■iOS14
既存の開発環境(例えばXcode11.3.3)でiOS14が動くのであれば直近は大丈夫。問題があれば対応。

###■Xcode12
iOS14の機能を利用したい場合やAppleから強制アップデートの警告がきた場合は対応。
##iOS14のRelease版でアプリの動作確認
iOS14が正式にリリースされた後、再度既存のアプリで動作確認をします。
※今までの確認はあくまでBeta版なので、Release版で最終確認が必要です。

##Xcodeの強制アップデート警告を監視
>■Xcode12
Appleから強制アップデートの警告がきた場合は対応。

以前Appleから[「2020年6月30日までにXcode11以上にアップデートしないとリリースできないよ〜」](https://developer.apple.com/news/?id=09102019a&1568158483)と警告がきました。

Xcode12に関してもおそらくアップデートの喚起が来るため、Appleの公式ニュースを随時チェックしておくことをおすすめします。

##おわりに
諸々のバージョンアップは大変ですが、アプリで実現できることは増えるため、頑張る価値はあるのかなと思っています。(対応しないとアプリがクラッシュする可能性があるので、ほぼ強制イベントだけど前向きに捉えたい。)

もし、情報に不備があれば教えてください。
最後まで読んでいただきありがとうございました！
guzzleでHttp通信をするときにcurlでいう--noproxyオプションを使用する

requestを呼ぶときに

```
'proxy' => ''
```
をoptionsに指定すればOK。


```php5
$client = new \GuzzleHttp\Client();
$method = 'POST';
$url= 'http://url.com';
$options = [
    'form_params' => [
        'param1' => 'AAAAA',
        'param2' => 'BBBB',
        'param3' => 'CCCC',
    ],
    'proxy' => ''
];
$response = $client->request($method, $url, $options);
JavaScriptでDropboxにファイルをアップロードしてみました

#はじめに
　Javascriptからファイルをアップロードできるクラウドサービスとして、iCloudやFirebaseがしばしば使われます。しかし、Macを持っていないと開発が困難になったり、アップロードしたファイルがまとめてダウンロードできなかったりと、必ずしも便利とは言い切れません。そこで、OSを問わず、ダウンロードや共有も簡単なDropboxに接続してみることにしました。

#Dropbox API Appの作成

　[Dropboxの開発者ページ](https://www.dropbox.com/developers)から新規アプリを作成します。
　ちょっと古いですが、[こちらの記事](https://qiita.com/ka24/items/845fb7811eca731d44dc)などを参考にしました。

#コード
```javascript:index.html
<!doctype html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
<body>
    <form id="form">
        <h3>ファイルを選択してアップロード</h3>
        <input type="file" id="file">
    </form>

    <script>
        var input = document.getElementById("file");

        //ダイアログでファイルが選択された時
        input.addEventListener("change",function(evt){
            //ファイルを取得      
            var file = evt.target.files;

            //ファイル名を取得
            var name = "/" + document.querySelector('#file').files[0].name;
        
            //FileReaderの作成
            var reader = new FileReader();

            //テキスト形式で読み込む
            reader.readAsText(file[0]);
            
            //読込終了後の処理
            reader.onload = function(ev){
                //ドロップボックスのファイルAPI
                json = {
                    url: 'https://content.dropboxapi.com/2/files/upload',
                    type: 'post',
                    data: reader.result,
                    processData: false,
                    contentType: 'application/octet-stream',
                    headers: {
                        "Authorization": "Bearer <YOUR ACCESS TOKEN>",
                        "Dropbox-API-Arg": '{"path": "'+name+'","mode": "add","autorename": true,"mute": false}'
                    },
                    success: function (data) {
                        console.log('s' + data);
                    },
                    error: function (data) {
                        console.error('e'+ data);
                    }
                }

                //ドロップボックスにアップロード
                $.ajax(json)
            }
        },false);
    </script>
</body>
</html>
```
　しかし、このままではアップロードできません。

#日本語対応ではない？
　理由は不明ですが、ファイル名がUTF-8でなければエラーが出ます。
　そのため、変数nameの文字コードを変換します。[こちら記事](https://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html)を参考にしました。

```javascript
//ファイル名を取得
var name = "/" + document.querySelector('#file').files[0].name;

//ファイル名をUTF-8に変換
var name = encode_utf8(name);

function encode_utf8(s){
    return unescape( encodeURIComponent(s));
}
```

#おわりに
　DropboxのAPIは無料で使えますが、割り当て（クオータ）については調べませんでした。あくまでも趣味の範囲で使う程度になるのかなと思います。
クラスとインスタンスについての考察

<h1>クラス、インスタンスについて</h1>

クラスフィールド・クラスメソッド・インスタンスメソッドのスコープ及びインスタンス変数の効果範囲がいまいち理解できていなかったのでまとめてみました。

理解は深まったのですが、新たな謎が生まれました。

指摘や補足など、教えていただけると幸いです。 

<h3>◆記述内容(説明)</h3>

```ruby
class Zoo
def self.kind(animal_name)
@animal_name = animal_name
puts @animal_name #出力:キリン
puts animal_name #出力:キリン
puts @name #出力:空欄
puts name #出力:Zoo
end

def self.kind_name
puts @animal_name #出力:キリン
# puts animal_name #出力:NameError
end

puts @animal_name #出力:空欄
# puts animal_name #出力:NameError

def initialize(new_animal)
@new = new_animal
puts "#{@new}が増えました。" #出力:新たな仲間が増えました。
end

def kind(name)
@name = name
puts @animal_name #出力:空欄
# puts animal_name 出力:NameError
puts @name #出力:ライオン
puts name #出力:ライオン
end

puts @name #出力:空欄
puts name #出力:Zoo

def color(animal_color)
@color = animal_color
# puts name 出力:NameError
puts "#{@new}の#{@name}は#{@color}です" #出力:新たな仲間のライオンは黄色です
# puts name 出力:NameError
end
end

Zoo.kind("キリン") 
#クラスメソッドself.kindの実行
Zoo.kind_name
#クラスメソッドself.kind_nameの実行

animal = Zoo.new("新たな仲間") 
#animalインスタンスの作成、initializeメソッド実行
puts animal.kind("ライオン") 
#animalインスタンスのkindインスタンスメソッド実行

puts animal.color("黄色") 
#animalインスタンスのcolorインスタンスメソッド実行
 
# ↓スコープ外
# puts @animal_name 出力:空欄
# puts animal_name 出力:NameError
# puts @name 出力:空欄
# puts name 出力:NameError
```
<h3>◆ターミナル出力内容</h3>

```ruby


Zoo
キリン
キリン

Zoo
キリン
新たな仲間が増えました。

ライオン
ライオン

新たな仲間のライオンは黄色です
```
<h3>◆結論</h3>

・出力内容は、クラス部分含め上から順に読み込まれた内容になる。

・インスタンス変数は、クラスメソッド同士もしくはインスタンスメソッド同士
 でなら相互に出力可能。
 ただし、クラスメソッドにはインスタンスが作れないので、
 @はただクラスメソッド間を繋ぐパイプになる。

・インスタンス変数は、スコープ外に配置してもNameErrorにはならないが、
 出力先に空欄を作ってしまう。
 
<h3>◆新たな疑問</h3>

・なぜ、インスタンスメソッド以外のクラスフィールド内(クラスメソッド含む)で、
 定義されていないnameを出力するとクラス名が出力されるのか。
timesメソッドについての考察

<h1>timesメソッドについて

 

timesメソッドのスポットの位置と、ブロック変数の意味は0から数える以外にあるのか正確な認識ができていないと感じ、何パターンか試して自分なりにまとめてみました。　


```ruby

colors = ["あか", "あお", "きいろ"]
element_count = colors.length

i = 0
num = 0

element_count.times do |i|
    i += 1
    num += 1
end

# num = 0  ここでnumを定義=>変数が定義されていないのに+は何故のエラーが発生
       # → timesメソッド内をnum = 1にすると出力はでるが、0となる(スポット)

puts i #出力は0
puts num  #出力は3

#------------------------------------------------------------------
#ブロック変数iで定義されたiを出力しようするとNameError(変数名iは定義されていない)。
#ブロック変数は出力できない。
#ブロック変数iと変数iは同じ見た目だが、全く別の変数である。

````


認識の違いや、補足等あれば教えていただけると幸いです。
PHP ファイルの内容を書き込み、読み込み

##ファイルの書き込み
file_put_contents("ファイルの場所","書き込みたい内容");
file_put_contentsは戻り値を持つためif文でチェック可能


```php:qiita.php
<?php
    $check = file_put_contents("news_data/php_lesson.text","2020-08-28,ファイルの書き込み");
    if ($check){
        print ("書き込み完了");
    }else{
        print ("書き込みエラー");
    }
    ?>
```



##ファイルの読み込み
file_fet_contentsの戻り値が読み込んだデータとなる

```php:qiita.php
<?php
    $check = file_get_contents("news_data/news.text");
    print ($check);
    ?>
```

read_fileでは戻り値をprintしなくても出力できる
この場合は、読み取ったデータを加工できない

```php:qiita.php
<?php
    readfile("news_data/news.text");
    ?>
```


###データの追加
.=とすると文字列の後に追加される

```php:qiita.php
<?php
    $news = file_get_contents("news_data/news.text");
    $news .= "追加データ";
    file_put_contents("news_data/news.text",$news);
    print ($news)
    ?>
```

文字列の前に追加したい場合

```php:qiita.php
<?php
    $news = file_get_contents("news_data/news.text");
    $news = "追加データ".$news;
    file_put_contents("news_data/news.text",$news);
    print ($news)
    ?>
```

##XMLの情報を読み込む
XMLとは
>XMLは、文章の見た目や構造を記述するためのマークアップ言語の一種です。
拡張できる様々な分野で利用可能。
一般的にはRSS（更新情報）で利用されている。



```php:qiita.php
<?php
    $xmlTree = simplexml_load_file('http://nakata.net/feed/');

    foreach ($xmlTree->channel->item as $item):
        ?>

        ・<a href="<?php print($item->link); ?>"><?php print($item->title); ?></a>

    <?php
    endforeach;
    ?>
```

プロパティの関係はこのようになっており、
->で中の要素にアクセスしていく
itemは配列になっているため$itemで格納していく

```
<channel>
<item>
<title></title>
<link></link>
</item>
</channel>
```

##JSON
>JSONとはJavaScript Object Notationの略で、XMLなどと同様のテキストベースのデータフォーマットです。
短くかけてわかりやすいため、JavaScriptに限らず使われている。


jsonの内容がget_contentsのあと
decodeする事でPHPのオブジェクト化できる
xmlとjsonでは構造が異なる

```php:qiita.php
 <?php
    $file = file_get_contents('https://h2o-space.com/feed/json/');
    $json =json_decode($file);

    foreach ($json-> items as $item):
        ?>
        ・<a href="<?php print($item->url); ?>"><?php print($item->title); ?></a>

    <?php
    endforeach;
    ?>
```
pyautoguiを【超適当に】マルチディスプレイ環境に対応させる Part1

# 目的
pyautoguiをマルチディスプレイ環境下でも使いたい、より正確にはマルチディスプレイ環境下のサブディスプレイ内で画像認識させたい。
# 環境
python 3.8.5
pyautogui 0.9.50
pyscreez 0.1.26
OS windows限定
# 調査内容
参考:[pyautoguiのlocateOnScreen()がマルチディスプレイ非対応な理由](https://qiita.com/tatmius/items/b6ff8fa81d09c95374bd)
上記記事にて、以下の記述を発見。
>PILのimageGrab.grab()がデュアルディスプレイに対応していない

これを読んでおや？と思い、imageGrab.grab()の定義を確認してみた。

~~~python:imageGrab.py
def grab(bbox=None, include_layered_windows=False, all_screens=False, xdisplay=None):
~~~
~~~python:grab()
all_screens=False
~~~
それっぽい引数を確認、いつからかは知らないが少なくともpython3.8.5ではgrab関数も変更されているっぽい。
#実装内容
OSがWindowsの時、pyautoguiのlocateOnScreen()内でimage.grab()を呼び出しているのは以下の関数。

~~~python:pyscreez--__init__.py
def _screenshot_win32(imageFilename=None, region=None):
    """
    TODO
    """

    # TODO - Use the winapi to get a screenshot, and compare performance with ImageGrab.grab()
    # https://stackoverflow.com/a/3586280/1893164
    im = ImageGrab.grab()

    if region is not None:
        assert len(region) == 4, 'region argument must be a tuple of four ints'
        region = [int(x) for x in region]
        im = im.crop((region[0], region[1], region[2] + region[0], region[3] + region[1]))
    if imageFilename is not None:
        im.save(imageFilename)
    return im
~~~

なので、imageGrab.grab()に引数を渡してやる、それだけ。

~~~python:pyscreez--__init__.py
def _screenshot_win32(imageFilename=None, region=None):
    """
    TODO
    """

    # TODO - Use the winapi to get a screenshot, and compare performance with ImageGrab.grab()
    # https://stackoverflow.com/a/3586280/1893164
    #im = ImageGrab.grab()
    im = ImageGrab.grab(all_screens=True)

    if region is not None:
        assert len(region) == 4, 'region argument must be a tuple of four ints'
        region = [int(x) for x in region]
        im = im.crop((region[0], region[1], region[2] + region[0], region[3] + region[1]))
    if imageFilename is not None:
        im.save(imageFilename)
    return im
~~~

# 結果
サブディスプレイでも画像認識ができるようになった。

# 問題点
ディスプレイの並びが

~~~
[1][2][3]
~~~
や

~~~
[1][2]
[3][4]
~~~
のように行儀よく並んでいるならばよいのだが

~~~
[2][1][3] (我が家の配置)
~~~
のように並んでいると、locateOnScreenが返すのは[2]のLeftTopを(0,0)とした座標なのに対し、windows側が要求するのは[1]のLeftTopを(0,0)とした座標となってしまう。

この問題はwin32apiにモニターを列挙して座標を返すapiがあるので、次回それを利用して解決したいと思う。
今回はここまで。
データが余計に照合されて動作が重くなるN+1問題を解決したい


【概要】
----------------------------------------
<b>1.結論</b>

<b>2.N+1問題とは何か</b>

<b>3.なぜN+1問題になるのか</b>

<b>4.N+1問題を解決する方法</b>




1.結論
----------------------------------------
<b>includesメソッド</b>を使う！

<br>
2.N+1問題とは何か
----------------------------------------
アソシエーションをしている時に起こる問題です。
対策せずにアソシエーションを組むと AデータベースとBデータベースが
一個一個全てを参照していくことをしてしまうため
処理が多くなってしまい動作が遅れてしまう問題です。

由来は、全てのレコードをまとめて1個＋中身のレコードN個分ということでN+1となっています。

<br>
3.なぜN+1問題になるのか
----------------------------------------
例えば下記の例を見てみます。

```ruby:N+1問題

 class Student < ActiveRecord::Base
 has_many :personals
end
```


```ruby

class Personal < ActiveRecord::Base
 belongs_to :student
end

```

Student_Tabel

| id         | student_name | student_age|
|:-----------|------------:|:------------:|
| 1      | Ayabe        | 15        |
| 2    | Sato      | 16     |
| 3      | Ito        | 14         |

Personal_Tabel

| id         | student_id | student_personality|
|:-----------|------------:|:------------:|
| 1      | 1        | angry        |
| 2    | 2      | gentle     |
| 3      | 3       | smart        |
| 4      | 1       | shy        |
| 5      | 1       | forgetful        |


この状態の時に、

```ruby
@students = Student.all
```

とすると、StudentとPersonalを
モデルとデーターベースで１個ずつ照合した上で、
またコントローラーでビューに反映させる際に
同じことをしてしまいます。

この形ですと、(Studentsテーブル１回＋データの参照回数15回)*2回
の処理を行ってしまうということですね！


<br>
4.N+1問題を解決する方法
----------------------------------------
この問題を解決してくれるのが、<b>includesメソッド</b>です！

モデルとデーターベースで１個ずつ照合してしまう部分をとりあえず関連されたモデルは全部持ってきて、コントローラーでビューに反映させる際に１個ずつ照合することができます。

２度同じことしなくて済むのでその分処理が軽くなります。
上記は少ないデーターなのでたいしたことはないですが、これが何千個何万個となると処理もその分違いが出てきます。

使用の仕方は

```ruby
@students = Student.includes(:personal)

モデルの名前.includes(:紐づけたいモデルの名前）
```
のみです！

<br>
自身のIPv4アドレスを取得するbat

#はじめに
自身が所属するネットワークごとにbatが参照するファイルサーバーを変えたいということがあった。
自身にインストーラーをコピーし実行するという内容のbatのため、
ネットワーク負荷の観点から自身が所属するセグメントごとにコピー元サーバーを変えたい。
自身のIPアドレスを取得する方法を色々試した末に以下の形に落ち着いた。

#検証環境
・Windows10 64bit Professional 1909
・Windows7 32bit Professional SP1

#bat内容

```
rem ■自身のIPv4アドレスを取得し変数%IP%へ定義

    for /f "tokens=1,3,*" %%A in ('ping -4 %computername% -n 1 ^| find "からの応答"') do (
        set IP=%%A
    )
```

#説明
①自分自身のホスト名にIPv4指定でpingを実行
②実行結果からIPv4アドレスを抽出し変数%IP%へセット

#さいごに
あまりスマートではないかもしれないが、時間がなかったためこの方法で実装しました。
もっとスマートに実現する方法があればどなたか教えてほしいです。。。
Androidアプリを中国市場にリリース

##中国のアプリ市場

現在GooglePlayは中国には進出しておらず、中国で販売しているスマートフォンはすべてGooglePlayが載っていない状態です。その代わりに各メーカーが独自のアプリダウンロード用のストアを立ち上げていました。

アプリ開発者がGooglePlayにリリースしているAndroidアプリは、スマホ人口が１０億人弱と言われている中国に展開できない状況です。
<img width="100" alt="smartphone_earphone_man_wireless.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677524/1fe259e3-adc4-decf-6864-02a8ce9a6aa1.png"><img width="100" alt="smartphone_earphone_woman_wireless.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677524/8099a1c6-6e89-a3ec-623e-d2d5749e6cff.png">



##AppGallery経由で中国リリース可能

中国にアプリをリリースしたい場合、今比較的効率が良い方法はAppGalleryにリリースして、中国アプリ市場に公開することです。

中国No.1のスマートフォンメーカーであるファーウェイ、そのファーウェイスマートフォンに載っているのがAppGalleryと呼ばれているアプリダウンロードストアです。

<img width="300" alt="Screenshot_20200828_114841_com.huawei.appmarket.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677524/fc80c85b-2296-30bb-f5b2-3f410b5ec4ed.jpeg"> <img width="300" alt="Screenshot_20200828_114825_com.huawei.appmarket.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677524/6b116de7-c73b-59a6-6f02-3e431fa7572e.jpeg">
今日本のアプリ数はまだGooglePlayには及ばないですが、最近となって続々と増えている感じでした。
一方、中国市場のユーザー数が圧倒的に多いので、これから中国のビジネス展開や中国市場参入したい方にとって、現状で最も効率のいい手段と言っても過言ではないでしょう。



##AppGalleryでアプリをリリースする方法

基本的にはGoogleplayやAppStoreを変わりません、しかもアカウント登録、アプリリリースの費用は一切かかりません。

１、HUAWEI Developerのホームページから右上にある「Console」からHUAWEI IDを新規登録
https://developer.huawei.com/consumer/en/

２、開発者などの情報を記入し、審査後AppGallery ConnectというConsole画面が使用できるようになります

３、アプリをアップロードする画面に、「chinese mainland」を選択できます
![AGC.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677524/0096063a-7442-5354-c249-0648247c61f8.png)
【PHP8】Docker で PECL の YAML 関数（YAML パーサー）をインストールして使う

PHP の [YAML 関数](https://www.php.net/manual/ja/ref.yaml.php)は標準で PHP にバンドルされていません。

YAML 関数で、YAML データを PHP 配列にパース（構文解析して変換）、もしくは PHP 配列から YAML データにパースするには [PECL の拡張ジュールをインストールする必要があります](https://www.php.net/manual/ja/yaml.installation.php)。

しかし、最新（2020/08/28 現在）の `php:8.0.0beta2` および `php:8.0.0beta2-alpine` イメージには PECL はインストールされていません。[PHP 7.4 以降から PEAR/PECL インストーラーは排除された](https://externals.io/message/103977)ようです。


## TL; DR

PECL をソースからビルドする必要があるのですが、それも面倒なので `pecl` コマンド入りのイメージを作成しました。Intel/AMD だけでなくラズパイなどの ARMv5,v7, ARM64 でも動作します。

```bash
docker pull keinos/php8-jit:latest
```

- イメージ: [keinos/php8-jit](https://hub.docker.com/r/keinos/php8-jit) @ DockerHub
- Dockerfile: [keinos/php8-jit](https://github.com/KEINOS/Dockerfile_of_PHP8-JIT/blob/php8-jit/Dockerfile) @ GitHub

```shell-session
$ docker run --rm keinos/php8-jit pecl version
PEAR Version: 1.10.12
PHP Version: 8.0.0-dev
Zend Engine Version: 4.0.0-dev
Running on: Linux 3fc54c34122a 4.19.76-linuxkit #1 SMP Tue May 26 11:42:35 UTC 2020 x86_64
```

また、PECL リポジトリのビルド済みパッケージで動かないものが多いので、PECL パッケージもソースからインストールできるようにしています。

```bash:要yaml-dev
docker-php-ext-pecl install yaml
```

## TS; DR

```dockerfile:Dockerfile
FROM keinos/php8-jit:latest

USER root

COPY sample.php /app/sample.php

RUN \
    apk --no-cache add yaml-dev && \
    docker-php-ext-pecl install yaml

ENTRYPOINT [ "php", "/app/sample.php" ]
```

```php:sample.php
<?php

// YAML のサンプル文字列
$yaml = <<<EOD
---
invoice: 34843
date: "2001-01-23"
bill-to: &id001
  given: Chris
  family: Dumars
  address:
    lines: |-
      458 Walkman Dr.
              Suite #292
    city: Royal Oak
    state: MI
    postal: 48046
ship-to: *id001
product:
- sku: BL394D
  quantity: 4
  description: Basketball
  price: 450
- sku: BL4438H
  quantity: 1
  description: Super Hoop
  price: 2392
tax: 251.420000
total: 4443.520000
comments: Late afternoon is best. Backup contact is Nancy Billsmer @ 338-4338.
...
EOD;

// YAML 文字列を PHP 配列にパース
$parsed = yaml_parse($yaml);

// 比較テスト
$actual = json_encode($parsed);
$expect = '{"invoice":34843,"date":"2001-01-23","bill-to":{"given":"Chris","family":"Dumars","address":{"lines":"458 Walkman Dr.\n        Suite #292","city":"Royal Oak","state":"MI","postal":48046}},"ship-to":{"given":"Chris","family":"Dumars","address":{"lines":"458 Walkman Dr.\n        Suite #292","city":"Royal Oak","state":"MI","postal":48046}},"product":[{"sku":"BL394D","quantity":4,"description":"Basketball","price":450},{"sku":"BL4438H","quantity":1,"description":"Super Hoop","price":2392}],"tax":251.42,"total":4443.52,"comments":"Late afternoon is best. Backup contact is Nancy Billsmer @ 338-4338."}';

echo '- Function test ... ', ($expect === $actual) ? 'OK' : 'NG', PHP_EOL;

```

## 参考文献

- Issue #846 [PECL not working on php:7.4-rc-fpm-alpine3.9](https://github.com/docker-library/php/issues/846#issuecomment-505638494) | PHP @ docker-library @ GitHub
- [YAML](https://pecl.php.net/package/yaml) @ PECL
- [インストール手順](https://www.php.net/manual/ja/yaml.installation.php) | YAML @ PHP 公式マニュアル
- [yaml_parse](https://www.php.net/manual/ja/function.yaml-parse.php) | YAML 関数 | YAML @ PHP 公式マニュアル
INDEXを削除するには外部キー制約を外してから

#INDEXを削除するには外部キー制約を外してから

MySQLで設定したINDEXを削除しようと思ったら
下記のエラーが。
結構、手間だと感じたので手順をメモしておく。

```
ERROR 1553(HY000):Cannot drop index 'INDEX名': needed in a foreign key constraint
```

どうやら外部キーが設定してあるためINDEXが削除できないらしい。


ということは．．．
外部キーが設定してあるカラムのINDEXを削除するには
外部キー削除⇒INDEX削除⇒外部キー再設定の手順が必要！
ちなみに外部キーを削除するために外部キー名の確認も必要となる。

手順としては
**外部キー名確認**

```
SHOW CREATE TABLE テーブル名;
```

**外部キー削除**

```
ALTER TABLE テーブル名 DROP FOREIGN KEY 外部キー名;
```
**インデックス名確認**

```
SHOW INDEX FROM テーブル名;
```

**インデックス削除**

```
ALTER TABLE テーブル名 DROP INDEX インデックス名;
```

**外部キー貼り直し**

```
ALTER TABLE テーブル名 ADD FOREIGN KEY(カラム名) REFERENCES 主キーのテーブル名(主キーのカラム名) ON DELETE CASCADE ON UPDATE CASCADE;
```

おまけ
インデックスを貼りなおすときはさらにインデックス設定を行う。
**インデックス設定**

```
ALTER TABLE テーブル名 ADD INDEX 任意のインデックス名(貼りたいカラム名, 貼りたいカラム名);
```

以上。
後ろから選択した範囲を前から選択したように選択し直してみる

# はじめに

文字列を選択するときに、**後ろから選択しても前から選択したのと同じように扱いたい**！という要求があったため、実装してみました。

# やりたいこと

```html  
<p>
  <span>ふるいけや</span>
  <span>かわずとびこむ</span>
  <span>みずのおと</span>
</p>
```

例えば、以上のような DOM 構造の文字列を以下のように選択すると、選択範囲の始点のノード(`anchorNode`)と終点のノード(`focusNode`)はそれぞれ次のようになります。

|  | 選択した範囲 | 始点ノード(`anchorNode`) | 終点ノード(`focusNode`) |
|:--|:-:|:-:|:-:|
|前からの選択| 「**い**」から「**み**」まで | \<span\>ふるいけや\</span\> | \<span\>みずのおと\</span\> |
|後ろからの選択| 「**み**」から「**い**」まで | \<span\>みずのおと\</span\> | \<span\>ふるいけや\</span\> | 

このとき、「後ろからの選択」でも「前からの選択」と同じようにしたい、すなわち、**「後ろからの選択」の始点ノードと終点ノードを入れ替えたい**というのが今回のやりたいことになります。

# 書いたコード

以上のやりたいことに対して、以下のコードを書きました。

```js
const selection = window.getSelection()
const range = selection.getRangeAt(0).cloneRange()
selection.removeAllRanges()
selection.addRange(range)
```

`getRangeAt(0)`で取得した`Range`オブジェクトですでに始点・終点のノードが逆転しているので、これを利用しています。

+ `selection.getRangeAt(0).startContainer` ... \<span\>ふるいけや\</span\>
+ `selection.getRangeAt(0).endContainer` ... \<span\>みずのおと\</span\>

（Rangeでは前から選択したか後ろから選択したかどうかは気にせず、親要素における位置関係から`startContainer`と`endContainer`を設定しているのでしょうか）

# 参考記事

+ [selection - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Selection)
+ [Range - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/range)
Scratch 3.0のインタプリタ比較

Scratch 3.0はScratch 2.0と違って、インタプリタがいろいろあります。以下では知っているものをすべて紹介します。(いやこれJITコンパイラだ、とは言わないでください)

# 公式 (scratch-vm)
互換性: ★★★★★
速度: ★
URL: https://github.com/LLK/scratch-vm
eval: なし

公式のインタプリタ。速度には劣る。

# Forkphorus
互換性: ★★★
速度: ★★★★
URL: https://github.com/forkphorus/forkphorus
eval: あり

インタプリタというよりはコンパイラ。速度はscratch-vmより数十倍良いが、互換性に難がある。

# TurboWarp
互換性: ★★★★
速度: ★★★★★
URL: https://github.com/TurboWarp/scratch-vm
eval: あり

scratch-vmのforkだけどJITコンパイラ。速度はこの中ではベストと思われる。コンパイルするせいで一部の機能に互換性がない。

# sb-edit + leopard
互換性: ★
速度: ★★★
URL: https://github.com/PullJosh/leopard-website
eval: なし?

sb3ファイルを単独実行できるJavaScriptファイルに変換して実行する。利用できないブロックが多くあり、互換性が弱点。変換部分をsb-editが、実行部分をleopardが担う。

# bismuth
互換性: ★
速度: ★★★
URL: https://github.com/Adjacent-Topics/bismuth
eval: あり

JankyScriptという独自言語を使ってASTを生成しそこからJavaScriptを作成するというスゴ技使用。開発停止中の模様。
Visual Studio for Macのオススメ初期セットアップ

## はじめに

Visual Studio for Macのオススメ初期セットアップを紹介します:level_slider:

## 環境

- OS：macOS Catalina 10.15.5
- Visual Studio Community 2019 for Mac：Version 8.7.4 (build 38)

## Visual Studio for Macのインストール

[Visual Studio for Mac をダウンロード]をクリックし、.dmgファイルを実行してインストールします。
https://visualstudio.microsoft.com/ja/vs/mac/

![スクリーンショット_2020-08-28_12_15_30_skitch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/9e3591a3-60c8-cd1a-6827-9e94fe7f1d61.png)

キーボード ショートカットはデフォルトで選択されている「Visual Studio for Mac」にしました。
![スクリーンショット_2020-08-28_12_29_56_skitch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/da20cc84-e005-e9e6-5650-5c993402e94a.png)

まだ使い勝手がわからないので、今後変える可能性があります。

## ユーザー設定

`⌘,` でユーザー設定を開きます。

### 文字サイズを大きくする

__環境 > フォント >
テキスト エディター：Menlo Regular 12→14
一般的なパッドの文字：Menlo Regular 11→12
出力パッドのコンテンツ：Menlo Regular 11→12
ターミナル パッドのコンテンツ：Menlo Regular 11→12__
![スクリーンショット_2020-08-28_12_35_15_skitch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/9eb93df9-3606-11cf-c5ee-cfdc601db7a4.png)

### 現在の行の背景色をグレーにする

__テキスト エディター > マーカーとルーラー >
[現在の行を強調表示する]チェック：OFF→ON__
![スクリーンショット_2020-08-28_12_37_26_skitch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/2578bcb8-78d7-cb24-8fa7-7e7708bc31d9.png)

### 保存時に自動でコード整形する

__テキスト エディター > 動作 >
[保存時にドキュメントをフォーマットする]チェック：OFF→ON__
![スクリーンショット_2020-08-28_13_51_33_skitch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/c469acc8-4b68-03e5-f2b3-bef00d861f0d.png)

### C#のフォーマットを変更する

__ソース コード > コードのフォーマット > C# ソースコード >
[C# フォーマット]タブ > ポリシー：カスタム→Default__
![スクリーンショット_2020-09-25_17_22_38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/45de46a0-c75e-485e-748f-42a7b4e70a85.jpeg)

こちらの設定はプロジェクトによって変えてください。
私は波括弧の始まり（ `{` ）を次の行に独立して書くのは好きではないですが、C#では一般的なのでフォーマットを変更します。

デフォルトが「Default」だと思うので、おそらく過去に自分で設定を変えています笑

### C#のコードスタイルを変更する

__テキスト エディター > ソースの解析 > C# > [コードスタイル]タブ__

__'var' を優先: >
ビルトイン型の場合：明示的な型を優先する→'var' を優先する、リファクタリングのみ→提案事項
変数の型が明らかな場合：明示的な型を優先する→'var' を優先する、リファクタリングのみ→提案事項
その他の場所：明示的な型を優先する→'var' を優先する、リファクタリングのみ→提案事項__

あれ、保存してもデフォルトに戻ってしまう、、
原因を調査します、、

## ショートカットキー

__`⌘,` でユーザー設定を開く > 環境 > キー バインド__

### Ctrl + Tabで横のタブに移動するようにする

__ウィンドウ >
次のドキュメント：Command }→^ Tab
次のドキュメントに切り替え：^ Tab→Shift Command ]
前のドキュメント：Command {→^ Shift Tab
前のドキュメントに切り替え：^ Shift Tab→Shift Command [__

![スクリーンショット_2020-08-31_13_05_01_skitch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/569311ff-e6ff-f165-2f73-762bd096cf7f.png)

本当は「ドキュメント」と「ドキュメントに切り替え」のキーバインドを入れ替えたかったのですが、HHKBだと `}` と `{` が `Shift ]` と `Shift [` になってしまうため、このように設定しました。

### using の削除と並べ替え

__リファクタリング > 未使用の削除と並べ替え (using)：なし→^U__
![スクリーンショット_2020-08-31_12_53_50_skitch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/5b6e29d6-25d5-43ad-bfe4-0c10c3219702.png)

## おわりに

これで今日から楽しいVSライフの始まりです:computer::sparkles:

他にもオススメの設定がありましたらコメントなどでご連絡いただけると嬉しいです:blush:
Qiitaのプロフィール画像設定ノウハウ

# プロフィール画像に設定したい画像があるけど・・・
iPhoneからプロフィール画像に設定したい写真画像をアップロードします。
※使用したiPhoneはiPhone XS MaxでiOS 13.6.1です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77441/ee395b38-5f2b-c834-7493-483980bbebf4.jpeg" width=70%>

アップロードすると500エラーが発生します。  
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77441/b37eb8b1-0c86-98c9-ab61-5571c70f4907.jpeg" width=70%>
理由は、プロフィール画像では画像が3000ピクセルを超えているのは設定できないからです。
なお、「ファイルを選択」の下には10MBまでと表示されており、iPhoneでは写真画像が10MBを超えることは無いのでアップロードできそうに思えますが、このような制限があります。

# 駄目な回避方法
iPhoneでは写真画像をアップロードするとき、画面の下に「イメージサイズを選択」が出てきます。
これを変更すると回避できるのでは？と思いますよね？
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77441/2ff59a46-54c1-57b6-8f18-5fbcb41001be.jpeg" width=70%>

イメージサイズ「大」を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77441/93a83730-4ef3-1d3c-35b2-f5dc54b31f09.jpeg" width=70%>

「大」が選択されました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77441/89c68c99-b7b8-4cef-1edd-6f80ad477925.jpeg" width=70%>

いけそうな気がしますが、なにかおかしいです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77441/d6557389-db7a-13dd-2dda-5a8f5e68c0a6.jpeg" width=70%>

残念ながら、画像が左に倒れてアップロードされてしまいます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77441/4a7bc0df-d757-bb36-cc65-212cf50839a0.jpeg" width=70%>

# 対処法　その1　iPhoneでリサイズ
iPhoneの写真アプリでアップロードしたいところだけを切り抜きします。
一回りぐらい小さくするとアップロードできます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77441/2e8ec34b-72f8-d2d2-6517-719fc49291d8.jpeg" width=20%>

# 対処法　その2　iPhoneでスクリーンショット
iPhoneで撮影した画像を表示してスクリーンショットする。
スクリーンショットは3000ピクセル以下なのでアップロードができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77441/da1840b4-eae4-b5fb-55d6-b3edf6419447.jpeg" width=70%>

アップロードできました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77441/888ab84c-1cf8-d365-5ab9-b679832ff1fe.jpeg" width=70%>

# 対処法　その3　連携アカウントの画像を使用する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77441/b4f0971e-f03c-6e1e-dd6d-74b2e98377e1.png" width=70%>

GitHub,Twitter,Google,Gravatarと連携していると、そのアカウント画像を使用可能です。
なお、今年未明に連携アカウントの画像サイズが大きいとモザイク画像になる不具合は修正[^1]されています。

連携先の画像を変更したときはQiitaのアカウント情報で更新ボタンを押下して再取得してください、新しい画像に変更されます。

[^1]: いまQiitaでプロフィール画像を更新すると綺麗になる https://qiita.com/studio15/items/13267134e08af5cd260d

# 画像が左に倒れる理由
iPhoneでは写真画像は左向き９０度で保存されています。
そしてexif情報にあるOrientationに従い画像補正を行うのが本来のやり方です。
詳しい説明は、こちらのQiita記事を参照してください。
https://qiita.com/RichardImaokaJP/items/385beb77eb39243e50a6

「実際のサイズ」において、exif情報のOrientationは6 right-topと記録されています。
Orientation情報に従って画像を、右向き９０度に回転させてから、exif情報を削除すれば問題ないです。
※ImageMagicなどが対応済みなので意識しないかもしれません。

しかし、ここにiPhoneの闇があります。
画像サイズを選択すると、exif情報は無くなります。
そのため補正しないまま左向き９０度のままでアップロードされてしまいます。
正直言ってしまうと、これは対処方法が無いです。
つまり、Qiitaさんは悪くないです、iPhoneが悪いんです。
WordPressのインフラ構成とバグ(現在オフラインです/ブロックエディタが非アクティブ)

#(症例1)公開に失敗しました。 現在オフラインのようです。
投稿ボタンを押したときに、
>公開に失敗しました。 現在オフラインのようです。

と表示されます。
色々解決法はあるようですが自分の場合は、
設定＞一般にある
WordPress アドレス (URL)とサイトアドレス (URL)を

```
http://hogehogeooooo.com
から
https://hogehogeooooo.com
に変更
```
することで解決しました。

#(症例2)ブロック追加が非アクティブ
こちらが今回のメインテーマです。
WordPressの新しいものは従来のHTML編集のみならず<font Color="Red">Gutenberg</font>というブロックエディタを使用することが可能です。
参考:)
HTML編集
![スクリーンショット 2020-08-28 12.20.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/950352d9-97c8-0c69-d975-1c7bfce9b054.png)
<font Color="Red">Gutenberg(ブロック挿入エディタ)</font>
![スクリーンショット 2020-08-28 11.38.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/6b9e55a0-4e64-a00e-1833-78f145780969.png)

が、左上にあるブロックの挿入ボタンが非アクティブでした。:cold_sweat:

該当のシステム構成

```
- EC2
- CloudFront
- Route53
```

通常は、
ユーザー>プロフィール編集から
ビジュアルリッチエディターを使用しないのチェックを<font Color="Red">外せば解決する</font>
ようですがダメでした。

原因はクラウドフロントで、
該当テーマの配下にあるfunctions.phpに下記のコードを追加することで解決します。
Amazon Lightsailを使用している場合は
<font Color="Blue">./wordpress/htdocs/wp-content/themes/xxxxx/functions.php</font>

```
function dtbaker_wp_cloudfront(){
    add_filter('user_can_richedit','__return_true');
}
add_action( 'init', 'dtbaker_wp_cloudfront' , 9 );
```


参考:
https://dtbaker.net/blog/rich-textvisualwysiwyg-editor-does-not-work-in-wordpress-behind-cloudfront/

こんな感じで治りました。
![スクリーンショット 2020-08-28 12.33.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/0e8483db-f12e-c3f2-97dc-6b83799fa61f.png)

めでたしめでたし:smiley:
Slackの活用方法と悩み(T_T)

技術系が続いたので閑話休題投稿です:blush:

現在、ネストビジュアル株式会社はコロナの関係もあり
リモートワーク（在宅勤務）で仕事をしております。

そのため、現在活用しているツールは下記です。

* **Zoom**
朝会（10時）、夕会（17時）に
毎日作業報告とともに顔を合わせるようにしています。
意外と顔を見てコミュニケーションをすることは
**その人の表情・顔色を見て体調や考えていることを知る上で重要**だったと
リモートワークになってから実感しています。

* **Slack**
リモートワーク以前は、口頭でのコミュニケーションがメインでしたが
リモートワーク以降は、Zoomや電話の他に、**Slackを正式導入**しました。
Slackを使うようになって、一応運用ルールを決めましたが
なかなか、社風もあって運用ルールを決めても守らない方も多いです…:imp:
※社風「映像をメインにしている会社のため、デザイナーさんが多い」

運用ルールは下記です。
* * *
* 1つのメッセージに対してスレッドを使用して議論を行う
* メッセージを見た印として「リアクション :smile: 」をつける（既読マーク）
 
* * *
という単純なものですが、なかなか守られず
特にSlackのスレッド機能がなかなか難しいようで
スレッドの中にメッセージ（投稿）を記入せず、
毎回メンションを付けて新規メッセージ（投稿）化してしまうこともしばしば…

**スレッドでのやり取り**

![Slack-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626158/7d6a0ece-f13d-c29f-48b8-50339df4c601.png)

**単発メッセージの応酬**
![Slack-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626158/fe925446-a171-3c54-1fd6-d7f271fedef8.png)

新規メッセージで毎回投稿されると、Slackのタイムラインで
重要なメッセージ（投稿）流れていってしまうので
プログラマーからの布教が命題になりつつあります:smiling_imp:

という感じで、Slackは仕事の話などを気軽に出来るのですが
やり方を間違えると、情報が整理できなくなるので、
今後、リモートワークを続ける上では運用の課題かなと考えています:relieved:



という感じで毎日、様々なツールを使用しながらコミュニケーションをはかり
リモートワークで業務をしております！

一度ぜひ、ネストビジュアルのHPを御覧ください～
https://www.nest-vis.com/
PHPでいい感じのランダム文字列を作る

暗号学的にも強いランダムな文字列を作る方法。
他にもいろいろ方法があるけどひとまず `openssl_random_pseudo_bytes()` を使ってみた。

```php:random.php
/**
 * 指定された桁数のランダム文字列を生成する
 * （古い環境では暗号学的な強さにならない場合もあるが、ほとんどの環境は問題ない）
 * 
 * @param int $length 求める文字列の長さ（桁数）
 * @param string $chars ランダム文字列に使用したい文字一覧
 */
function randomstr($length, $chars)
{
    $retstr = '';
    $data = openssl_random_pseudo_bytes($length);
    $num_chars = strlen($chars);
    for ($i = 0; $i < $length; $i++)
    {
        $retstr .= substr($chars, ord(substr($data, $i, 1)) % $num_chars, 1);
    }
    return $retstr;
}

// 16進数の範囲で16桁の文字列を生成する場合
$rand1 = randomstr(16, '0123456789ABCDEF');
// 32進数（Ｂａｓｅ３２）の範囲で16桁の文字列を生成する場合
$rand2 = randomstr(16, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567');
// 英数大小文字の範囲で16桁の文字列を生成する場合
$rand3 = randomstr(16, 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789');
```
AWS lambdaを使ったサーバーレスウェブアプリの開発

#目的と目標
今回、目的はwebアプリケーションを作る！その過程で、学びながら進めるにあたって大きな壁になるのがサーバーの取り扱いと管理の部分がありました。そこで、最近はやりのサーバーレス webアプリケーションの開発を目標にして進めていくことにしました。

##アーキテクチャー
![コメント 2020-08-28 114937.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573931/ac919afe-2b3a-f1a4-8083-1d971ff43ada.png)

##今回使用する構成
aws cognitoを使用した認証・認可機能をつけたログイン・ログアウト機能の追加。
aws Apiを使ってaws lambdaを使って、aws　DynanoDBにデータの保存と参照。
aws S3にファイルを上げることで外部からの部分的アクセス。

##デモアプリケーション！
https://www.miryuu.com/
このサイトの記事を参照してください
[mi]を使ったインデントの揃え方

#miを知った経緯
雑食系エンジニアTVのKENTAさんがプログラミングの勉強方法に[mi]というアプリケーションを使っておりました。
https://www.youtube.com/watch?v=bquXw52kvU0
自分も使ってみたのですが、インデントを簡単に揃えたらなぁと思って検索しても出なかったので共有したいと思います。

#miの画面
![スクリーンショット 2020-08-28 11.48.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694122/f3564635-bfe5-f063-4b06-9aaf7c2d0b77.png)
このツールバーから
現在のモードのモード設定を開くを選択して![スクリーンショット 2020-08-28 11.50.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694122/d48384c5-1b33-126c-6392-ef25efb849f3.png)
インデントを選択
そこから下の方にある
インデントの計算方法を前行と同じだけインデントするを撰べば
改行ごとにtabやスペースを押さずに前行と同じだけインデントをとってくれます！　
是非使ってみてください！
【初心者向け】AWS初心者がAmazon VPCのメリットとデメリット、超ざっくりとした作成手順をご紹介

こんにちは、マイスター・ギルドのフクロウと申します。

今回はAWSが提供しているのAmazon VPCについてと超ざっくりとした作成手順のご紹介です。

#Amazon VPCとは?

サービス名：Amazon VPC
正式名称：Amazon Virtual Private Cloud

###サービス概要
利用者ごとのプライベートなネットワークをAWS内に簡単に作成することができるサービスのこと
***つまり！あなたとあなたが許可した人だけが使えるネットワークを構築できるのです！***
(はい、すみません。大げさに言いました・・・)

### VPCのメリット
・自分でサーバーを用意して、ネットワークを設定してという面ど・・・じゃなかった、勉強になることが、VPCなら簡単にしかもWEB上だけで設定ができ、勉強にもなる！
・自分でVPCの環境も設定することで用意できるが、AWS側がDefaultVPCと呼ばれるすぐに使えるVPCを用意してくれていることも魅力。
・オンプレミスのサーバーに専用線のサービスであるDirectConnectをやVPN経由で直接的にインターネットに出ることなく各拠点と接続することが可能。(個人でこれを行うことはそうそうない気がする・・・)
・作成者が自由なIPアドレスを割り当てることができる。(ただし、クラスに関わらず、CIDERの範囲が限定されていたはず。)


###VPCのデメリット
・初心者は、参考書が必須。(理由：機能が多すぎて、参考書なしでは何が何か分からないです。)
　　こちらがオススメの参考書です。
　　[AWS認定資格試験テキスト AWS認定 クラウドプラクティショナー](https://www.amazon.co.jp/AWS%E8%AA%8D%E5%AE%9A%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88-AWS%E8%AA%8D%E5%AE%9A-%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%BC-%E5%B1%B1%E4%B8%8B-%E5%85%89%E6%B4%8B/dp/4797397403/ref=asc_df_4797397403/?tag=jpgo-22&linkCode=df0&hvadid=295691444786&hvpos=&hvnetw=g&hvrand=18415686520166319324&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009540&hvtargid=pla-718362586207&psc=1&th=1&psc=1)
　　※私もこれを参考にVPCの構築をしました。
・IPアドレスやCIDRなどのネットワークの知識がない方は、CCNAなどで勉強しながらやらないと構築が少し難しい。


###VPCの超ざっくりとした構築手順
前提：東京リージョンを選択していること
***１、VPCの枠組みを作成***

***２、IGW(インターネットゲートウェイ)を作成***
　　外部インターネットからVPCへアクセスするための門です。
　　これが無いと外部からVPC内のEC2などへのアクセスができません。

***３、VPCにIGWをアタッチ***
　　IGWを作っただけでは外部からアクセスできないので、VPCの入り口を取り付ける作業をします。

***４、サブネットを作成***
　　VPC内のネットワークを作成します。
　　使用するアベイラビリティゾーン毎にパブリック用とプライベート用のネットワークを作成します。
　　(サブネットをVPCに関連付ける作業は作成と同時に行えます。)

***５、ルートテーブルを設定***
　　作成したネットワークがパブリックなのか、それともプライベートなのかを定義します。

***６、セキュリティグループを作成し、アクセス方法など設定***
　　だれが、どのような方法でアクセスできるようにするのかを定義しています。

上記が、VPCの超ざっくりとした構築手順です。

個人的にVPCができていると実感するにはEC2への接続ができた時だと思ってます！

もし、詳細にVPCについて知りたい方がおられましたら、
YoutubeでAWS Japanが動画で解説してくれているものがあります。
[【AWS Black Belt Online Seminar】Amazon VPC](https://www.youtube.com/watch?v=aHEVvsk6pkI&t=466s) 
[Amazon Web Services Japan 公式](https://www.youtube.com/c/JPAmazonWebServices/featured)

この記事が少しでもお役に立てれば、幸いです。

以上、マイスターギルドのフクロウでした！
※間違いがある場合、ご指摘いただけると助かります。
Google Places APIで半径に大きい値を指定するとリザルトが空になるので注意

お疲れ様です！

タイトルの通り、Google Places APIで近くの飲食店を探す際、
半径に大きい数字を入力するとZERO_RESULTSが返却されます。
公式ドキュメントには、50kmが上限であると記載がありました。

>The maximum allowed radius is 50 000 meters.

# 現象
https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=***&location=35.6980864,139.7663461&radius=10000000&language=ja&keyword=(food OR restaurant OR cafe OR meal_takeaway OR meal_delivery OR bakery OR bar OR night_club) "上島珈琲店 ワテラス"

```result.json
{
   "html_attributions" : [],
   "results" : [],
   "status" : "ZERO_RESULTS"
}
```

# 修正
6,000kmくらいでもいけましたが、場所によって取れたり取れなかったりするので、素直に50kmを指定しましょう。

https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=***&location=35.6980864,139.7663461&radius=50000&language=ja&keyword=(food OR restaurant OR cafe OR meal_takeaway OR meal_delivery OR bakery OR bar OR night_club) "上島珈琲店 ワテラス"

```result.json
{
   "html_attributions" : [],
   "results" : [
      {
         "business_status" : "OPERATIONAL",
         "geometry" : {
            "location" : {
               "lat" : 35.6976308,
               "lng" : 139.7680488
            },
            "viewport" : {
               "northeast" : {
                  "lat" : 35.69898062989273,
                  "lng" : 139.7693986298927
               },
               "southwest" : {
                  "lat" : 35.69628097010728,
                  "lng" : 139.7666989701073
               }
            }
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/cafe-71.png",
         "name" : "上島珈琲店 御茶ノ水ワテラス店",
         "opening_hours" : {
            "open_now" : true
         },
         "photos" : [
            {
               "height" : 5248,
               "html_attributions" : [
                  "\u003ca href=\"https://maps.google.com/maps/contrib/100183066775808774145\"\u003efoamer styro\u003c/a\u003e"
               ],
               "photo_reference" : "CmRaAAAA8hwm924MRve3ZPpRIy0F3UdBRRYq1ILazjtCKfuMLfuevEi9Y-MjGSJmowhxd37Io7e6d0NG_ZY0g6osqTaFfCvgiNxDwrWcAoLtK30k1N0ZRY0yJIjYHETOqmF89EwFEhBW8UVL_m65NRYBRSHZI3TwGhTrnSdPAkxoALobuthwImYyaKE4FA",
               "width" : 3936
            }
         ],
         "place_id" : "ChIJraztWRuMGGARZ69grx11sMs",
         "plus_code" : {
            "compound_code" : "MQX9+36 千代田区、東京都",
            "global_code" : "8Q7XMQX9+36"
         },
         "price_level" : 3,
         "rating" : 3.9,
         "reference" : "ChIJraztWRuMGGARZ69grx11sMs",
         "scope" : "GOOGLE",
         "types" : [ "cafe", "food", "point_of_interest", "store", "establishment" ],
         "user_ratings_total" : 194,
         "vicinity" : "千代田区神田淡路町２丁目１０５ ワテラスアネックス1F"
      }
   ],
   "status" : "OK"
}
```
超多機能なGatsbyJS Themeを作成してテーマを公開した話

<head>

<link rel="canonical" href="https://tech-blog.yoshikiohashi.dev/posts/publish-npm-gatsbyjs-theme" />

</head>

# はじめに

> 本記事は https://tech-blog.yoshikiohashi.dev/posts/publish-npm-gatsbyjs-theme のクロスポスト記事になります。

このブログのThemeにも使用しているGatsbyJSですが、Themeを別途作成してnpm公開してみました。

使用してみたい方はこちらからどうぞ。

https://www.npmjs.com/package/gatsby-all-pack-theme-starter

```
npm install -g gatsby-cli
gatsby new hoge-blog https://github.com/yoshiki-0428/gatsby-all-pack-theme-starter.git
```

# なぜつくったか

**GatsbyJSは早くて軽くて使いやすい！** というのは周知の事実なのですが、如何せんタグ付けだったり、カテゴリー機能、ページネーションの機能、検索機能、RSSの作成など、ブログの機能に必須な機能は**自分で実装しないといけない**のが非常にネックでした。

なのでセットになってるテーマを作ってしまおうということで1ヶ月くらいのスキマ時間で作成しました。

# どうやってつかうの？

[README](https://github.com/yoshiki-0428/gatsby-all-pack-theme-starter/blob/master/README.md) にも書いてありますが、**gatsby new hoge [url]**してNetlifyにアップロードしてしまえば、簡単に使用できます。

CLI操作はなるべく少なくしたかったので、リポジトリを作成してNetlifyなどにアップロードさえしてしまえばあとはGUIで環境変数や設定項目をセットしてしまえば使えます。


# 参考URL

- [GitHub](https://github.com/yoshiki-0428/gatsby-all-pack-theme-starter)
- [npm packages](https://www.npmjs.com/package/gatsby-all-pack-theme-starter)
Windows PCをAzure ADに参加させる

## 前提知識
Azure ADの管理方法には「登録」と「参加」の2種類があります。
大きな違いは、Windowsデバイスにサインインするユーザーと対象となるOSです。
Azure AD 登録・参加のどちらの状態でも、Intuneでのデバイス管理や条件付きアクセス等は同じように行えます。

### Azure AD 登録（Azure AD registered）
- Bring Your Own Device (BYOD) ご利用時に使用することを想定した機能です。
- PCのローカルユーザーでWindowsデバイスにサインインします。
- ローカルのOutlookなどのアプリで初めてAzure ADのユーザーIDを入力した場合にもAzure AD 登録される。
- 対象デバイスは、Windows、Android、iOS、macOS

### Azure AD 参加（Azure AD joined）
- Azure ADユーザーでWindowsデバイスにサインインします。
- クラウドアプリケーションにもWindowsデバイスにサインインした情報でSSOができる。
- 対象デバイスは、Windows
- サインイン以外にもAzure AD 参加にしかできないことがあります、気になる人は調べてみてください。

## 手順
この設定により、WindowsデバイスをAzure ADに参加させると同時にIntuneへの登録もすることが可能になります。
Azure AD登録およびIntune登録については、説明途中に登録を開始する場所を黄色い枠で記載してあります。

### WindowsデバイスをAzure ADに参加させる

1. 『Windowsの設定』画面を開き、《アカウント》をクリックします。
1. 左側のメニューより《職場または学校にアクセスする》 → 《接続》をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520689/60a75f2d-198c-3cf0-ebb5-04a807a3299a.png)
    - Intuneのみに登録する場合は、《デバイス管理のみに登録する》をクリックする。  
  その後は画面の指示に従って作業を進めると登録することができます。

1. 『職場または学校アカウントのセットアップ』ダイアログの《このデバイスをAzure Active Directoryに参加させる》をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520689/735a8ffd-f2e2-a883-5bb1-bd27bcc3d0ad.png)
    - Azure ADに登録する場合は、《電子メールアドレス》に職場または学校アカウントのアドレスを入力して《次へ》をクリックします。  
  その後は画面の指示に従って作業を進めると登録することができます。

1. 『サインインしましょう』ダイアログの《職場または学校アカウント》にアドレスを入力して《次へ》をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520689/3fe3a63a-9eee-50e8-e8f4-1fd0b5e342b3.png)

1. 『パスワード入力』ダイアログにパスワードを入力して《サインイン》をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520689/c922ccdd-b57d-bfe8-8e93-ae23798fa157.png)
    - 設定によってはこの後に多要素認証のダイアログが表示される事があります。

1. 『これがあなたの組織のネットワークであることを確認してください』ダイアログで「接続先」、「ユーザー名」等を確認して、《参加する》をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520689/be755373-7bec-f2bf-5bbe-8bb6970882ab.png)

1. 『これで完了です。』ダイアログの《完了》をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520689/380e960e-d365-9429-fa0d-5870b2663ba7.png)

1. 『Windowsの設定』画面でAzure ADに参加できたことが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520689/049b3f07-7526-a313-9b51-7e5fc21cd080.png)

1. Windows PCを再起動するかユーザーの切り替えを行えば、職場または学校アカウントでWindows PCにサインインすることができるようになります。

## 参考サイト
[Azure AD 登録 と Azure AD 参加 の違い](https://jpazureid.github.io/blog/azure-active-directory/azure-ad-join-vs-azure-ad-device-registration/)
[Azure ADへのデバイス登録とその効用](https://azuread.net/2019/05/22/azure-ad-registration/)