![見出し画像](https://assets.st-note.com/production/uploads/images/84309282/rectangle_large_type_2_67cc76f17959a8493354de7c8dcf86f6.jpg?width=1200)
Stream Deck ステップバイステップ②【アイコン作成-1】
前の投稿で 夏休みの自由研究にSTREAM DECKをいかが?ということで記事を書かせていただきました。
そしてX先生から依頼されたのでステップバイステップで基本的な設定をnote上で書かせていただくことになりました
アイコン作成
今回のシリーズでは
① 一発!テキスト入力
② 一発!ウェブリンク
③ 一発!タイムスタンプ(WINDOWSのみ)
④ フォルタ機能でボタンを増やす
という事をしていこうとおもいます。
①ー④の何れにせよ液晶ボタンの作成をしたほうが見やすいので
①一発!テキスト入力の練習をしながらアイコン作成の基本をしてみたいと思います
![画像1](https://assets.st-note.com/production/uploads/images/84310016/picture_pc_cc43fd675917a605f9b7c924ede73b3c.jpg?width=1200)
① 一発!テキスト入力
![画像2](https://assets.st-note.com/production/uploads/images/84310121/picture_pc_66f265021460c02066b96dadd2331c2f.png?width=1200)
・アプリの右側にある【テキスト】を見つけていただきます
・その【テキスト】を好きなボタン位置に【ドラッグ&ドロップ】
![画像3](https://assets.st-note.com/production/uploads/images/84310295/picture_pc_63f251079ac4aec03f23e5bcb510deb9.png?width=1200)
![画像4](https://assets.st-note.com/production/uploads/images/84310634/picture_pc_69130377d55a6f71bac799662e3c01c5.jpg?width=1200)
そうするとUSB接続されたSTREAM DECKにリアルタイムに反映されているのがわかると思います。 それだけでも最初感動しました。
![画像5](https://assets.st-note.com/production/uploads/images/84310795/picture_pc_dfca865b1de04819e37e865d6cfa5d5e.png?width=1200)
・アプリの下のにあるアイコンの【+】をクリックしてみてください。そうするとSTREAM DECKアイコンライブラリーがでてきます。これの中でみなさんがお気に入りのものがあればそれを使ってもらえれば良いですが、電子カルテをメインに考えるとなかなか使いにくいですよね? あまりイメージがわくアイコンがありません。
![画像6](https://assets.st-note.com/production/uploads/images/84310870/picture_pc_6abefa340dac8416a9ed9b9cdee8847a.png?width=1200)
![画像7](https://assets.st-note.com/production/uploads/images/84311048/picture_pc_f7053fe9688de03cfe275924944b8472.png?width=1200)
・アプリの下のにあるアイコンの【下矢印】をクリックしてみてください。
![vbc20220704NYAUW FBです](https://assets.st-note.com/production/uploads/images/84311550/picture_pc_46947c6390e43f341605023e418736dd.png?width=1200)
・一番上の【ファイルから設定】をクリックしてください。そしてPC上に保存された写真を練習で適当に選んで下さい
![画像9](https://assets.st-note.com/production/uploads/images/84311814/picture_pc_aa5c403660558e848388a151947ae99a.png)
そうすると好きな写真がアイコンになって、実際のDTREAM DECKの本体のボタンもその画像になっています。感動でしょ? (スマホの写真が荒いですが 実際はもっときれいな写真がボタン液晶に写っています)。
![画像10](https://assets.st-note.com/production/uploads/images/84311970/picture_pc_a1955b2179b636a0255e2578ec0d4509.jpg?width=1200)
次に真ん中の【新規アイコンの作成】をクリックしてください。そうするとこのWEBサイトに移動します
![画像11](https://assets.st-note.com/production/uploads/images/84312701/picture_pc_1caa69faedfb5730b7520f0c9d6587d1.png?width=1200)
いろいろなことが出来るのでですが マニアックになりすぎると皆さん 離れていくので シンプルなものだけをやっていきます。ここでは背景色を変えていくという目的だけに使っていこいうと思います
![画像12](https://assets.st-note.com/production/uploads/images/84313125/picture_pc_d301a7d3bff50de97f080b84e64edd3f.png)
右から2番めの塗りつぶしの機能でボタンの背景色を作るということにします。 背景色を分けることで機能やグループ分けが見やすくなるからです
![画像13](https://assets.st-note.com/production/uploads/images/84313309/picture_pc_920a5710f6df679a93ccffce10e824e7.jpg?width=1200)
新規アンコンの作成のリンク先に戻り、右から2番めの塗りつぶし機能をクリックします
![画像14](https://assets.st-note.com/production/uploads/images/84313400/picture_pc_025d782737608571c6740d7132b8031e.png?width=1200)
右側の横長のカラーバーをクリックします。
![画像15](https://assets.st-note.com/production/uploads/images/84313551/picture_pc_1544437c5e0772263ff261a1ef5c05f8.png?width=1200)
そして好きな色を選んで下さい
![画像16](https://assets.st-note.com/production/uploads/images/84313860/picture_pc_cb0dab5f41f0ca9be5b6b723a1312e02.png?width=1200)
そして【Save Key】をクリックして背景色を保存。ついでにいろんな背景色を作って保存しておくとあとの面倒が減ってよいかと思います。
ということで僕は以下のように8色の背景色を作りました
![画像18](https://assets.st-note.com/production/uploads/images/84314191/picture_pc_f6a8285739ee55b7beb74efcde621634.png?width=1200)
今日はここまで
よろしければサポートお願いします。 NYAUWの活動は現在マネタイズを考えずに意義のみを追求するフェーズです。 ニッチな分野のやせ我慢プロジェクトですので お気持ちだけでも嬉しいです。