Posts

フロントエンド技術に触れる機会を作るために、定期的に個人サイトを作り直している。今回はVue.jsのSPAから、Deno向け静的サイトジェネレータであるlumeを使った構成にごっそり変えた。lume.landSSGをしっかり触るのは初めてだったこともあり、ひとまずlumeの公式サイトにあるドキュメントを読んだ。こういう文書が整理されているのは本当にありがたい。手を動かしながらチュートリアルを進めてみて、最近のNext.jsやNuxt.jsよりずっとシンプルで、Jekyllなどよりも取り回しが良く拡張性が高い、というような感触があった。今回はこのような構成で作ってみた。静的サイトジェネレータ:lumeテンプレートエンジン:JSXCSSフレームワーク:TailwindCSSホスティング:CloudflarePagesまたTailwindの実装集であるHyperUIを大いに参考にさせてもらった。

この記事はSecHack365アドベントカレンダー2022の2日目です25日の夜にコーディングから始めて日付が変わってしまいましたが、空いていたのでねじ込ませてもらいます。qiita.comはじめに開発の背景実装おわりにはじめにSecHack3652019年度の修了生で、2021年度・2022年度のアシスタントを担当している灰原です。この記事では、思い付きで作ったDockerコマンドのGo言語ラッパーを紹介します。github.com下記のような形式で、指定したDockerコマンドを実行するためのexec.Cmdを生成してくれるものです。cmd:=docker.DockerVersionCmd(docker.DockerVersionOption{},[]string{})out,err:=cmd.CombinedOutput()iferr!=nil{log.Fatal(err)}fmt.

以前の記事でDockerEngineSDKの使い方について解説しました。この頃(2020/12)はビルドに少し工夫が必要でしたが、今(2022/09)ではgomodtidyで用意されたgo.modでそのままビルドできるようになっていました。この記事では、DockerEngineSDKを使って、リモートサーバー上のDockerdaemonにSSH経由で接続する方法について書きます。haibara-works.hatenablog.com結論下記のコードは、ssh://[email protected]で示されるサーバー上にあるDockerdaemonに接続してimageを一覧表示するサンプルです。ポイントはgithub.com/docker/cli/cli/connhelperをimportしていることです。packagemainimport("context""

最近Charmというプロジェクトのライブラリを使ってみています。Charmでは、CLIにTextInputやListのようなリッチなコンポーネントを組み込めるBubbleTeaや、ターミナル上の色やレイアウトなどのスタイルを定義するLipGlossなど、便利なライブラリが公開されています。その中でも、ターミナルでMarkdownを表示するライブラリGlamourを使って、Go製ツールの画面出力を色付かせてみました。github.comGlamourを使ってみるまずは簡単にGlamourを使ってみます。以下のコードは、Markdown形式の文字列をGlamourで描画するサンプルです。ちなみに、ここで使っているheredocというライブラリは、インデントを保ったままヒアドキュメントを書くためのものです。packagemainimport("fmt""github

4月からの職場が東京なので、北海道から引っ越してきました。生まれも育ちも北海道なので、ドキドキですね。新居の周りは結構便利なところで、徒歩圏内で生活を完結できそうなくらいです。電車(というか人混み)が苦手なので、助かっています。便利な立地もあってか、家賃は想定より上がってしまいました。頑張って働いていこうと思います。というわけで、こちら欲しいものリスト(新生活応援フェア)になります。https://www.amazon.co.jp/hz/wishlist/ls/N5FSRL3DFIJC

この記事はLOCALStudentsAdventCalendar2021の11日目の記事です。adventar.orgAWSCDKを使えば、StepFunctionsのワークフローをtypescriptなどのコードから生成してデプロイすることができます。ここではデプロイはせずに、AWSCDKからStepFunctionsのワークフロー定義(AmazonStatesLanguage)を生成してみます。AWSCDKのテストコードを見てみるワークフロー定義を生成おわりにAWSCDKのテストコードを見てみるAWSCDKはこちらのレポジトリで管理されています。github.comStepFunctionsの定義を行う@aws-cdk/aws-stepfunctionsパッケージのディレクトリを見てみると、ワークフロー定義の生成に関するテストがありました。やったね。aws-cdk/states-lan

この記事はLOCALStudentsAdventCalendar2021の1日目の記事です。adventar.orgはじめにGolangのnet/rpcパッケージを使って、Unixdomainsocket上でRPCを行うサンプルを書いてみたので、これについて説明します。デーモンとして動くプロセスをclientとなるCLIツールから操作したい場合に便利そうですね。実装したRPCサーバ・クライアントは以下のように動作します。$./go-daemon-sampledaemon&#RPCサーバをバックグラウンドで起動[1]32660$./go-daemon-sampleclientadd35#Add(3,5)を呼び出しAdd(3,5)=8$./go-daemon-sampleclientsub72#Sub(7,2)を呼び出しSub(7,2)=5$kill32660#RPCサーバのプロセスを

GolangでJSONPathを使う必要がありライブラリを探していたところ、spyzhov/ajsonが便利でした。spyzhov/ajsonを使ってJSONPathを使ったりJSONを組み立てたりする方法についてまとめます。github.comJSONPathを使うfuncUnmarshaltypeNodefuncJSONPathfunc(*Node)JSONPath(おまけ)JSONを組み立てるJSONPathを使うJSONPathとは、JSONの一部分を取り出したり、値同士の演算を行ったりするためのDDLです。JSONPathは、kubectlでのオプションの指定、AWSStepFunctionsでの入出力のフィルタリングなどに使われいます。JSONPathSupport|KubernetesInputandOutputProcessinginStepFunctions-AWSSte

自分用スニペットです。表題の「Dockerの公開ポート設定」とは以下のようなものです。-p8080:80-p192.168.1.100:8080:80-p8080:80/udpContainernetworking|DockerDocumentationこのように、-p1:2として「1-->2」という対応、また-p"1:2,3,4"として「1-->2」「3-->4」という対応を解釈するようなものを実装しました。実装と解説実装解説Dockerではどう実装しているか-pで受け取った値のゆくえmap[nat.Port][]nat.PortBinding型nat.Portとnat.PortBindingの生成おわりに実装と解説実装main.gopackagemainimport("flag""fmt""strconv""stri

DockerにはRootlessmodeというものがあり、デーモンとクライアントをユーザー権限で動作させることができます。これをインストールする際にユーザー権限systemctlの辺りで嵌ってしまったのでメモを残しておきます。環境上手くいくインストール方法sudoできるユーザーでuidmapをインストールrootでユーザーを作って、ログインするユーザー権限でsystemctlを動かせるようにするRootlessDockerをインストールするデーモンの起動・自動起動の設定Dockerが動作することを確認する失敗した方法環境$lsb_release-aNoLSBmodulesareavailable.DistributorID:UbuntuDescription:Ubuntu20.04.2LTSRelease:20.04Codename:focal$uname-aLinuxl15.4.0-10

小ネタです。Goのflagパッケージを使えば、コマンドライン引数の解析を簡単にできます。プログラムに与えられた言わば本当のコマンドライン引数(つまりos.Args)ではなく、ただのstringをコマンドライン引数として解析する方法について書きます。結論flagパッケージを読んでみる結論表題の課題は、次のようなコードで実現できます。main.gopackagemainimport("flag""fmt")funcmain(){f:=flag.NewFlagSet("command",flag.ExitOnError)str:=f.String("str","defaultvalue","")f.Parse([]string{"-str=aaaa"})fm

「個人サイト」ってなんか良い響きですよね。これまでは「ポートフォリオサイト」として作っていたんですが、就活が終わったのを機に作り直してみました。はじめに全体構成/profile：プロフィールページ/logs：活動履歴ページ/works：制作物ページ/slides：スライド一覧ページGASからスライドの情報を取得するlscacheでAPIで取得したデータをキャッシュする/slides/:id：スライド閲覧ページNotFoundおわりにはじめにサイト自体はVue.js+Vuetify+VueRouterのSPA。サイト自体は静的サイトで、後述のスライド一覧ページのためにGoogleAppsScritpで建てたAPIを叩いています。ホスティングはさくらのVPSで、WebサーバーはCaddyです。GitHubPagesで十分ではあるんだけども、自分でやった方が楽しい。作ったサイトはこちら。w-ha

学内の情報系の学生で集まってLTをする会というのを続けて4年目に突入しました。もともとこの会は諸先輩方が続けていたもので、僕と同級生達が運営の中心に立ってから2年ほどになります。運営にあたって、各参加者が自分自身のために発表できることを特に意識しています。これはそれぞれがLT駆動開発を円滑に行うためのものです。LT駆動開発「LT駆動開発」という言葉があります(ネットミームっていうんですかね)。テスト駆動開発とかドメイン駆動開発とかのもじりですね。これは、まずLT発表の予定を入れてしまって、発表日までに何とか進捗を出すという手法です。この手法はなかなか有効だと感じています。現に僕は大学入学後の3年間、この手法で進捗を出してきました。ただ発表という体を成すが故に、以下のような不安が付きまといがちです。こんなテーマ、みんなは興味ないかな……もっとポップなテーマに変えようか？見栄えが良くなるように

はじめにChromeからSSH接続ができる、SecureShellという拡張機能をよく使っています。このSecureShellはGoogleが開発しているもので、内部でhtermというターミナルエミュレータが使われています。このhtermはiTerm2におけるOSC1337コマンドを一部実装しており、これを使うことで画像のインライン表示・ファイルのダウンロードが可能です。このエントリではGoでこれらの挙動を検証します。作成したデモは下記のレポジトリにあります。github.comはじめにOSC1337画像のインライン表示ファイル転送(ダウンロード)仕様アプリケーション例Goでの実装インライン表示・大きさ指定インライン表示・Alignインライン表示・アスペクト比ダウンロードおわりにOSC1337Mac向けのターミナルエミュレータであるiTerm2は、独自のエスケープシーケンスを定義しています

はじめに来春から就職することになりまして。就職先が決まるまでの過程を振り返ってみようと思います。就活テクニックみたいなものではありません。はじめにB34~5月修士進学しないことにしたB36月はじめての就活進路指導面談イベントB38月インターンB39月~2月本選考A社B社C社D社どちらの内定を受諾するか再度・自己理解再度・就活の基準比較検討決断就活を振り返って最後にB34~5月修士進学しないことにしたB1の頃はサークルでロボットを作ったりCをガリガリ書いたりしていて、B2の頃はSecHackに参加していろいろとコテンパンにされたりしていたわけですが。B3になったばかりの春、とある企業からインターンのお誘いをいただきました。ここで、そういえばそろそろ就活の時期だよなと気づくわけです。結局このインターンは日程が合わず参加できませんでしたが、学部卒で就職するならば就活を始めなければという意識が芽生

こちらは地方IT勉強会AdventCalendar202013日目の記事です！adventar.orgはじめにLOCAL学生部のはいばらです。LOCAL学生部は、北海道の技術系学生のコミュニティです。詳しくは以下の投稿を御覧ください。haibara-works.hatenablog.comまた、LOCAL学生部は一般社団法人LOCAL内のコミュニティです。一社LOCALについては以下を御覧ください。kumikumitm.hatenablog.comこの投稿では、このような地方の学生コミュニティが2020年をどのように過ごしていたのかを振り返ります。はじめに北海道でコミュニティをやるということそして、2020年1月JANOG45SecHack365沖縄回2月SAMIT20.023月ゆるい勉強会@WebSAMITOnline!20.03IWATEのITカンファレンスonline14月SAMIT

こちらはDockerAdventCalendar20205日目の記事です！qiita.com(2020/12/16：Dockerfileを用いたビルドについて追記しました。)はじめにDockerはDockerEngineAPI(旧DockerRemoteAPI)という仕組みをもっており、UnixDomainSocketの通信によってイメージやコンテナに対する操作ができます。さらに、DockerEngineAPIをGo言語から扱いやすくするために、DockerEngineSDKというものも提供されています。これはDockerEngineAPIの呼び出しをラップしてくれる言語パッケージで、これを使うことで比較的簡単にGo言語からDockerを操ることができます。我々が普段叩いてるdockerrun...というようなコマンドも、このDockerEngineSDKを使って実装されています(http

こちらはLOCALstudentsAdventCalendar20202日目の記事です！adventar.orgはじめにLOCAL学生部のはいばらです。先日、最近ではGIGAスクール構想の話題でも耳にするChromebookを買ってみました。SSHやRDPを設定してみた様子を現場からお伝えします。はじめにChromebookの使い所ChromebookからSSH接続するパスワード認証の場合公開鍵認証の場合ChromebookからRDP接続するおわりにChromebookの使い所もともとLenovo製のWindows機を使っていたのですが、ブラウザだけでも軽快に使えるようなPCが欲しくなり、Chromebookの購入に至りました。ブラウザだけといっても、Githubでコードリーディングしたり、はてなブログやGoogleDocumentで物書きしたり、案外便利なものです。SaaSは偉大ですね。

こちらはLOCALstudentsAdventCalendar20201日目の記事です！adventar.orgはじめにLOCAL学生部のはいばらです。この記事では、私が所属しているLOCAL学生部についてご紹介します。はじめにLOCAL学生部ってなに？LOCAL学生部って何をしてるの？OpenSourceConference2020Online/HokkaidoLOCAL学生部総大会LOCAL学生部と一般社団法人LOCALの関係は？どうすれば入部できるの？おわりにLOCAL学生部ってなに？LOCAL学生部は、北海道の技術系学生コミュニティです。北海道は、関東や関西と比べて技術系、特にIT系の人口が多くはありません。この北海道という土地で技術系の学生が繋がりをつくることを目的に、LOCAL学生部では主に以下の活動を行っています。学生による勉強会の開催学校を横断した勉強会開催支援や協力学校を

『CTF形式で学ぶCプログラムの脆弱性』の事前課題です。www.security-camp.or.jp※事前課題に取り組む前に、以下の記事に従って環境構築を行ってください。haibara-works.hatenablog.com【事前課題1】VMにSSHで接続してみようVMのIPアドレスの確認VMへのSSH接続【事前課題2】VM上でプログラミングしてみようひな形ファイルの確認main.cの編集makefileによるコンパイル【事前課題3】Pwntoolsを使ってみようひな形ファイルの確認補足：Pythonのbytesとstringプログラムとのやり取りを自動化する【事前課題4】gdb-pedaでプログラムを解析してみようr：プログラムの実行checksec：セキュリティ機能の確認disas：ディスアセンブルp：関数のアドレスなどを確認pattc・patto：バッファのオフセットを調査【事前

はじめにポートフォリオサイトを作っていて、今までに作成したGoogleSlidesの一覧ページをつくりたくなりました。いわゆる「スライド共有サービス」というものもいくつかありますが、それらはスライドを画像やPDFに変換してからアップロードする必要があります。そのため、アニメーションや動画の埋め込みなどの表現は失われてしまいます。また、公開後にスライドを修正する場合には、修正の度に画像化とアップロードが必要になります。それに対してGoogleSlidesは、GoogleDocsなどと同じように「ウェブに公開」することができます。「ウェブに公開」することで、以下のような共有URLが発行されます。docs.google.com「ウェブに公開」機能を使ってスライドの共有をすれば、スライドの表現も失われず、修正もそのまま反映されます。今回は、このGoogleSlidesの共有URLをサムネイル付きで

セキュリティ・ミニキャンプin北海道2020で『CTF形式で学ぶCプログラムの脆弱性』という講義を担当することになりました、はいばらと申します。これは講義中の演習に必要な環境構築について説明したものです。せっかくなので、ミニキャンプ外にも公開することにいたしました。今後、受講者が講義までに取り組む事前課題や、当日の講義資料も公開する予定ですので、よければそちらもご一緒にお読みください。www.security-camp.or.jpこの講義は「C言語やLinuxには慣れていないけど、低レイヤーなセキュリティに興味がある！」という人を対象にしたものです。講義で扱う内容は、大きく分けて以下の3つです。Cプログラムの代表的な脆弱性脆弱性を攻撃するエクスプロイトコード攻撃から防御するための、OSやコンパイラのセキュリティ機構攻撃側の視点でプログラムを観察することで、セキュアコーディングを心掛けるきっ

この度、5日間・フルリモートという形式で開催された、はてなサマーインターンに参加してきました！hatenacorp.jp概要課題基本課題発展課題応募・面談インターン中1日目2日目3日目4日目5日目おわりに概要マイクロサービスアーキテクチャに則って作られたブログサービスに機能を追加していくという、課題形式のインターンです。テンプレートとなるレポジトリは公開されており、下記のリンクから確認できます。github.comインターン生はそれぞれのGitHubアカウントで、このテンプレートからレポジトリを作成し、開発を進めていきます。ブランチを切って開発・テストを進め、区切りの良いところでプルリクエストを作成して、はてな社員の方からレビューを受ける、ということを繰り返しました。課題基本課題2つと発展課題が用意されていました。基本課題記法の実装マイクロサービスの中の1サービスであるrenderer-g

はじめにはてなブログは、記事の中にscriptタグを埋め込めばJavaScriptを使えるようです。さらにCDNを使えば、ライブラリやフレームワークも使うことができます。そこで今回は、はてなブログの記事中でVue.jsとVuetifyを使ってみました。何の役に立つかはわかりません！はじめに全体の構成Vuetifyのコンポーネントを使うv-cardv-snackbarv-btn終わりに全体の構成記事の構成を以下のようにすると、Vue.jsとVuetifyを使うことができます。ブログの記法は「はてな記法」に設定しています。※読みやすさのために改行やコメントを入れています。<divid="app"><v-app><<ブログ本文>></v-app></div><!--Vuetify用CSS-->

はじめにポートフォリオサイトを、GithubActionsでビルド・GithubPagesで公開というように運用しているんですが、他のリポジトリにあるプロジェクトもGithubPagesで公開したくなることがありました。GithubPagesのリポジトリで、公開したいプロジェクトのリポジトリをGitSubmoduleとして参照することで、これは実現できます。しかしこのままでは、GithubPagesのリポジトリでSubmoduleを更新しないと、参照先のリポジトリへの変更が適用されません。これは面倒なので、参照先リポジトリが変更されたタイミングで、自動でSubmoduleを更新してビルドをするようなものを作りました。はじめにWebhookでWorkflowをトリガーするWorkflowからAPI呼び出しSubmoduleの更新完成形を試すおわりにWebhookでWorkflowをトリガーす

はじめにVueCLI+VueRouter+Vuetifyで構築したSPAでWebAssembly(以下Wasm)を使おうとして，少し詰まったのでメモしておきます．はじめにHelloWasm謎のコンパイルエラー解決おわりにHelloWasmWasm事始めということで，こちらの記事にある，Wasmのサンプルを動かそうとしました．qiita.com下記のリポジトリでHTMLコードとWasmバイナリが公開されています．github.comこのリポジトリからindex.htmlとsample.wasmをダウンロードして，プロジェクト内のpublic/配下にこれらのファイルを置きます(下図)．(簡単のため，下記レポジトリ内のindex.hrmlはcount.html，sample.wasmはcount.wasmとリネームしました．)public/├count.html└count.wasmその後yar

はじめにこの春，僕も無事に学部3年生になれたようです．ふと入学当初のことを思い返すと「わーなにも知らなかったなぁ」という気持ちになるのですが，一方でこの2年で結構たくさんことを学べたのかなぁとも思います．なにせ情報系の分野は「学校では教えてくれないけども常識」みたいなものが多い気がしていて，そういったものをどこで学んできたかというログを一旦残しておこうと，この記事を書いています．はじめにB1春(C言語をちゃんと書く)B1夏(ネットワークの基礎，はじめてのLinux)システム改修オブジェクト指向ネットワークUbuntuインストールB1秋(セキュリティ・ミニキャンプ)B1冬(ソケットプログラミング)B2春(SecHack365参加，FPGA)B2夏(論文を読む．論文を読む．)B2秋(Linuxシステムコール，AES暗号)LinuxシステムコールAES暗号B2冬(SWIG，FPGASubsyst

はじめにこんにちは．最近カネコアヤノにハマっているはいばらです．いいぞ．https://www.youtube.com/watch?v=_6rB7U-_yPgところでGithubレポジトリごとcloneするのではなく，レポジトリ上のあるファイルだけをローカルで取得したい，という状況になったので，Python+GithubAPIで書いてみました．また，使用するAPIによって取得できるファイルのサイズの上限が1MBだったり100MBだったりもするので，その辺りについても解説します．はじめに環境GithubAPIとはPythonでGithubAPIを叩く(PyGithubの利用)RepositoryContentsAPIでファイルを取得する(1MBまで)GitDataAPIでファイルを取得する(100MBまで)おわりに環境$uname-aLinuxLAPTOP-9NDJSK064.4.0-177

ubuntuでraspiにArchを入れようと思ったらちょっと苦労したはなしです．環境Ubuntu18.04LTSRaspberryPi3MODELBArchLinuxのインストールbsdtarのアップグレードArchLinuxARMのインストールraspiの起動SSH接続ArchLinuxのインストール公式ドキュメント(カテゴリ:ARMアーキテクチャ-ArchWiki)に沿って進めているとbsdtar-xpfArchLinuxARM-rpi-2-latest.tar.gz-Crootとしたところでbsdtar:Errorexitdelayedfrompreviouserrors.というエラーが出てしまう．調べてみると，どうやら"Curr

この記事はMuroranInstituteofTechnologyAdventCalendar2018の9日目です。adventar.orgはじめにESP-WROOM-02(以下esp)をarduinoIDEで開発し，書き込みと実行をするまでに必要な手順について書く．espは開発ボードではなく，スイッチサイエンスや秋月電子で販売されている”ESP-WROOM-02ピッチ変換済みモジュール”の《T型》や《フル版》，《シンプル版》を使う．特に断りの無い限り，プルアップはへ繋ぐものとし，プルアップ・プルダウン抵抗はとする．詳しいことはデータシートを見ましょうhttp://akizukidenshi.com/download/ds/espressifsystems/0B-ESP8266__Hardware_User_Guide__EN_v1.1.pdfはじめにespへのプログラムの書き込みとその実