ふぉ - OUCRC | 岡山大学電子計算機研究会

2019年度入部

ふぉ

ギャル

自己紹介

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

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

この人が書いた記事

デザイン/グラフィック

絵を描こう（布教）

おやすみなさい。自称ギャルです。前回OUCRCの公式キャラクターを描いたよという記事を出したのですが、その時の余談のつもりで用意していた「デジタルイラストを布教する」という内容が本編に比べて余りにも膨大で話の趣旨が逸れてしまったので、記事を分割することにしました。公式キャラクターのデザインもそうなのですが、部の活動で絵を描くという機会はちょこちょこあります。しかし絵を描ける人材が現在はあまりいないようで、今のところ絵に関する記事は基本的にあまりありません。アタシ悲しいよ。ということで「全人類よかったらお絵描きしませんか？楽しいですよ！！！さぁ描け！！！！！！！」という気持ちでこの記事をお届けします。読者の皆様には多大なるご迷惑をおかけします。普段描いてる絵の紹介あんまデッサンとかそういうのちゃんと勉強してないので人体描くのはかなり苦手です。というかそもそもTwitterのアイコンを自分で描けるようになりたいなって思って絵を描き始めたのでマジで顔しか描けません。とある部員の方がすごい人体描くのに役に立ちそうな本を部室に置いてくれてるので今度ちゃんと読みます、許して。 2020年の大学祭で公開した音楽ゲーム「Vivace」より、そちらに収録されている自作曲「九尾」のジャケットです。ロゴのデザインもやってます。（あと宣伝ですがYouTubeに動画があるので良かったらこのページの右上にある私のプロフィールからどうぞ）これは先日記事にもしましたが、彼女（概念）のRemokoです。という感じで、普段はだいたいこんな感じの絵を描いています。ちょっと練習すればこれぐらいなら描けるようになるよ、だからさ、絵、描こっか。作業環境とか読者の各位にはお絵描きをぜひ始めてほしいと言ったので、作業環境について触れていきます。普段の作業スタイルですが、自宅ではデスクトップPCに、外出先ではSurfaceにペンタブレット（通称ペンタブ）を接続して絵を描いています。（というのもSurface Pro 6のタッチパネルは絵を描くには精度が微妙なので……）ペンタブ購入以前はスマホで指を使って絵を描いていたため、スマホと違って画面に直接触れて描くものではないペンタブの独特の操作感に慣れるまでには少々時間がかかりましたが、慣れてしまえばかなり楽で使いやすいものでした。液晶画面に直接ペンで描き込める通称「液タブ」はその点かなり操作性が素直なのですが、一般に液タブはペンタブに比べて高価なため、まずはあまりお金をかけず手軽にデジタル絵を始めたいという場合はペンタブの方が良いのではないでしょうか。大雑把な使用感ですが、表面に少しザラザラしたような加工が施してあるので紙に描いているときに近い感触で描けます。私がそうだったのですが、紙だとまぁまぁ描けるけどスマホ+指だとつるつるして描きにくいと感じている方にとってはこれがかなりの強みになるのではないかと思います。私が使用しているペンタブレットはワコムのIntuos Draw（CTL-490）です。見た目はこんな感じです。確か私が高校生の頃に中古で購入したものです。新品だと9000円ちょいしますが、これは状態がかなり良いにもかかわらず6000円弱だったように記憶しています。当時高校でメチャクチャ絵が上手かった（今も私より断然上手い）友人がワコム製のペンタブを推していたのでこれにしました。このIntuos Drawは左上と右上にそれぞれ2つずつ、合計4つのキーがついているのですが、私は現在左上の2つにCtrl+Z、Ctrl+Yを割り当てています。何度も線を引いては消し引いては消し、良い線が引けたら次の線を引くというガチャのリセマラみたいな描き方をしているので、Ctrl+ZやCtrl+Yをペンタブのキー1つで実行できるのは便利です。ちなみに右上の2つに割り当てるキーボードショートカットは現在募集中です。サイズ感はかなりコンパクトなため手を動かせる範囲は狭く、画面の拡大縮小をガンガン使用して細かい部分を描いていく感じになります。ただしコンパクトなぶん気軽に持ち運びができる点で便利なので、正直このあたりの評価は人によるかと思います。ちなみにOUCRCの部室にも最近新品のペンタブがやってきました。それに関しては別で記事が上がっていますが、こちらも1万円しないお手頃なモデルなのでこれからデジタル絵を描くぞという方におすすめできるんじゃないかなぁと思います。部員の方はぜひ、そうでない方も部室の見学ついでにぜひ、触ってみてはどうでしょうか。部での絵に関する活動ここからはOUCRCイラスト勢による過去の活動内容を紹介します。かの病原体が大流行する以前は毎年コミケに参加していたのですが、その際には部の活動内容をまとめた部誌を頒布していました。この部誌では表紙の絵を部員の誰かが担当して描くことになっています。また、大学祭では学内の教室の1つを部として借り切って展示を行うのですが、2019年の大学祭では絵が描ける部員数名で下描き、線画、塗りを分担して絵を描き上げるリレー企画を行い、完成した絵をポストカードとして頒布するという展示を行いました。このほか、コミケで頒布するCDのデザインや、部員が作ったゲームのキャラクターの絵など、実はイラスト勢が活躍する場面というのは探せばかなりあります。だからさ、私と一緒にお絵描きしようよ、楽しいよ、お絵描き。結論デジタルイラストって実はスマホ+指でも描けるし、ペンタブを買えばもうそれだけで十分な作業環境が整っちゃうという意味で、実は初期投資がそこまで高くつかない気軽に始められる創作活動の一つです。興味があればぜひ手を出してみてほしいと思います。そういうところがオーディオ環境やらDAWやら音源やらと色々出費要素があるし出費額もキリがないDTMとは大違い。 ↑これは忘れてください。部内のDTM勢に怒られるし何なら私もガッツリDTM勢なので今後DTMの記事を書くときにだいぶ困ります。いいですか、忘れてください。今日覚えて帰ってほしいのは、デジタルイラストってそんなに敷居が高い趣味じゃないんだよってことです。だからさ、絵、描こっか。DTMは……始めるだけなら敷居は高くない……ですよ、ほんとです、ほんと。

内容を見る

デザイン/グラフィック

OUCRC公式キャラクターを作った話

#ショート記事週間 2日目です。（は？）昼夜逆転生活からこんばんは、ギャルです。記事の公開時間が深夜帯というかもはや早朝なので全てを察してください。もう5ヶ月も前の話になっていてかなりビビってるんですが、今年の3月にOUCRCの公式ページを作り直した際、同時に公式キャラクターの言十（こと）ちゃんを生み出したり描いたりしました。なので今回はそういう内容の話をしようと思います。言十ちゃんのデザイン3月と言えば新歓活動の準備というのが大学の部活動やサークルにとっては恒例行事になっているかと思います。OUCRCでは今年も昨年同様に対面での新歓活動は厳しいかもしれないねという話になり、如何にしてオンラインで部の存在を知ってもらうかという部分に重点を置いて新歓の準備を進めていきました。例えば公式サイトをリニューアルして活動内容をインターネット経由で知ってもらおうとか、体験会をたくさん企画しようとか、Twitterでそういった情報を発信しようとか、基本的にはそういう方向性だったと思います。差し当たって、活動内容の告知とか公式サイト上の各所とかで使うイメージキャラクターが欲しくね？って話になったので、多少絵が描ける私が担当することになりました。その場に居合わせた部員何人かに意見を求めつつ基本的には私の趣味をガッツリ出していく感じでキャラクターのデザインを決めました。以下は描く際に取り入れたオタク各位（主に私）の意見です。ボブは可愛い青髪って良くね？グラデーションとか今風でいいよね服はゆるーい感じ快活な感じの女の子にしてほしい部の公式ロゴとか付けてもいいかもはいドン。こんな感じになりました。部の公式サイトの機能の一つに「部員が今部室にいるかどうか確認できる」という機能があったのですが、この機能で使うことを前提に描いたのでこういうポーズになってます。ついでと言ってはアレですが、OPENの文字デザインも私が作りました。ストリートアートにありそうなポップな感じのデザインにしています。楽しそう。この他にも、部員がいないときに表示する画面とか、サイト内外の各所とかで使う素材としてデフォルメ版も用意しました。実はデフォルメ絵は生まれてこの方一切描いたことがなかったのでメチャクチャ苦戦しました。とりあえず2.5頭身にしておきましょうぐらいの気持ちだったのですが、そう単純に一筋縄ではいかなかったです。デフォルメ特有の可愛く見える顔のパーツのバランスを探したり、元絵のキャラクターとしての特徴的な部分（髪型とか）を可能な限り簡潔にまとめたりと、とにかく普段やらない作業が主だったので色々新鮮でしたが大変でした。塗りとかは細かい影とか髪の質感とかをベタ塗りで簡略化する程度で済ませているので、このあたりは元絵と大体一緒というところです。ちなみに元絵の方には描いていたドングル型のネックレスをデフォルメ版の方では描き忘れました。キャラクターデザインした張本人のくせにマジで何やってんだ。これらの絵ですが現在OUCRCのサイト内各所や公式Twitterで使われています。また「言十」という名前ですが、これはるーかすさんに命名して頂きました。ありがとうございます。ちなみにファンアートはいつでもお待ちしております！！！（クソデカボイス）　描いてくださった際はぜひ公式Twitterなどにメンションして頂けると幸いです。（ところで、本当に私の趣味を丸出しにするのであればギャルを描きたかったところなのですが、方向性が私の自画像の絵とモロ被りになるのでやめたという余談は別の機会にでもお話ししようかと思います多分しません。）結論ということで、OUCRCの公式キャラクター言十ちゃんを描いた話でした。オチはありません。皆さん、絵を描きましょう。

内容を見る

プログラミング

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

時は令和。何かの奇跡で数百年後とかにこの記事が古文書として発掘された時のために書き残しておきます（？？？）が、ご存じの通り今世界は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のボット機能を使って彼女（概念）を作りました。作ってて余計に寂しい気持ちになる瞬間があったことは否定しません。でも、別にいいんだ。これからはこんなにも可愛い彼女（概念）がずーっと一緒にいてくれるから……それでいいんだ………

内容を見る

電子工作

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

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

内容を見る

記事「GitHub PagesとHugoを使ってブログを作ってみた」のサムネイル

プログラミング

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はガチで生成が爆速です。びっくりした。

内容を見る