りつくろいす

英語が苦手です

家でノートPCをシュッと使うためにドッキングステーションを買った

経緯

今までは自宅ではデスクトップPC、外ではノートPCを使っていて問題がなかったのだが、去年ぐらいから開発のアルバイトをさせていただけるようになり、開発用のPCを支給してもらった。 さらに中古でx270を購入し、ノートPCが合計3台になった。

そのため、デスクトップではもっぱらゲームと動画視聴以外はせずに、ノートPCで開発をすることが多くなった。

購入

こうなってくるとやはりノートPC用の自宅環境を整えたい。 頻繁に持ち運びをする関係上、いちいち端子を抜き差しするのは面倒くさいので、ドッキングステーションをヤフオクで買った。

落札したのはThinkPad USB Type-C ドック (dk1633)である。送料は無料で落札額は6000円ぐらいだった。

support.lenovo.com

DP2つとUSB2.0が2つ、USB3.0が3つ、おまけにUSB-Cがついているので十分接続できる。 あと給電できるのが地味に嬉しい。 これでUSB-Cを挿すだけでディスプレイ、キーボード諸々を繋げられるようにしたい。

f:id:seiritsu:20220319000025j:plain
購入したdk1633

接続

実際に接続してみる。

f:id:seiritsu:20220319000147j:plain
ドッキングステーションに端子を接続

購入する前に自分の環境をよく確認しなかったのが悪かったのだが、今デスクトップPCではHDMIとDPをそれぞれ1つずつ使ってデュアルディスプレイを実現している。これはGPUについているHDMIの口が一つしかないためなので、DPを使わざるを得ない。

しかし、両方のディスプレイにDPの口は1つずつしかついていないため、どちらかのディスプレイはHDMIから入力を取ってくる必要がある。 そのため片側のディスプレイではドッキングステーションを介してではなく、ノートPCのHDMIの口に直接挿すようにした。

f:id:seiritsu:20220319000141j:plain
2本になってしまったのだ…

実際に運用してみて、やはり一本で全部繋げたいとなれば方法はいくつかありそう。

  • DPの切替器を買う
  • DPが2つあるディスプレイを新たに買う
  • HDMI to DPの端子を買う
  • ドッキングステーションを新調する

一番簡単で安いのはDPの切替器を買うことかな。

ということで、ノートPCを自宅で使う環境が完成した。 デスクトップPCでは奥のマウスとキーボードを使って、ノートPCでは手前のものを使っている。 ノートPC用のキーボードはワイヤレス化もできるので、ある程度持ち運びに特化できたと思う。

f:id:seiritsu:20220319000144j:plain
今の自宅環境

おわりに

ちまちま自宅環境を整え続けているが、入力機器周りの不満はほぼ解消された。

一応WQHDがいいとか、デスクトップでもトリプルディスプレイがいいとかあるが優先度は低い。

次はPCが増えてデータが分散しがちなので、ファイルサーバー建てたり、wiki建てたりを自宅でしたいなと思ったり。

あと、放置してる自作キーボード(マクロパッド)いい加減組まないとなあ。

おわり。

TsukuCTF 2021に参加しました(write-up)

TsukuCTFにkstmとして、後輩と2人で参戦しました。
公式のwrite-upもSecHack365-Fansのページに公開されています。

自分たちは2700点で24位で、そのうち次の問題に自分が正解しました。

Welcome | Tsukushi

TsukuCTF 2021にご参加いただきありがとうございます。フラグの形式は全てTsukuCTF{}です。
この問題のフラグはTwitterのアカウント名です。質問などはTwitterのDMにお願い致します。

公式Twitterのアカウント名かスクリーンネームを入れればいいだけなので
スクリーンネームのほうを入れました。

TsukuCTF{2021}

(今見たらスクリーンネーム2022?になってました)

digits | Web

コンピュータは高速に正しく計算してくれますが、昔のコンピュータは今ほど正確に計算できないことがありました。現在もハードウェアの故障などが原因でとても低い確率でコンピュータは計算をミスするでしょう。 運が良いあなたならこの問題が解けるはずです。10 桁の好きな数字をクエリパラメータ q に入れて、神に祈りましょう。

同時に次のファイルが与えられます。

from typing import Optional
from fastapi import FastAPI
import random

app = FastAPI()

FLAG = "TsukuCTF{}"


@app.get("/")
def main(q: Optional[str] = None):
    if q == None:
        return {
            "msg": "please input param 'q' (0000000000~9999999999).  example: /?q=1234567890"
        }
    if len(q) != 10:
        return {"msg": "invalid query"}
    if "-" in q or "+" in q:
        return {"msg": "invalid query"}
    try:
        if not type(int(q)) is int:
            return {"msg": "invalid query"}
    except:
        return {"msg": "invalid query"}

    you_are_lucky = 0

    for _ in range(100):
        idx = random.randrange(4)
        if q[idx] < "0":
            you_are_lucky += 1
        if q[idx] > "9":
            you_are_lucky += 1

    if you_are_lucky > 0:
        return {"flag": FLAG}
    else:
        return {"msg": "Sorry... You're unlucky."}

プログラムから、q0~9以外の文字を入れることができればflagになりそうということがわかります。
文字列中に-+を入れるのはだめで、type(int(q))をしたときにintである必要があるようです。

そこで、pythonint()のリファレンスを確認してみます。

バージョン 3.6 で変更: コードリテラル中で桁をグループ化するのにアンダースコアを利用できます。

とありました。動いているpythonのバージョンは明記されていませんでしたが「どうせ3.6以降だろ」と思いながら投げてみると

➜ curl 'https://tsukuctf.sechack365.com/problems/digits?q=10_000_000'
{"flag":"TsukuCTF{you_are_lucky_Tsukushi}"}⏎

無事flagを入手できました。

TORItsukushi | Misc

大文字文字列 TSUKUSHI を可能な限り何度も取りつくしてください。
残った文字列がフラグです。フラグ内に大文字文字列 TSUKUSHI は含まれていません。

添付ファイルを開くと大量のTSUKUSHIの文字が羅列されているテキストファイルでした。
CyberChefFind/Replaceを使ってTSUKUSHIを消して、出てきた文字列を再度inputに入れる…を何回か繰り返すと 最終的にすべてのTSUKUSHIが消えてflagが出てきました。

TsukuCTF{Would_you_like_some_fresh-baked_Tsukushi?}

Customization | Misc

Tsukushiくんは自分を鍛えるために、毎日欠かさず活動を行う習慣化を行うことにしました。
マンダラートを利用しますが、晒されるのが恥ずかしいので目標の部分を消してしまったようです。目標を見つけてください。

Tsukushiくんのマンダラートのgoogleスプレッドシートが渡されます。 f:id:seiritsu:20210912153416p:plain

マンダラートの目標の部分がどこにあるのかよくわからなかったので、調べてみたら中央の部分らしいです。
該当のセルをクリックしてみると内容の部分にflagが出てきました。

TsukuCTF{yak1n1ku_ta6eta1}

CAD | Hardware

少し早いが筑紫くんと素日華ちゃんは少し早いが今年のクリスマスについて話をしていた。
素日華ちゃん「クリスマス、キーホルダーが欲しいな~」
筑紫くん「いいよ~素日華の好きな動物を模したものを作っちゃおうかな~」
そして、筑紫くんは3Dプリンタで彼女の好きな動物をキーホルダーにして、メッセージも残したらしい。

※この問題はCADソフトが手元ない場合でも解くことが可能です。

添付ファイルをプリント3Dとかで開いてぐりぐり動かしてやるとflagが見つかります。

f:id:seiritsu:20210912154158p:plain

TsukuCTF{ILIK3B3ar}

ramen | OSINT

ハッカーにとってラーメンは必須の飲み物だといわれています。写真のラーメン店の本店のインスタグラムIDを特定してください。

ラーメンの画像が与えられるのでグーグル画像検索に投げてみましたが、コーンポタージュしかヒットしませんでした。 しかし、ヤングコーン載せているラーメン屋なんてあまりないと思い、スープの色も独特だったので、

f:id:seiritsu:20210912155052p:plain

とグーグルで検索すると画像欄にそれっぽいラーメンが出てきました。
どうやら銀座 篝というお店らしいです。

flagは本店のInstagramのIDだったので

TsukuCTF{kagari_honten}

shop | OSINT

Tsukushiくんはショッピングモールにデートに来ましたが、相手がいなかったことに到着してから気づきました。
帰ろうと思いましたがここがどこかわかりません。動画内に映っているショッピングモールの店舗名を特定してください。

イオンモールが写っている動画で、後半には車道と湖らしきものが映っています。
「湖といったら琵琶湖!」なので、脳死で琵琶湖近くにある「イオンモール草津」を入れてみると正解でした。

TsukuCTF{イオンモール草津}

fishing | OSINT

初めての釣りで楽しみだなー! 友達が先に待ってるらしい。 
友達から写真が送られてきた。 あれ、どこだっけ...?

写真の場所を答えて下さい。

画像検索に添付画像を投げてみると「若洲公園キャンプ場」がヒットします。

公式サイトにアクセスしてみると、「若洲海浜公園&江東区若洲公園」となっていて、 そのうち「若洲海浜公園」をflagに入れてみると正解でした

TsukuCTF{若洲海浜公園}

train | OSINT

画像が撮られた駅名を答えてください。

    この問題は5回までしか提出できません。
    駅名は東京近郊路線図内に記載されている駅名の英語表記を使用します。
    駅名がそのままフラグになります。仮に駅名がKyotoの場合、フラグはTsukuCTF{Kyoto}となります。

東京のことはよく知りませんが、画像と路線図から「京浜東北線」と「山手線」の両方が通っている駅だということがわかります。
また、京浜東北線の電光掲示板の「15:35頃まで通過」を調べてみると、特定の駅で快速が止まらないようです。
さらに、山手線の方面が東京以降モザイクで消されているものの、下に英語でbukuroと書いてあるので池袋方面であろうことがわかります。

f:id:seiritsu:20210912160905p:plain

以上の条件に当てはまるものは路線図から「有楽町」と「新橋」だけなので、両方を入れてみると新橋が答えでした。

TsukuCTF{Shimbashi}

train2 | OSINT

今いる駅名を答えてください。駅名は漢字で答えてください。

貰った画像をよく見てみると踏切名?のようなところに「出町柳 9号」と書いてあるのが確認できます。
検索してみると写真を撮っている人がヒットして、メモのところに近くに「元田中駅」があることが述べられています。 よってflagは元田中になります。

TsukuCTF{元田中}

cafe | OSINT

私の彼氏(@7aru7aru)が最近どうやらメイドカフェにハマっているみたいなんだけど、そのカフェの場所が知りたいの!
そのお店の公式 HP の URL がフラグです。ただし、もしそのお店がチェーン店の場合は店舗専用 HP の URL がフラグです。

Twitterにアクセスしてフォロー欄を漁ってみると、めいどりーみんの秋葉原中央通り店の子をフォローしていることがわかります。
また、メディア欄を漁ってみるとメイドさんとの写真が見つかり、いいね欄を見てみると先ほどのめいどりーみんの子がいいねしているのがわかります。
他にフォローを漁ってみてもメイドカフェの子のアカウントが見つからなかったことと、めいどりーみんの制服を調べてみると一致したことにより、 「めいどりーみん 秋葉原 中央通り店」であると確信して

TsukuCTF{https://maidreamin.com/shop/detail.html?id=5}

とすると無事正解でした。

OBOG | OSINT

 easy sechack365

セキュリティマインドを有した創造的人材を目指しているTsukushiくんは国立研究開発法人情報通信研究機構が実施する、セキュリティイノベーター育成プログラムSecHack365に参加しています。参加したはいいものの、進捗が全くなく、嫌になった彼は修了生が作成したSecHack365非公式サイトを一部改ざんしてしまいました。彼の改ざんした内容を探してください。

※本CTFはNICT主催の若手セキュリティイノベーター育成プログラムSecHack365の修了生イベントに際して開催されています。

SecHack365非公式サイトにアクセスしてみるとリポジトリが公開されていたので、直近のコミット履歴を確認してみましたが、flagらしきものは見つかりませんでした。

どうしようかなと思って、たまたまデベロッパーツールのコンソールの欄を開きながら†締切駆動コース†のページを開くと、 コンソールログに

Please decode! → VHN1a3VDVEZ7aHR0cHM6Ly9zZWNoYWNrMzY1Lm5pY3QuZ28uanB9

の文字列が表示されました。

base64デコードをかけてやるとflagを得ることができました。

TsukuCTF{https://sechack365.nict.go.jp}

InterPlanetary Protocol | OSINT

大変だ!つくし星に住むエイリアンが団結して地球を侵略しにくる!以下の文字列は、つくし星で使われている特殊なウェブサイトのURLらしい。
このウェブサイトをなんとか開いて、侵略計画を手に入れるのだ!!!
    bafybeieozcigchzmmpjzlct5eti4xhqexjnolpuehsnk2ckeaiqfqfqilu

    bafybeifvtvmitvebs6ktbaqqhort2h76xfen4zj65bujq7xos2zzxdvwga

    bafybeidtzxolknnds6k2ny6s6rgvbm7t7gopwyfgvyblfjdw6m6og2vsxm

何も考えずにbase64に入れても(当たり前だけど)答えは得られず、文字列の頭のbafybeiが共通していたので検索してみましたが何も得られませんでした。
わからなかったので、タイトルでググってみるとIPFS(InterPlanetary File System)というおあつらえ向きのプロトコルが出てきてくれました。
問題文のURLはこのIPFSの形式にそっているものだと推測できます。

braveだとこのURLの形式に対応しているらしいですが、入れるのも面倒なので他の方法がないか探しているとjs-ipfsというサイトが出てきて、 ここでアクセスを試すことが出来そうだったのですが、うまくいかずうーんとなりました。
少し考えてみるとHTTP Gatewayの形式で試していないことに気づき、https://ipfs.io/ipfs/以下に文字列を入力してアクセスして組み合わせてみると無事flagを入手できました。

TsukuCTF{IPFS_is_the_future}

感想

OSINTは普段解かないので、今回沢山解くことができて楽しかったです。
でも惜しいところまでいって後輩に投げた問題もいくつかあったので、OSINT力(りき)をもっとつけていきたいです。

Web問も数題あったのに全然解けなかったので、CTF全般もう少し積み重ねていきたいです。
TsukuCTF運営の方々ありがとうございました。楽しかったです。

サークル内ISHOCONに参加しました

ISHOCONとは

ISHOCONとは Iikanjina SHOwwin CONtest の略で、ISUCONと同じように与えられたアプリケーションの高速化を競うコンテスト(?)です。

github.com

今回はサークル内のOBのdyumaさんとbgpat方々に主催、運営をしていただき開催することができました。 ありがとうございます!!

参加記

参加時に何をしていたかメモをしていたのですが、途中で確認したらindexを張ったところが全て抜けていました… そのため、内容が薄いものとなってしまいますがお許しください🙇‍♂️

自分はISUCON自体参加したことがなく、パフォーマンスチューニングとは?という状態だったので、 色々と調べながら動かしていました。

開催日時

GW中の好きな時間に参加できるとのことで、開催は4/29~5/9までの間でした。各自時間のある時に自分の環境で高速化をするという形です。 自分は4/29と5/6、5/8辺りで作業をしていました。

4/29

とりあえずサーバーを起動してみて初期状態でベンチマークを回してみました。使う言語はgoです。 回した結果は261点でした。ここから、点数を上げていく必要があります。 何をすればわからなかったのでとりあえずmpstat -P ALLでコア数を見てみました。見たところ4コアらしいです。

あと、サーバー起動中にwrite: broken pipeのエラーが起きていて、これが何か悪さしてるのかなとも思ったのですが、とりあえず放置しました。

5/6

index貼り貼りの時間でした。 以下のリンクを共有してもらったので、見ながら作業。

www.slideshare.net

資料通りスロークエリログに全SQLを記録し、Percona Toolkitで解析してみると、 indexページでコメントを持ってくるところが重そうでかつ、資料の37ページにあるソートの条件に当てはまっていたので まずここにindexを貼りました。また、SELECTですべてのフィールドの値を持ってきていたので、これを必要なものだけ持ってくるようにしました。

また、typeがALLかindexになっていてrowが大きいという条件に当てはまるSQLもあったので、それぞれindexを貼りました。確かcountをするところだったと思います。 他にも貼れそうなindexを貼ると23000点を超えました! この日はこれで満足して終了しました。

5/8

indexをあらかた貼り終わったので、違う方向から攻めてみることにしました。 kataribeってやつを使えばいいらしいことをDiscordのサーバーでチラ見したので、これでアクセスログの解析をしました。

github.com

アクセスログを解析してみると、imageへのアクセスが死ぬほど多かったので、 こういう時はnginxで静的ファイルとして配信してキャッシュすればいいというのを見かけたのでこれを行いました。 つまり、Cache-Control "public, immutable";をjpgとcssに対してつけてあげました。 これで回してみると24000点ぐらいになりました。

思った以上に伸びなくて、再度kataribeを回して解析してみましたが、これ以上どうすればいいのかわからなかったので、 これでギブアップとしました。😭

最終順位

終結果は以下のような感じになりました。自分(ritsuxis)は24000点ぐらいで7/10位でした。対数表示で一見わかりにくいですが、 上位は30万点を超えて40万点ぐらいまで伸びてます(すごい…)

f:id:seiritsu:20210520145615p:plain
ISHOCN最終順位

感想

初めて挑戦したにしてはできたほうかなと思いました。 indexを貼るってどういうことかわかっていませんでしたが、適切に貼るだけでめっちゃ速くなったのでびっくりしました。

indexを貼る以外にもgoのコード内に原因があったり、配信の設定を変更したりいろいろとできることがあるらしいので、 また時間があるときに他の人のwriteupを見ながら実装できたらいいなと思っています。

他の人の参加記

fonoさん: 出身サークルのISUCONに雑に参加した話

Noiriさん: サークルで開催されたISUCONに参加した - yrfw

dyumaさん: サークルでISUCONを開催したので、参加した話 - Goryudyuma’s blog

RaspberryPi4+docker-mirakurun-epgstationで録画鯖を建てる

経緯

前期に大学の講義で必要だからとraspberrypi 4を買った

色々なことができるとは知っていたが特に作りたいものもなく、 その講義が終わっても部屋に放置していた

後期に入って友達の家に行ったときに録画鯖なるものがあることを知り(同人誌を見せてもらった) 自分の家にはそういえばテレビがないなあと思い建ててみたくなった

Mirakurunはラズパイでも十分動くということが調べているうちにわかったので、 諸々をそろえてやっと作成した(夏休みにPCを組んだこともあり、買う金がなかった)

Mirakurunはチューナーサーバー、EPGStationはMirakurun用の録画管理ソフトである

EPGStationが動いているサーバーにアクセスすることで、PCやスマホから動画を録画した動画を見ることが可能である

今回はこの2つがまとめて入っており、環境構築もされているdocker-mirakurun-epgstationを使って録画鯖を簡単に作っていく

また、EPGStationはdocker-mirakurun-epgstationで動作確認をしているらしいので、このコンテナを使うことでできるだけ開発環境に近い状態で運用できる

github.com

github.com

github.com

準備

以下のものを購入

あと、B-CASとLANケーブルと同軸ケーブルも必要

また、ラズパイ用のヒートシンクやケースについては全部そろっているものを購入した

www.amazon.co.jp www.amazon.co.jp www.amazon.co.jp

なお今回はHDDについては用意していない(余裕がなかった)

設定

docker-mirakurun-epgstationに書かれている前提条件に従う IPの固定化やsshの有効化等については述べないので、各自調べてください

OS

Raspberry Pi OSを使用する Raspberry Pi Imagerでインストールするなら、デフォルトで選択されているはず https://www.raspberrypi.org/software/ SDカードをフォーマットして焼く

ドライバのインストール

PX-S1UD用のドライバをダウンロードする dvb-toolsもインストールしておく

$ sudo apt install dvb-tools
$ wget http://plex-net.co.jp/plex/px-s1ud/PX-S1UD_driver_Ver.1.0.1.zip
$ unzip PX-S1UD_driver_Ver.1.0.1.zip
$ sudo cp PX-S1UD_driver_Ver.1.0.1/x64/amd64/isdbt_rio.inp /lib/firmware/

ドライバを使うために適当なところで再起動する

Dockerとdocker-composeのインストール🐋

Dockerをインストールする

$ curl -sSL https://get.docker.com/ | CHANNEL=stable sh
$ sudo usermod -aG docker $USER
$ docker -v

doker-composeをラズパイ(armv7l)でインストールする方法はいくつかあるが、今回はpipでインストールする 依存パッケージをインストールした後、pipコマンドで入れる

$ sudo apt install libffi-dev libssl-dev python3 python3-pip python3-dev
$ sudo pip3 install docker-compose
$ docker-compose -v

https://matsuand.github.io/docs.docker.jp.onthefly/compose/install/

docker-mirakurun-epgstationのインストール

$ git clone https://github.com/l3tnun/docker-mirakurun-epgstation.git
$ cd docker-mirakurun-epgstation
$ cp docker-compose-sample.yml docker-compose.yml
$ cp epgstation/config/config.sample.yml epgstation/config/config.yml
$ cp epgstation/config/operatorLogConfig.sample.yml epgstation/config/operatorLogConfig.yml
$ cp epgstation/config/epgUpdaterLogConfig.sample.yml epgstation/config/epgUpdaterLogConfig.yml
$ cp epgstation/config/serviceLogConfig.sample.yml epgstation/config/serviceLogConfig.yml
$ docker-compose run --rm -e SETUP=true mirakurun

できるだけ開発環境に近づけたいのでできればこのまま起動したいが、 この状態でdocker-compose up -dすると

ERROR: no matching manifest for linux/arm/v7 in the manifest list entries

となり怒られるので、docker-compose.ymlの27行目辺りmysqlimage:のところを次のように変更する

image: yobasystems/alpine-mariadb

また、command:のところも頭についているmysqldを消して

command: --character-set-server=utf8 --collation-server=utf8_unicode_ci --performance-schema=false --expire_logs_days=1

とする

チャンネル設定はmirakurun/conf/channels.ymlを自分の地域に合わせて適当に変える

その他必要な設定があればdocker-compose.ymlを変更する

起動

$ sudo docker-compose up -d

しばらく時間がかかるのでうまくいくように祈る🙏

無事うまくいったけどログを見ると

Error: stream has closed before get network

が出ていて、うまくチャンネルをスキャンできていない場合は、設定したチャンネルと取れるチャンネルが違う

$ curl -X PUT "http://localhost:40772/api/config/channels/scan"

を実行すると自動スキャンしてくれる

スキャンの際に

Error: stream has closed before get network

となる場合はヒットしていないだけだが、

Error: no available tuners

となる場合はチューナーの設定がうまくいっていないので、 mirakurun/conf/tuners.yml を変更したり、ドライバが入っているか確認したりする

確認

デフォルトだとEPGStationのポートは8888なので、アクセスしてEPGStationが立ち上がっているか確認する

v3.1.0からMirakurunにもUIがついたので、ポート40772にアクセスして確認してみる

すでに環境構築されている状態なので録画も問題ないはず

今後

ライブ視聴をするために下記ページにあるような設定をしてみたが、設定場所が悪いのかうまくいかない

これを何とかライブ視聴できるところまで持っていこうと思っている

https://medium.com/chinachu/c98v-raspberry-pi-4-49c9692f5c09

https://nyanonon.hatenablog.com/entry/20190608/1559979652

あとがき

元々テレビがなくても生きていた程度にはテレビを見ないが、無いならないで寂しいなと思っていたところだったのでしばらくテレビ帰りしようと思う

結構嵌まってしまい3日かかったが、今まで触らなかったところを触ったのでいい勉強になった

ラズパイ上でdocker-mirakurun-epgstationを使って構築する記事を見かけなかったので、参考になれば幸いである

参考にしたサイト

https://medium.com/chinachu/c98v-raspberry-pi-4-49c9692f5c09

https://medium.com/chinachu/c98v-raspberry-pi-4-49c9692f5c09

https://hiroto-k.hatenablog.com/entry/2020/12/31/190000

https://study.engineergirl.work/?p=184

https://blog.ishmz.com/post/rapsberry-pi-4-px-s1ud/

https://nyanonon.hatenablog.com/entry/20190608/1559979652

この1年間でしたこと

はじめに

この記事は信州大学のものづくりサークル「kstm」の アドベントカレンダー21日目の投稿です。(忘れてました)

qiita.com

ニートってこんな生活なんだろうなって思いながら過ごしていました。 1年間例のアレでずっと自宅にいたわけですが、その間やっていたことの中で外に見せられるものを紹介しようと思います。

また、この記事はそれぞれに対しての感想しか書いてありません。

1~3月

この頃はまだAtCoderやってました。記録を見た感じ2月末に出たコンテストで最後らしいです。 緑になって一区切りついて満足してやめちゃいました。

atcoder.jp

4~6月

Ruby on Railsで自分のサイト作ってみようと思ってやってました。 Rails6でやってたわけですが、そもそも目的のサイトはRails使うまでもないものだったし、Rails6の情報が全然出てこなくてだいぶ詰まりました。 やっぱり作りたいものがあってから技術を選ぶべきだと思います。 インターンにも申し込んだんですが落ちました。

あと記憶になかったんですけど無料でPAST受けれる回で受けて初級認定受けてました。 時間が足りなかったみたいな感じで言ってますが多分普通にわかってないような気がします。

7~9月

夏休みはPC組んだのもあって結構バイトに入っていた気がします。 アレのせいで実家にも帰れないし、バイトも人と会う仕事じゃないということが大きかったです。 あと、前期にできなかった実験を一気にやらされてました。

PC組んだのとWSL2の登場でだいぶ自宅の環境がよくなったように思います。トリプルモニターにしてぇ~。

10~12月

色々なことに手を出してました。

ICPC, ICTSC

まずICPCとICTSCに出て、ICPCは「はい」といった感じでしたが、ICTSCでは本選出場をキメてきました。(予選4位!)Dockerとk8sに強い先輩方のおかげです。

レンタルサーバー会社のカスタマーサポートでアルバイトしているので多少戦えた部分があったのですが他の人はどうやって勉強してるんでしょうね。

ウィンターハッカソン

またサポーターズがやってたハッカソンにも先輩方と一緒に参加しました。 初めて参加したものでしたが、初めてのチーム開発だったこともあって学びをたくさん得ました。

特に、各々の能力が異なっておりかつ時間が限られている中で、目的のアプリケーションを実装するための技術選定の重要性は感じられてよかったです。 1週間の事前開発期間があったものの、論文発表や実験などでお互いの時間がなかなか取れなかったため、ほぼこの技術選定に時間を使っていました。

このハッカソンで作成したアプリは終了後も開発を続け、今は一区切りついた状態なので、もしよければ一度触ってみてください。

github.com

GitLab Japan Hackathon

また、GitLab Tokyo主催のハッカソンイベントにも参加しました。このハッカソンではGitLabのOSSにMRすることが目的です。 当日の24時までにMRを作成して、それが1週間以内に承認されれば参加賞がもらえます。 全世界規模では来年の1月の初めにあるらしいです。

gitlab-jp.connpass.com

初めてOSSソースコードを触ってみましたが余りにも巨大で、現在開かれているissueを数時間で解決することは難しいので、 結局ローカライズ関連でまだできていないファイルを探して修正してMRを作成しました。

さっき自分の作ったMRを見てみましたがまだOpenのままでした、悲しいね。

ただ、両方のハッカソンに参加して思いましたが、人と一緒に何かを作っているという感覚はすごく楽しかったです。

来年にしたいこと

とりあえず、1月の初めにfirebaseを使うハッカソンにウインターハッカソンと同じメンバーで参加します。

ueqareer.connpass.com

また来年はやっと研究室に配属されます。CGやXR系の研究室に進むつもりでいますが、ネットワークにも興味があるので研究以外でどうにか両方やっていけないかな~と思ってます。

あと、大学の講義で必要だったので購入したRaspberry Pi 4が余っているのでこれで録画鯖かスマートロックみたいなものを作りたいなと思っています。

インターンも行きたい)

Railsアプリを作ろうと思ってWebpackでVueをインストールしたらバージョン違いでネットの海を彷徨い歩いた

なにこれ

Railsの入門書を終えて、なにかアプリケーションを作ってみようと思った。
せっかくだし何かJavaScriptフレームワークも一緒に使ってやってみようと思い、 最初の環境構築の部分を以下のサイトを参考に進めていこうとしたら壁にぶち当たった。

qiita.com

qiita.com

環境

  • Ruby 2.7.1
  • Rails 6.0.3
  • Node.js 12.16.3
  • Yarn 1.22.4
  • Webpacker 4.2.2
  • Webpack 4.43.0

問題が発生した箇所

上記サイトに沿ってProcfileを作成し、
bin/server
を実行したところ以下のようなエラーが発生しサーバーを立ち上げることが出来なかった。

03:19:36 webpacker.1 | Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.

解決?

「エラー内容的に@vue/compiler-sfcをインストールすればよさそう?」
そう思ったので
yarn add @vue/compiler-sfc
を実行したところ

warning " > webpack-dev-server@3.10.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
warning " > @vue/compiler-sfc@3.0.0-beta.10" has incorrect peer dependency "vue@3.0.0-beta.10".

という警告が発生した。
とりあえず無視して、bin/serverを実行したところ、とりあえずサーバーは動いてlocalhost:5000にはアクセスできたが大量にエラーが発生してるし、コンパイルできていない。

そこでnpm ls --depth 0で依存関係を見てやったところ、

npm ERR! peer dep missing: vue@3.0.0-beta.10, required by @vue/compiler-sfc@3.0.0-beta.10

というエラーが発生していた。
「いや、vue-loader@vue/compiler-sfcを要求してるのに何でエラーが発生するねん」
と思った。 そこでpackage.jsonを参照してみるとvueのバージョンが2.6.11だった。
じゃあ、vueのバージョンを上げるか@vue/compiler-sfcのバージョンを下げるかどちらかだと思ったので、
とりあえず後から入れた@vue/compiler-sfcのバージョンを下げようと思って、githubを参照してみると

github.com

そもそも、@vue/compiler-sfcはvue 3.0以降に必要なものな気がする。
ならばvueのバージョンを上げるのかという話になるが、vueに触ること自体が初めてなのでbeta版はあまり使いたくない。

解決!

何が問題でエラーが発生していたかをもう一度考えると、vue-loader@vue/compiler-sfcが必要だったのだ。
もしかしたらvue-loaderのバージョンが問題なのかもしれない。
そう思い確認してみると
"vue-loader": "16.0.0-beta.1"
だった。
githubを確認してみると、

github.com

どうやら最新は15.9.2らしい。じゃあ16.0.0はどこなのか。リリースノートを確認してみる。

github.com

これもvue 3.0以降のために書かれていた。完全に理解した。

vue-loaderを15.9.2に下げればよかったのだ!!!

yarn remove vue-loader
yarn add vue-loader@15.9.2

を実行した後
bin/server を実行すると今回はコンパイル成功!無事にいつもの画面が表示された!

おわりに: 他に参考にしたサイトなど

初めて触るので、検索や生成されたファイルの見方や場所を理解するのに苦労した。
警告で一緒に出てきたunmet peer dependencyに関してはrailsでの生成時から発生してるものについては特に気にしなくてもいいのかな?(以下のサイト等いくつか参照したが結局放置することにした)

Unmet peer dependencies · Issue #1078 · rails/webpacker · GitHub

npm の has unmet peer dependency とはどういう状態ですか? - スタック・オーバーフロー

@vue/compiler-sfc - npm

vue-loader - npm

vue-loader@vue/compiler-sfcも丁度最新版がリリースされたばっかりで笑ってしまった。(2020/05/08)

現場で使えるRuby on Rails 5 速習実践ガイドで詰まった

初めに

自分は初学者のため、なぜこの問題に対してこれで解決したのか理解できていません
解決した理由がわかる方は適宜教えていただきたいです

実行環境

Windows 10
WSL Ubuntu 18.04.4 LTS
Rails 6.0.2.2
Ruby 2.7.0

どこで詰まった

「現場で使えるRuby on Rails 5 速習実践ガイド 5.2対応」P.205の初めてテストを実行するところ。 本に沿って該当のコマンドを実行すると以下のようなメッセージが出る

Failure/Error:
  describe 'タスク管理機能', type: :system do
    describe '一覧表示機能' do
      before do
        # ユーザーAを作成しておく
        user_a = FactoryBot.create(:user, name: 'ユーザーA', email: 'a@example.com')
        # 作成者がユーザーAであるタスクを作成しておく
        FactoryBot.create(:task, name: '最初のタスク', user: user_a)
      end

      context 'ユーザーAがログインしているとき' do

Webdrivers::BrowserNotFound:
  Failed to find Chrome binary.

解決方法

そもそもchromedriver-helperのサポートが終了していてGemfileを探してもchromedriver-helperの記述がありませんでした。
※参考
qiita.com

もう少し探してみるとこんなページもあった

gist.github.com

これは速習実践ガイドのサポートサイト(正誤表)のページにも載っていて上記ページのAに沿えということであった

book.mynavi.jp

しかし、上記ページに沿って作業してやっても一向に最初のエラーから変わらなかった
最終的にたどり着いて解決したページは以下である

teratail.com

上記ページには書いてないがwindows 10とwslにそれぞれgoogle chromeをインストールしてやり、
さらにchrome-driverをwindows 10にダウンロードしてやった後、
以下のようにspec/spec_helper.rbを変更してやればよい(バージョンを合わせる必要がある)
(自分はchromedriverをC:\Bin\chromedriver_win32に置いています)

require 'capybara/rspec'
require 'selenium-webdriver'

RSpec.configure do |config|
  config.before(:each, type: :system) do
    Selenium::WebDriver::Chrome::Service.driver_path = "/mnt/c/Bin/chromedriver_win32/chromedriver.exe"
    driven_by :selenium_chrome_headless
  end
  # rspec-expectations config goes here. You can use an alternate
  # assertion/expectation library such as wrong or the stdlib/minitest
  # assertions if you prefer. 
…

このように変更してやることでtestを実行することが可能です
なぜ、config.before下にpathを置かないといけないのか、wsl上のgoogle-chromeがなぜ必要なのかわかりません
申し訳ないです
冒頭にも書きましたがなぜかわかる方は教えていただけると幸いです