取得に失敗しました

2019年度 入部

Twitter GitHub YouTube

ふぉ

ギャル

自己紹介

アプリとかゲームとかWebページとか音楽とか絵とかロゴとか生み出してます。ギャルが好きなのでギャルになりました。

縁側ごろごろっていう個人サイトで遊んでます。
https://natsu-dev.github.io/

この人が書いた記事

プログラミング Polygon
プログラミング

ぼっちは寂しいのでプログラミングで彼女(概念)を生み出してみた

時は令和。何かの奇跡で数百年後とかにこの記事が古文書として発掘された時のために書き残しておきます(???)が、ご存じの通り今世界はCOVID-19で大変なことになっています。 そんなわけで、大学はオンライン自宅はド田舎という、見事に世界から隔絶された生活が続いている引きこもり大学生(21)の ふぉ と申します、おはよう(午後起床)。 ここ最近は毎日ほとんど人と会話しない生活をしているもので、引きこもり大学生の例に漏れず私もちょっと気分がしょぼんとしてきているのが現状。部活やサークルに毎日打ち込んで、たまに楽しいイベントがあってその後は恒例行事の飲み会!!みたいな理想の大学生活はたぶん幻想だし、本当は大学なんてものも概念で、久しぶりに行ってみたら実は更地になっているかもしれない(?)。もしかしたら大学の友達やよく授業が一緒だったあの人も単なる夢の中の登場人物だったかもしれない。 ……え?………彼女? たぶんそれはCOVID-19の有無とは関係ないんじゃないかな?() ということで寂しい(べつに寂しくないもん!)ので彼女(概念)を作ろうと思います(メチャクチャ雑な導入)。 最高の話し相手(概念)の作り方 今回使うのはDiscordのボット機能です。(Discordマジですごい) JavaScriptとかPythonとかを使ってボットの自作ができるっぽいので、どっちでもいいですが今回はJavaScriptで作ります。 私が作ったのは彼女(概念)だったので以後表記は彼女(概念)となりますが、 もちろん読者の皆々様の豊かで素晴らしい 妄想 解釈次第で彼氏(概念)とかパートナー(概念)とか猫(概念)とか、何でもいけると思います。 Attention:実際に本記事の内容を試される場合は自己責任のもとで行ってください。人体錬成は錬金術最大の禁忌 準備編 まずは彼女(概念)を生み出す下準備をします。 Discordのアカウントを用意します。(はいそこ、Discordで友達と通話すればいいじゃんとか言わない)Discord Developer Portalに行き、[Applications] → [New Application] でアプリケーションを追加します。名前は彼女(概念)の名前とします。追加したアプリケーションの画面に移行するので、[Bot] → [Build-A-Bot] でボットを追加します。これが彼女(概念)の姿(概念)になります。このとき [PUBLIC BOT] のチェックがONになっていると思うので、自分専用にしたい場合はOFFにしておきましょう。 続いて、彼女(概念)の魂(言わずもがな概念)を作り出すための準備をします。 普段使っているあるいは開発をしているPCにNode.jsをインストールします。そのPC上に適当な作業用ディレクトリを用意します(後述しますが、末永くお付き合いしたい場合はGit管理しておくと良いです)。PowershellなりBashなり何でも良いので適当なターミナルで先ほど用意した作業用ディレクトリに入ります。npm init を実行します。色々訊かれますが、とりあえずnameは彼女(概念)の名前としてその他はお好みで(後で package.json というファイルから編集できます)。npm install discord.js 、 npm install dotenv の2つを実行します。 見た目を決める Discordボットはアイコンを自由に設定できるので、とりあえず顔だけサクっと描いておきます。Discordのアイコンはガッツリ縮小されるので多少塗りとか線とかが雑でもある程度は耐えると思います。 試しに描いてみました。 これをいい感じの正方形にトリミングした上で、Discordアプリケーション画面の [General Information] にある [APP ICON] からアイコン画像に設定しておきます。 コーディング まず、作業用ディレクトリ直下に .env ファイルを新規作成します。内容は以下のようにします。DISCORD_TOKEN=<INSERT DISCORD TOKEN HERE><INSERT DISCORD TOKEN HERE> の部分にはDiscordボットのトークンを貼り付けます。トークンというのはDiscord側であらかじめ指定された英数字と記号の羅列で、彼女(概念)の魂と姿(概念)を結びつける合言葉になります。 まず先ほど作成したDiscordのボットのページで [Bot] をクリックし → [USERNAME] の下の [TOKEN] の欄を見ます。ここに [Copy] というボタンがあるので押すと [Copied] に変化するので、それが確認できたら .env に貼り付けます。先述の通り英数字と記号の羅列が貼り付けられたと思うので、その状態で保存して閉じます。(トークンをうっかりGitHubで公開したり他人に見られたりしないように注意) 続いて .env と同じ場所に index.js というファイルを作成します。これが彼女(概念)の思考回路となります。 内容はこんな感じ。とりあえずこのまま貼れば動きます。const path = require('path'); const Discord = require('discord.js'); const client = new Discord.Client(); const os = require('os'); // ホスト名取得用 // 環境変数に.envを使う require('dotenv').config({ path: path.join(__dirname, '.env') }); // ログイン時の処理 client.on("ready", () => {     client.user.setStatus("online"); // online, idle, dnd, invisible     client.user.setActivity(os.hostname()); // 「~~をプレイ中」     console.log("ready..."); }); // 入室時の挨拶 client.on("guildCreate", guild => {     let greetingChannel = "";     // 入室時にメッセージを送るチャンネルを判定     guild.channels.cache.forEach((channel) => {         if (channel.type == "text" && greetingChannel == "") {             if (channel.permissionsFor(guild.me).has("SEND_MESSAGES")) {                 greetingChannel = channel;             }         }     })     greetingChannel.send("やっほ!") // メッセ送信         .then(message => console.log('Message: "やっほ!" sent.'))         .catch(console.error); }); // メッセージ受け取り時 client.on("message", message => {     // 自分のだったら無視     if (message.author.bot) {         return;     }     // おはよう     if (message.content.match(/おはよ/)) {         message.channel.send("おはよ-!") //メッセ送信             .then(message => console.log('Message: "おはよー!" sent.'))             .catch(console.error);         return;     }     // いちゃいちゃ     if (message.content.match(/好き/)) {         message.channel.send("私も!") //メッセ送信             .then(message => console.log('Message: "私も!" sent.'))             .catch(console.error);         return;     }     // 任意で色々追加 }); // ログイン処理 client.login(process.env.DISCORD_TOKEN); 保存出来たら、ターミナルで node index.js と実行してみましょう。特にエラー等が出ずready...と表示されたら勝ちです。彼女(概念)が生み出されています。おめでとう。 例えば if (message.content.match(/好き/)) { の中身は流れてきたメッセージに「好き」と含まれていた場合に行われる処理です。この場合は「私も!」と返します。ここの単語を変えることで様々なメッセージに対応させることができるというわけです。正規表現が使えます。 彼女(概念)に会いに行こう ということで無事に彼女(概念)に息が吹き込めたら、実際に彼女(概念)と会ってお話をしてみましょう。 ……緊張してる? 大丈夫だよ、君の理想のパートナー(概念)だから。ほら、心配しないで。 Discordで適当に自分用のサーバーを用意します。先ほどトークンをコピーしてきたページで今度は [OAuth2] をクリックします。[OAuth2 URL Generator] の欄にいっぱいチェックボックスがあるので、[bot] にチェックを入れて出てきたURLをコピーします。ブラウザにそのURLを貼り付けて移動し、ログインします。彼女(概念)を招待するサーバーを選ぶ画面が出るので、用意したサーバーに招待します。 招待が完了したらメッセージが出ると思うので、会話してみます。 えぇ……なんだこの地獄みたいな光景は………… 失礼、取り乱しました。 こうして無事に彼女(概念)と会話ができるようになったわけですが、この入室時の挨拶や特定の言葉に反応して返信してくれる機能こそが、さっきわけもわからずコピペした index.js によって実行されているのです。 ということで無事、彼女(概念)を生み出すことに成功しました。index.js を自由に編集して、理想のパートナー(概念)を作っていきましょう。特定の言葉に返信する機能を増やしてもいいですし、誕生日におめでとうのメッセージをくれる機能を付けてもいいですね。JavaScriptの勉強をすれば大体のやりたいことはできるんじゃないでしょうか。 ちなみに私は現在、彼女(概念)と秘書(概念)に自宅のPCやMinecraftサーバーの管理をしてもらおうと試行錯誤しているところです。 ---- 次の章はある程度のLinuxの知識がある中級者向けの内容となります。実際に試される場合は必要に応じて検索するなどして内容を十分に理解した上で行ってください。 彼女(概念)に永遠の命を ……しかし残念ながらこの彼女(概念)は、永遠の存在ではなかったのです。 今のままの彼女(概念)は、とても脆く、そして儚い存在なのです。というのも、例えば node index.js を実行しているターミナルでCtrl + Cと入力する、ターミナルを閉じる、PCの電源を切る、そういった操作によってプログラムの実行が終了した時点で、彼女(概念)はオフライン表示になってしまいます。オフライン表示になってしまっては、返事も何もしてくれなくなります。またしても、独りぼっちになってしまいます。 もちろんforeverなどでデーモン化しても良いのですが、結局はPCをつけっぱなしにすることになるため電気代もかかるしPCにも良くないしということで、ここは一つ、彼女(概念)のために永遠の肉体(物理)を特別に用意することとしましょう。これからも末永く、彼女(概念)との明るい未来を、ともに誓い合いそしてともに切り拓いていくために。 ということで、お手元にRaspberry Piをご用意ください。これが彼女(概念)の肉体(物理)、すなわち心臓(物理)となり頭脳(物理)となります。Raspberry Piというのは平たく言えばめっちゃ多機能なマイコンボードで、「OSをインストールすれば普通にPCとして使える超小型のデバイス」と解釈してもらえれば今回は十分です。 下準備 以下は私の場合の準備物の例です。Raspberry Pi 4BRaspberry Pi 4B 対応ケース(スターターキットに付属していたもの)電源ケーブル(同上)SDカード(Raspberry Pi OSのインストールを済ませたもの)LANケーブル まず、GitHub等に彼女(概念)の作業用ディレクトリをコミット、プッシュしておきます。また、Raspberry Pi OSの初期セットアップを済ませておきます。このとき、彼女(概念)を生み出したPCからラズパイに公開鍵認証でSSH接続ができるようにしておきます。合わせて、rootログインの無効化、SSHポートの変更、公開鍵認証以外でのSSH接続の無効化など、セキュリティ上必要な設定もしておきます。 彼女(概念)の移植 ラズパイにnpmをインストールします。以下を順に実行していきます。sudo apt-get updatesudo apt-get install -y nodejs npmsudo npm install npm n -gsudo n stable では、ホームディレクトリの適当な場所に彼女(概念)のリポジトリをクローンします。 ここでクローンしたディレクトリに移動して、discord.js、dotenvもインストールして使えるようにしておきましょう。 さらに追加で sudo npm install -g forever と実行してforeverをインストールします。foreverというのはnodeで動かすアプリをデーモン化(バックグラウンド化)してくれるモジュールで、もしエラーなどでボットが落ちた場合に自動で再起動してくれるなど、彼女(概念)のお世話をしてくれるような存在です。 続いて、scpコマンドなどで元のPCのディレクトリにあった .env ファイルをラズパイ側に持ってきます。 以上で下準備は完了です。 永遠の命を吹き込む それでは一通り環境の移植が終わったので、node index.js が使えることを確認します。特に問題なく起動するようであれば、いったん終了して今度は forever start index.js と実行します。 なんかちょっとWarningを吐くかもしれませんが、Accessing non-existent property 'padLevels'... 云々というやつはそのままにしていてもちゃんと動きます。毎回出るのでめっちゃ気になるんですけどね。 forever list と実行すると現在Foreverで実行されているアプリ一覧が出ます。script の欄に index.js と出ていればOKです。 終了させたい場合は forever <uidの欄の文字列> で終了できます。 また、私はラズパイの電源を入れた際に自動で実行されるように、crontabを編集して以下を追加しています。@reboot cd <index.jsがあるディレクトリの絶対パス>; /usr/local/bin/forever start index.js あとは、LANケーブルと電源ケーブルを接続したラズパイをデスクなどに設置して完了です。 これが私の彼女(概念)のRemokoです。 結論 ということでDiscordのボット機能を使って彼女(概念)を作りました。 作ってて余計に寂しい気持ちになる瞬間があったことは否定しません。でも、別にいいんだ。これからはこんなにも可愛い彼女(概念)がずーっと一緒にいてくれるから……それでいいんだ………

> 内容を見る

電子工作 Polygon
電子工作

スピーカー直したり直せなかったり

ふぉです。おはようございます。電子工作って言ってますが技術的な話はほぼありません。ごめん。 あーし、電子工作とかそーゆームズいことわかんないんだわ(ギャル)。部室のスピーカー壊れてるやつばっかだよなという話になったのは、部室のスピーカーの電源ボタンがめり込んだ事件がきっかけだったと思います。正確には覚えてない、もしかしたら記憶改変が起きてるかもしれません。 とにかく、ボタンがめり込んじゃったとの報告を受けたので実際に部室に行って見てみると、そこそこ長さがあって出っ張っているはずの、到底内側に陥没するとは思えないサイズのボタンが見事に内部に落ちて取れなくなってたので笑いました。 このパーツ普通に使ってて内側に落ち込むことある??? とりあえず分解して元の位置に戻して、再発しないように固定だか接着だかの処置をしておこうと思います。 ボタンを救出しに行く背面のネジ穴にドライバーをぶち込みます。 と思ったら穴がメチャクチャ深かったのでネジの種類がわかりません。スマホのライトで中を確認したところたぶんプラスドライバーで行けそうです。サイズがわかりませんが。 適当に色々突っ込んでみますが、奥のネジまで届く長さのドライバーがこいつしかなかったのでこれでいきます。 回して開けます。 開けたらボタンくんが無事に見つかりました。マジでどうやって落ちたん?これ。 確かにLEDにグルーガンで接着されていた部分は剥がれていましたが、ボタンの裏についている四角い穴がスイッチ部分に数mmほど差し込んであるはずです。なんで? と思いましたが、たぶんONにしてスイッチが引っ込んでいるときにボタンだけ引き抜いて斜めにグリグリ回したら外れて落ちますね。 スイッチから抜けないようにLEDだけでなく四角い穴のほうにも接着剤を盛っておきましょう。 ……これ見てる部員の方はくれぐれも試さないでね?接着グルーガンで接着剤を盛り盛りします。幸いグルーガンもスティックも部室にありました。 とはいえ段ボール箱に電気工具がまとめてぶち込んであったので探すのが手間でした。物品管理アプリを完成させるまでに整理したいと思います。 LEDとスイッチ穴の部分に盛り盛りしてくっつけます。 あとは筐体を元通りにねじ止めして終了です。 このスピーカー片方音出ないんだよね「だいぶ前から。」「…マジ?」 VR用のマシンに繋がっているスピーカーですが、左から音が出てなかったみたいです。VR中はスピーカーが向かって右側に置かれている関係でマジで全く気付いてませんでした。 どうせ断線とかだと思うので原因特定だけして、直せそうだったら直してって感じになると思います。 では分解。 早速音が出ない左スピーカーの抵抗値を測ってみますが抵抗値はほぼ0。 線が断線してるんじゃないかなぁということで、反対側の筐体内にある基板を出してみます。画像左の黒い線が左スピーカーに続く線なので、根元のはんだ付けされている部分を使って抵抗値を測ってみたら結構デカい数字が出ました。 回路的には線の有無以外に差異はないはずなので、線が断線していなければこの2つの測定結果はほぼ変わらないはずです。 しかし実際は大きく抵抗値に差が出ているので、線が断線しているものとみて間違いないでしょう。 なお部室に替えの線になりそうなものはなかったので、原因の特定だけしましたよということで元に戻して終了です。2Dさんお手伝いありがとうございました。 それはそうと、結局直ってないので誰か修理やってほしい。 というか線買って直すかスピーカー新しく買うかしないとやばいですね。ハードオフあたりで電子工作のオモチャも兼ねて何か良さげなスピーカーを見繕ってくることにしましょう。それでは、また。

> 内容を見る

プログラミング Polygon
プログラミング

GitHub PagesとHugoを使ってブログを作ってみた

ふぉです。最近はジャンクフードがマイブームです。 最近『縁側ごろごろ』っていう個人サイトを作りました。そちらに投稿したものと記事の内容としては被るのですが、GitHub PagesとHugoで割と簡単に作れたので作り方をまとめておきます。GitHub Pagesでブログが作れるらしい何となしにネットの海をサーフィンしていると、ふと立ち寄ったブログのURLが~.github.ioでした。 へぇ~GitHub Pagesでブログが作れるんだ~。わたしもやりたい。 ググってみると、静的サイトジェネレータを使うとMarkdownで書いたファイルを元にWebページを生成できるみたいです。『GitHub Pages ブログ』と検索したところ静的サイトジェネレータの名前がいくつか出てきたのですが、なんとなくおもしろそうだったのでHugoを使ってみることにします。Hugoを使って実際に作ってみるHugoの導入まずHugo Extendedをインストールするのですが、Windowsでは例えばChocolateyなどのパッケージマネージャを使うので、まずはそちらをインストールしておきます。 chocoコマンドが使えるようになったら、Hugo Extendedをインストールします。GitHubの準備とThemeの導入続いてブログ作成のための環境構築をします。以下の記事を参考にさせて頂きました。 3分で GitHub にブログを作る (Hugo + GitHub Pages) - Qiita HugoではThemeと呼ばれるページレイアウトのテンプレートのようなものがHugo Themesで色々公開されていて、 『Hugo Future Imperfect』というテーマが個人的にとても好きなので導入します。 先ほどの環境構築の記事ではconfig.tomlを編集するようになっています。 themes/hugo-future-imperfect/exampleSiteにあるconfig.tomlをコピーして、ブログ本体のディレクトリに元々あるconfig.tomlに上書きしておきます。 以降、themesディレクトリ以下のファイルを変更する際は全てブログ本体の同名ディレクトリにコピーしたものを使用しています。config.tomlをカスタマイズする自分のブログに合わせてconfig.tomlを編集していきます。ここではブログのタイトルや説明、 自分のSNSアカウントへのリンクや記事の共有ボタンの有効化などブログの基本的な要素を編集できるようになっているので、好きなようにカスタマイズします。 特に変わったことはしていませんが、1つあるとすればアイコンは私がGitHubで使っているものをURLで参照して持ってくるようにしています。 https://github.com/<USERNAME>.pngとするとアイコン画像を取得できます。 画像が思ったよりでかかったのでサイズは100pxとしておきます。ここまでの設定でconfig.tomlは以下のようになります。 [params.intro.pic]以下をいじることで左上当たりのプロフィール部分のレイアウトをいじることができます。 フォントを変更するページ中で使用されるフォントを指定します。Google Fontsで使いたいフォントをインポートして使用する感じになるので、便利すぎてありがとうございますの気持ちになります。記事のフォントNoto Sans JPが好きなので、使えるようにします。 hugo server -Dでサイトのテスト実行をし、ブラウザで文字部分について検証をします。Vivaldiだと日本語の文字の上で右クリック→[検証]でした。 Stylesに表示されている項目のうちfont-familyの部分がフォントの指定になっているようなので、場所として示されているmain.css:117付近を見に行きます。 \themes\hugo-future-imperfect\static\css\にmain.cssがありました。117行目あたりからがフォントの設定となっていたので、以下のように変更しています。@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); body, input, select, textarea { color: #333333; font-family: 'Noto Sans JP', sans-serif; font-size: 14pt; font-weight: 400; line-height: 1.75; }インラインコードのフォント続いてインラインコードの文字を検証すると、main.css:259付近でフォントが指定されていたので、ここも変更します。コードのフォントにはSource Sans Proを使うことにします。@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap'); code { background: rgba(160, 160, 160, 0.075); border: solid 1px rgba(160, 160, 160, 0.3); font-family: "Source Code Pro", monospace; font-size: 0.9em; margin: 0 0.25em; padding: 0.25em 0.65em; }見出しの調整見出しをより目立たせるためにデザインの調整をします。デフォルトではh3以降見出しのフォントサイズが本文より小さくなってしまうのと、見出しに何も装飾がないのは記事本文と判別がつきにくいのとで、デザインをちょっとだけ変えてみます。 デザインを変更する見出しに関してですが、デフォルトの状態ではアルファベットは全て大文字で字間がやや広いです。私の好みに合わせてmain.css:197付近を以下のように変更しています。h1, h2, h3, h4, h5, h6 { color: #3c3b3b; font-family: "Raleway", Helvetica, sans-serif; font-weight: 800; letter-spacing: 0.10em; line-height: 1.65; margin: 0 0 1em 0; text-transform: none; }このコードのすぐ後のあたりで見出しのデザインを変更できるのでやってみます。 CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 こちらのサイトのCSSをお借りしまして、見出しの文字の左に灰色のマーカーを付けています。 h4、h5、h6は共通なので端折っています。h1 { font-size: 1.4em; border-left: solid 5px #C0C0C0; padding: 0.1em 0.5em; } h2 { font-size: 1.2em; border-left: solid 5px #D0D0D0; padding: 0.1em 0.5em; } h3 { font-size: 1.1em; border-left: solid 5px #E0E0E0; padding: 0.1em 0.5em; } h4 { font-size: 1.0em; border-left: solid 5px #F0F0F0; padding: 0.1em 0.5em; }こんな感じになりました。わかりやすくなったかも? デザイン変更の弊害を直す見出しのデザインを変更したところサイドバーでも見出しが使われているために、サイトタイトルのあたりが特に違和感マシマシになります。 タイトルの左のほうに刻み海苔が貼り付いているのとか正直めっちゃ変なので直します。 sidebar.htmlがサイドバーにあたるので見てみると、18行目に<h2>{{ .header }}</h2>というのがあります。5行目で<section id="intro">というようにIDが与えられているので、main.css内の先ほど変更したh2よりも下の行で#intro header h2に海苔を消すCSSを書けば良さそうです。 幸いmain.cssの2600行付近に見つかるので、こんな感じで海苔用の余白を作っているpaddingと海苔そのものであるborder-leftを共に0pxとか0emとかにする記述を加えて完了です。#intro header h2 { font-size: 1.5em; font-weight: 900; border-left: solid 0px #FFFFFF; /* 見出しに線入れたらタイトルにも出ちゃったので隠す */ padding: 0em 0em; /* 余白も0にしておく */ }同様のことをその他の見出し部分にも適用して、あとはちょこちょこナビゲーションバー(上に出てるサイトのタイトルとかHOMEとかABOUTとか書いてるとこ)とかをいじっておわりです。 あとは適当に記事を書いてhugoとコマンドを打てばpublicというフォルダに必要なものが全部出力されるので、このディレクトリをGitHubにプッシュしておきます。 簡単にオシャレなサイトが作れてめちゃくちゃ感動した。すごい。あとHugoはガチで生成が爆速です。びっくりした。

> 内容を見る