はじめにRustと言語処理系の勉強のため、簡易的なマークダウンパーサーをスクラッチで実装し、生成したWASMをNuxt3+Viteの環境で動かしてみました。https://github.com/yud0uhu/markdown-editor-web 言語処理系の概要マークダウンパーサを実装する前に、一般的な言語処理系について考えてみます。コンパイラやインタプリタに代表される処理系の構成は以下のようになっています。字句解析テキストを字句の列(トークン)に分解すること字句解析を行うプログラムを 字句解析器(lexerまたはtokenizer) と呼びます。...

Rustでマークダウンパーサーを自作して、WASM+Nuxt3+Viteで動かしてみた

はじめに簡単なタスク管理機能と、タイマレジスタによる割り込み管理機能を持つ簡易なリアルタイムOSをRustで自作しました。Aruduino Unoボードに搭載されるATmega328Pマイコン上で動かすことを想定していますが、https://github.com/Rahix/avr-hal でサポートされているAVRマイコンであれば、ほぼ同様の実装ができそうです。本記事では環境構築については割愛し、実装の詳細について解説を行いたいと思います。 リアルタイムOSの設計今回作成したリアルタイムOSは、技術書店13でサークル出展した書籍、cistLT Bookで作成したOS(h...

Rustで作るリアルタイムOS

はじめに前回の記事で作成したリアルタイムチャットにユーザー認証機能を導入してみます。OGPの設定についてはこちらhttps://zenn.dev/denham/articles/b2378462d54823 つくったものhttps://firebase-realtime-chat-two.vercel.app/ 初期設定 Firebase Authenticationの初期設定Firebaseコンソール上からプロジェクトのページにアクセスし、サイドバーの構築>Authenticationからで行います。 プロジェクトの初期設定前回記事の状態から行いま...

Next.js+Firebase Authenticationでさくっとログイン機能を導入する

前回の記事で作成したリアルタイムチャットにOGPを設定してみます。https://firebase-realtime-chat-two.vercel.app/ OGP (Open Graph Protocol)についてOGPとは、Open Graph Protocol(オープン・グラフ・プロトコル)の略称です。HTMLソースにOGPを設定することで、SEO対策のほか、SNSなどでシェアした際にWebページの情報(タイトル、概要、画像、URL)を見やすい形で表示することができます。ユーザの目に留まりやすくなるので、クリック率が上昇し、アクセス数の向上などが期待できます。ところ...

VercelのOG Image Generation(vercel/og)を利用してOGP画像を作成する

この記事は合同会社DMM 23卒内定者 Advent Calendar 2022の14日目の記事です はじめにこんにちは！DMM23卒内定者の0yuといいます。気がつけば師走も終わりかけ、アドカレとしては大遅刻ですが、せっかくなので何か書ければと思い、登録していた枠に差し込み投稿させていただきました。https://qiita.com/advent-calendar/2022/dmm2023今回はちょっとした小ネタとして、Firebase Realtime Databaseの練習のため簡単なリアルタイムチャットアプリを作成してみました。https://firebase.g...

Next.js+Fireastoreでリアルタイムチャットを作る

はじめに本記事はCIST (公立千歳科学技術大学) Advent Calendar 2022への寄稿です。https://qiita.com/advent-calendar/2022/cist2023/1/2 改訂RustでミニマムなリアルタイムOSを作る試みとして、以前少しだけAVRマイコン(ATmega328p)に手を出した のですが、AVR関係のリファレンスの少なさと、Nightly Rustのfeature has been removedに泣きをみて、改めてリファレンスの豊富なArmマイコン向けの環境を整備しました。crates.io などをみていると、Rustの...

ARMマイコンCortex-MでRTICに入門する

はじめに10月27日(木)〜10月28日(金)の2日間に開催されたサイバーセキュリティの国際会議「CODE BLUE」に学生スタッフとして参加しました。codeblue.jp学生スタッフは全30名で、1〜4名1組で以下のような業務に割り当てられました。会場誘導、サーモカメラモニタリング、受付、同通レシーバー回収、スピーカーアテンド、カンペ出し&EventHub内Q&Aチェック、記念品引換所など詳しい業務内容については、学生スタッフの方がこちらの記事でわかりやすくまとめてくださっています。yoshistl.hatenablog.com自分は10th記念品引換所を担当しました。バイスをいただきました。記念品の桝をお渡しした時にいい反応をしてくださる方が多かったのが印象深いです。Day0アーニャがいた pic.twitter.com/vzrrdEsZuy— 0yu (@yud0uhu) 2022年10月26日  初日は朝6時過ぎに家を出て、最寄りの空港から成田空港へフライト後、会場の渋谷パルコDGビルに向かいました。Day1今日のハイライト#codeblue_jp pic.twitter.com/wbty5DZHUZ— 0yu (@yud0uhu) 2022年10月27日  10th記念品引換所はコンテストエリア内に併設されており、三つの常設CTFが開催されていました。GMOイエラエさんのブースで行われていたCTFでは、全問正解者の方には書籍のプレゼントをされていました。PwCさんのコネクテッドカーハッキングのCTF が気になって仕方なかったのですが、帰宅後に卒論の担当教員の先生からCANの通信プロトコルの安全性について話を聞く機会がありました。www.pwc.compwcさんのブースのCTF、めちゃくちゃ楽しそうだなぁと思って眺めてる#codeblue_jp pic.twitter.com/gEkDCMSzwn— 0yu (@yud0uhu) 2022年10月28日  Day2Day1同様、スタッフ用のお昼ご飯をいただきました。今日は肉です#codeblue_jp pic.twitter.com/H6to8n3E28— 0yu (@yud0uhu) 2022年10月28日  Day2は初日より引換所の人の入りが減った*1こともあり、もう一人の引換所担当の方と交代で、講演を聴きに行ったり、企業ブースを見て回ったりしました。GitGuardianのTシャツ普段使いしたい pic.twitter.com/pNKeM90eI2— 0yu (@yud0uhu) 2022年10月29日  アーカイブで視聴しましたが、GitGuardianのセッションも非常に面白い内容でした。dev.classmethod.jp(自分含め、GitHubにAPI Keyをpushしてしまった経験のある方には馴染み深いお話かと思います).閉会式の後、会場でNetworking Partyが行われました。閉会式の様子スピーカーやスポンサー、スタッフの方々が全員参加しており、名刺交換や歓談の場となっていました。その後20歳以上の希望者は、PwCさん主催のAfter Partyに参加することができました。アフターパーティー自分はホテルに帰宅後、同室の方とラーメンを食べに行きました。深夜ラーメン気さくで素敵な方で、宿泊中は大学の話をしたり、ネットワークやセキュリティについて興味深いお話を伺えたりしました。感想CBお疲れ様でした！学生スタッフ初参加でしたが、色んな方と交流できて3日間楽しかったですまた来年も何かの形で参加したい…！#codeblue_jp pic.twitter.com/EdBkATidLn— 0yu (@yud0uhu) 2022年10月29日  このように大規模なイベントのスタッフを経験するのは初めてでしたが、楽しく充実した3日間を過ごすことができました。また、名刺交換は初めましての方に話しかける良いきっかけになります。学生スタッフの選考についてCODE BLUEを知ったきっかけ・興味を持ったきっかけや、過去に参加したミニキャンプ・SC4Yなどの話を書いたように思います。他の学生スタッフの方が体験記や非公式チュートリアルをまとめてくださっているので、より詳しく知りたい方はこちらもぜひ。github.comcb-t.penguincabinet.com講演のアーカイブは12月31日まで以下のリンク(EventHub)から視聴できます。client.eventhub.jp*1:記念品チケットの引き換えは一人一回のため

CODE BLUE2022 学生スタッフに参加して

HTMLメールについて調査したこと業務でHTMLメールを作成する機会があり、想像以上に苦戦したため、忘備録としてまとめておきます。 標準的なHTMLメールの仕様テーブルコーディングで作成するCSSはインラインで記述する画像の拡張子はgifかjpgを使用する(png、svgは使用不可能)配信テストの際には、base64 形式で埋め込むなどの方法もあります。iOSのGmailアプリなどで画像が表示されなくなるため、本番の際にはサーバーにアップロードしておく必要があります。HTML4.01 を使用する文字の自動調整を防ぐためbodyにsize-adjust (1...

HTMLメール作成の忘備録

RTOSを手を動かしながら理解する（スケジューリング編）以下の本の内容を整理するため、自分なりに手を動かしたものを副読的にまとめていきます。実装は Aruduino Uno/C で行っています。Real-time Operating Systems Book 1: The Theory   Dr. Jim Coolinghttps://www.amazon.co.jp/dp/1795340657/ref=cm_sw_r_tw_dp_2ZKTRZAAPVV3MH36F5P1制御系の組み込みシステムで採用されるリアルタイムOSでは、システムに課せられる時間制約（deadline...

RTOSを手を動かしながら理解する（スケジューリング編）

目的Cloud Functions with Puppeteer+GAS(clasp)でお手軽スクレイピングサーバーが作りたくなったhttps://github.com/puppeteer/puppeteer※claspGoogle製のCLIツール 環境node v14.17.6clasp v2.4.1wsl(Windows10/Ubuntu20.04LTS) 下準備 puppeteer-coreをインストールする 補足Puppeteerとは、ChromeブラウザやChromiumを制御しWebスクレイピングなどを行うNodeライブラリです。Chro...

Puppeteerでスクレイピングする

はじめにご縁があり、来春から合同会社DMM.comに新卒で入社させていただくことになりました。色んな気持ちの整理をする上で、何か後に残せるものがあればと思い、少しだけ自分の就活の振り返りをしてみます。4月～11月就活をふんわりと意識し始めたのは昨年の春先、当時インターン先でお世話になった方から就職活動のお話を聞いたことがきっかけです。当時はベンチャーとメガベンチャーの違いすらふんわりとしかわかっておらず、エンジニア業界を知るためにサポーターズさんのエンジニアEXPOなどに参加して、「世の中には色々な企業があるんだなぁ」と思うようになりました。もともと「好きなこと=技術で食べていきたい」という気持ちがあったので、業種はエンジニア一本で、業界はtoCのWeb系を中心に見ていました。事業領域へのこだわりはなく、ユーザーのフィードバックがダイレクトに得られやすいサービスのものづくりに関わる・一からそのようなサービス（事業）を立ち上げるという経験がしてみたかったので、なるべく事業領域は広く見て、裁量権（若手の能動的な提案が通りやすいか）・成長環境（仕事へのモチベーションの高い人やプライベートなどでも対外的な技術発信をしている人が多いと嬉しい）という部分も強く意識していました。秋は短期インターンに参加し、懇親会で同じ23卒の方から就活のエピソードを聞いたり、大学の先輩に就職相談に乗っていただいたり、逆求人イベントに参加してみたり、慣れないなりに「就職活動」に向き合っていたのがこの時期でした。12月～3月年明け後は再スタートを切って、徹底的に自分と向き合う時間を作りました。言語化し尽せていなかったものを言語化する（人に話したり、文字で書き留めてみる）ことををしていました。細々と続けていた就活も、なんとなく「そろそろなのかな」と思い出したのが年明けの2月頃でした。今の会社さんに内定承諾を決めたのは、面接中に感じた「会話の居心地の良さ」が大きいです。内定承諾までの期間、就職活動を続けるべきか悩みました。就活を終える決意を固め、それまでずっと志望度が高く、年明け前から第一志望で目指し続けてきて、採用人事の方や社員の方に沢山お世話になったA社の選考を辞退するのは、特に胃とメンタルに来るものがありました。所感などGitHubやブログ、ポートフォリオサイトなどは体感見てくれている企業さんが多かったです。エンジニアの方と自分の作ったプロダクトや互いの好きな技術の話をする時間は楽しかったですし、面接の中でも学びが多かったので、結果的にこういった技術発信は（エンジニア就活においては）大切だと感じます。面接中では自分の感情や考えを言語化して説明する（暗黙知を限界まで削ぎ落す）能力が求められますが、ハッカソンでのチーム開発の経験や、実際に制作したプロダクトでの苦労話は素直な気持ちで伝えやすかったように思えました。おわりに就職活動で得た気づきは、たとえ回り道になっても、「周りの人に相談してみる」というのがめちゃくちゃ大切だな、ということです。就活中はひたすら自分と対峙し続けることになるので、自己肯定感を保ち続けることが難しかったり、漠然とした不安から視野が狭くなりがちでした。バイスをしてくれる人たちの存在は本当に大きいです。その上で何が自分の人生にとって最良の選択なのかを考え、最後に決断を下すのは自分ですが、抱え込まずに立ち止まっていろんな人に相談してみるのは大切なことだなぁと思いました。振り返ると、ここに至るまでお世話になった方々への御恩は本当にはかりしれません。つらつらと書いてしまいましたが、最後まで読んでいただきありがとうございました。

就活を振り返る

はじめにこんにちは！この記事はコープさっぽろ オープン社内報 Advent Calendar 2021の19日目の記事です。adventar.org昨年の12月から、ご縁がありコープさっぽろさんのエンジニアリングチームでインターンシップをさせていただいております。アドベントカレンダーに寄稿する機会をいただいたため、一年間のインターンの中で僕が学んだことを振り返っていきたいと思います。一年間で学んだことGit/GitHub技術的なところだと実はかなり大きいです。  git一つをとっても、rebaseやstashの使い方に始まり、覚えたコマンドの数ははかりしれません...。現場の強いエンジニアの方にアドバイスをいただいたり、コードレビューをしていただけるような環境は、本当に学びしかありません。現場の技術Vue.jsやAWSなど多くのモダンな技術の開発現場に関わらせていただく機会があり、学生のうちに現場の技術をキャッチアップできる経験をさせていただけるのは本当にありがたいです。ドキュメントを残すことの大切さこれは普段、ドキュメントベースでお仕事をさせていただくことで、とても大切にするようになりました。GitHubなどにおける文字ベースのやり取りが主体になります。しかし一方で、コンテキストをドキュメントに残すことは齟齬を生じにくくさせてくれます。自分が考えていることや、相手の考えを咀嚼したことを言語化し、何らかのドキュメントという形に残すことは、僕自身ここ一年の日常のあれこれやチーム開発の中で意識して取り入れていることでもあります。人とかかわることコープさっぽろで多くのエンジニアの方々と関わらせていただいていて、高い技術力はさることながら、物腰の柔らかい優しい方が多いと感じています。心理的安全性"であったり、"HRTの法則"のような考え方がありますが、Slackでのやり取りはPRレビュー一つをとっても、皆さんからこうした人間力の高さをとてもよく感じます。またこのようなエンジニアの方と会話をしたり、その考え方を聞いたりする中で、僕自身の技術や人との向き合い方にも変化があったと感じています。普段の業務の相談はもちろん、個人的な研究室配属の相談にも乗っていただいたり、皆さん本当にお優しいです。いつもありがとうございます。最後に一年間のインターンシップを通じて、関わっていただいた皆さんから多くのものをいただいているけれど、逆に自分が皆さんに還元できることはなんだろうかと、常々考えています。僕自身まだまだ未熟ですが、いただいた学びを還元していけるように頑張っていきたいです...！！

コープさっぽろのインターンシップで学んだこと

はじめにこんにちは！0yu（@denham95173179）です。adventar.org先日、 SC4Y ('21#4) IT・情報系 北海道まったりLT大会に登壇させていただき、最近細々とElectronで作っているマークダウンエディタについてお話してきました。sc4y.connpass.com    Electronで作るおれおれマークダウンエディタ2  from yuosaka GitHubはこちらgithub.com今回の実装でやりたかったことは以下のようなことでした。レンダラープロセスからのファイル操作を実装するElectronでファイル操作を扱うdialogモジュールをレンダラプロセス側からIPC通信で呼び出すNode.jsによるファイルの読み書きをレンダラープロセス側で行なうElectron13まではremoteモジュールを採用したプロセス間通信が可能でしたが、remoteモジュール*1に依存しないセキュアなIPC通信を実装したいというのが本記事の趣旨です。何が問題なのかremoteモジュールの削除は、破壊的変更としてElectron14から完全に削除されてしまいました。www.electronjs.orgremoteモジュールに依存せず、レンダラープロセス側でCommonJSを記述できるようにするためには、nodeIntegrationをtrueにする必要があります。非推奨とされてします。// background.tsconst mainWindow = new BrowserWindow({  webPreferences: {    nodeIntegration: true,    nodeIntegrationInWorker: true  }})  mainWindow.loadURL('https://example.com')Electronでは、 セキュリティ推奨事項​のチェックリストが公式ドキュメントに記載されており、チェックリスト中の2) Do not enable Node.js Integration for Remote Contentにこれが当たります。This recommendation is the default behavior in Electron since 5.0.0.It is paramount that you do not enable Node.js integration in any renderer (BrowserWindow, BrowserView, or ) that loads remote content. The goal is to limit the powers you grant to remote content, thus making it dramatically more difficult for an attacker to harm your users should they gain the ability to execute JavaScript on your website.After this, you can grant additional permissions for specific hosts. For example, if you are opening a BrowserWindow pointed at > https://example.com/, you can give that website exactly the abilities it needs, but no more.これはなぜかというと、ブラウザ側（レンダラープロセス）でNode.jsのAPIを扱うメインプロセス側の処理を行なえるということは、例えばXSS攻撃を受けたとき、ユーザーのローカルファイルに無制限にアクセスされてしまうリスクがあるためです。zenn.devこのようなリスクを未然に防ぐために、安全なプロセス間通信を行うことが推奨されています。nodeIntegrationを無効にしたIPC通信を行う必要が生じます。じゃあどうすればいいの？ここで行なうべきことは大きく以下のようになります。background.tsでnodeIntegrationを無効にする（レンダラープロセス側からのNode.jsモジュールの操作を無効にする）background.tsでcontextBridgeを有効にする（コンテキストの分離*2）※ Electron16 + Vue3 + TypeScriptを想定background.tsのnodeIntegrationを無効にします。// background.tsconst mainWindow = new BrowserWindow({  webPreferences: {       + nodeIntegration: false,       + preload: path.join(__dirname, 'preload.js')  }})mainWindow.loadURL('https://example.com')またここで、ビルド段階でpreloadのパスを読ませるため、vue.config.jsに下記のように記述します。// vue.config.jsmodule.exports = {  pluginOptions: {    electronBuilder: {       + preload: 'src/preload.js',    }  }}srcディレクトリ直下にpreload.tsを作成し、以下のように記述します。  windowオブジェクトをレンダラーと共有できるようになります。// preload.tsconst { contextBridge } = require('electron')  contextBridge.exposeInMainWorld('electronAPI', {  loadPreferences: () => ipcRenderer.invoke('load-prefs')})// Main.vuewindow.electronAPI.loadPreferences()// ここでwindow.electronAPI.hogehoge()などする次にrenderer.d.tsを作成し、以下のように記述することで、Windowインターフェースの拡張を行うことができます。export interface IElectronAPI {  loadPreferences: () => Promise<void>,}declare global {  interface Window {    electronAPI: IElectronAPI  }}以上のようにすることで、レンダラープロセス側でスクリプトを書く際に、グローバルなwindowオブジェクトにアクセスできるようになります。フォルダ構造は下記のようになっています。├── dist_electron/│ ├── bundled/..  # where webpack outputs compiled files│ ├── [target platform]-unpacked/..  # unpacked Electron app (main app and supporting files)│ ├── [application name] setup [version].[target binary (exe|dmg|rpm...)]  # installer for Electron app│ ├── index.js  # compiled background file used for electron:serve│ └── ...├── public/  # Files placed here will be available through __static or process.env.BASE_URL├── src/│ ├── background.[js|ts]  # electron entry file (for Electron's main process)│ ├── [main|index].[js|ts]  # your app's entry file (for Electron's render process)│ └── ...├── package.json  # your app's package.json file├── ...おわりにファイル操作の実装の詳細や、contextBridgeの中身について深堀った記事を（余力があれば）かきたいです。参考文献www.electronjs.orggithub.comzenn.dev*1:レンダラプロセスからメインプロセスが持つ機能を扱うためのモジュール.12.0で非推奨となり、14.0で完全に削除された*2:コンテキストの分離はElectron12からデフォルト値で有効となっており、現行で推奨されているセキュリティ設定です

ElectronでセキュアなIPC通信を実装する

こんにちは！adventar.org今年はハッカソン/インターンなどでのオンライン懇親会に参加させていただく機会が多く、ノンピさんのご飯にとてもお世話になりました。nonpi-foodbox.com一人暮らしの地方学生にとって、このようなご飯ほどありがたいものはないです。というわけで今回は、各ハッカソン/インターンでお世話になった方々とノンピさんのご飯への感謝の気持ちをこめて、飯レポをしながら振り返りをしたいと思います。DeNAオータムハッカソンこれが僕とノンピさんとの最初の出会いでした。(なんかいい感じのBGM)ハッカソンとしては、いくつかお題が課され、その中から課題解決に取り組みたいテーマを選定してプロダクトを開発するというものでした。トラックログ)で囲まれた領域にいるユーザーの数だけポイントをゲットして競う地図ゲームを考案しました。github.com技術的にはクライアントサイドはVue.js(Vuetify)/TypeScript、サーバーサイドはPython(Flask)/SQL Alchemy/MySQLといった構成で、僕はもう一名のチームの方とクライアントサイドを担当しました。Leafletを初めて触りました。ハッカソンでした。nonpi_DeNAこのときのノンピさんのご飯は「スタンダードプラン 洋」でした。ノベルティもいただきました。IT系のイベントはたくさんノベルティがもらえてうれしいですね。そしてハッカソンのノベルティも届いた！ pic.twitter.com/qPmBxt8AS0— 0yu (@denham95173179) September 16, 2021 JPHACKS兼ねてから興味のあったJPHACKSに野良で初参戦しました。github.comフロントエンドの改修に当たらせていただき、ここの1週間はほぼずっとCSSとVuetifyと戦っていました。このときのノンピさんのご飯はメニュー名を特定できませんでした。nonpi-jphacks洋風おつまみという感じの上品なラインナップでした。プリンおいしかった！都道府県の形当てや寿司打のお話で盛り上がりました。東京ガスiネットハッカソンAthleticsさんの逆求人イベントに参加したご縁でお声がけいただき、参加したハッカソンです。github.com実はチームメンバーほぼ全員がFlutter未経験というチャレンジングなプロダクトでした。皆で頑張りました。Android Studioのエミュレータ環境構築は鬼門だなぁと思いました）nonpi-tginetこのときのノンピさんのご飯は「居酒屋プラン（炙りしめ鯖）　ノメルズ ハードレモネード サワー！サワー！サワー！付【期間限定】」でした。大学いもがおいしい。トークが聞けてよい刺激をいただけました。CA 1Day Youth Boot Campwww.cyberagent.co.jp愛読している実践Rustプログラミング入門の著者であるyukiさんのハンズオンでした。grepコマンドを実装してみる、という熱々な内容でした。rustcの丁寧なエラーメッセージがどんな風に実装されているのか、中身を読んでみると面白いですよ、といった余談も印象深かったです。懇親会では、CAのエンジニアの方からスノーフレークが熱いというお話や、個人的に気になっていたフロントエンドの設計思考やデザインパターンのお話（リアクティブシステムとObserverパターンのお話など。勉強になりました。）を伺うことができて楽しかったです。nonpi_CA1このときのノンピさんのご飯は「神田明神下みやび 冬の味覚プラン」でした。最後になりますが改めて、ご縁のあったすべての皆さんに感謝です。

ハッカソン飯と一緒に今年を振り返る

前提Node.jsのパッケージ管理をn packageで行いたい事前に n packageがインストール済みであることn packageの環境構築については下記の記事が詳細にまとめてくださっています。Ubuntuに最新のNode.jsを難なくインストールする - Qiita環境Ubuntu20.04LTS(WSL2)  CLI問題yarn serveを行った際、下記のようなエラーが出るnode: ../src/coroutine.cc:134: void* find_thread_id_key(void*): Assertion `thread_id_key != 0x7777' failed.Abortederror Command failed with exit code 134.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.原因fiberというパッケージがnode16に未対応であるためstackoverflow.com対策nodeのバージョンを16以下にダウングレードする行った手順ダウングレードを前述のn packageを用いて行うものとします。 n [バージョン名] でバージョンの切り替えを行います。$ sudo n 14.17.6   installed : v14.17.6 (with npm 6.14.15)$ node -vで更新が反映されているかを確認します。(v14.17.6となっていればOK)自分の場合はここでバージョンが反映されていなかったため$ which nodeしてみると下記のようになっており、nvmのnodeを読んでいることがわかりました。/home/denham/.nvm/versions/node/v16.6.1/bin/nodeここではnodeのバージョン管理をn packageで行えるようにしたいので、$ sudo vim  ~/.bashrcして下記の記述を削除あるいはコメントアウトexport NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completionnvmフォルダを削除し、rm -rf ~/.nvm.bashrcの変更を反映$ source ~/.bashrcnode -vv14.17.6  となっており、nodeがダウングレードされていることが確認できました。yarn serveを行えばOK。参考stackoverflow.comqiita.com

Assertion `thread_id_key != 0x7777' failed.(node-fibersのエラー)について

何が嬉しいかWindowsでMacごっこができます。MacっぽいGUIの構成要素下記の3つでそれっぽい見た目が作れそう。ドックタスクバーフォントドックDockはRocketDockというソフトを使っています。アイテムはファイルやパス単位で指定したり、ドロップアンドドロップで自由に追加/削除できるので、直感的で使い勝手はよさそう。スタイルのテーマはCrystalXP.netに設定。punklabs.comフォントフォントはMacTypeを使っています。www.mactype.netMacTypeは他ソフトとの競合が起こりやすいようで、Windowsアップデートの際にはいったん停止させた方がよさそうとのこと。インストール時の設定は、プロファイルの切り替えはできないものの、タスクトレイで起動/停止が操作可能であるMacTrayロード/互換性重視モードに設定しています。[参考]fmoga.comタスクバー上部に固定+小さいタスクバーボタンを使用+タイトルバーとウィンドウに境界線(お好みで)に設定しています。タスクバーを透過させるには [Ctrl]+[R]→regeditでレジストリエディタを起動しコンピューター\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\AdvertisingInfoで新規→[DWORD(32ビット)]→キーの名前を「UseOLEDTaskbarTransparency」にし作成個人的には、タスクバーは上部に配置した方がデスクトップの一覧性は高まると感じました。タッチパッドの2本指スクロールなども高精細タッチパッドを搭載した一部機種では再現可能なよう。結びに上記の手順で、このようにぱっと見MacなWindowsデスクトップが作れました。MacTypeのコントラストにイシュカン・コミュニケーションみがあります。参考文献auramorte.comblog.munieru.jp

Windows10のデスクトップをMacっぽくするTips

環境WSL2 ubuntu 18.04LTS経緯flutterをgit cloneして動かすとなぜか構文エラーで怒られるので(ホストのWindows/WSL2いずれの場合でも)、snapでインストールすることにした。$ sudo apt update    sudo apt install snapd  $ sudo snap install flutter --classic  をする。snapcraft.ioが、$ sudo snap install flutter --classic    error: cannot communicate with server: Post http://localhost/v2/snaps/flutter: dial unix /run/snapd.socket: connect: no such dile or directorysanpコマンドが動かない。$ snap --versionsnap    2.49.2+18.04snapd   unavailableseries  -systemctlでsnapの動作確認をしてみたいところですが、WSLではsystemctlが標準で無効化されており、PID1で動作しない(PID1はinitに付与されている)という問題が。$ systemctl status snapd.service  System has not been booted with systemd as init system (PID 1). Can't operate.initプロセスについてLinuxシステムでは通常、カーネルによりinitプロセスが起動され、その後initが各Daemonの起動を担い、Linuxシステム上の全てのプロセスはプロセスID = 1 のinitプロセスを親として起動されます。roy-n-roy.github.io対処法genieを利用することでsystemdをPID1で稼働させることができるようになるとのこと。  deamonizeとdotnet-runtime-3.1のインストールが必要ということなので、まずはこれを導入する必要がありそう。github.com$ sudo apt install daemonizedotnet-runtime-3.1についてはUbuntu に .NET をインストールする - .NET | Microsoft Docsを参考に、以下のコマンドで.NETパッケージのインスト―ルを行います。$ sudo apt-get install -y gpgwget -O - https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor -o microsoft.asc.gpgsudo mv microsoft.asc.gpg /etc/apt/trusted.gpg.d/wget https://packages.microsoft.com/config/ubuntu/{os-version}/prod.listsudo mv prod.list /etc/apt/sources.list.d/microsoft-prod.listsudo chown root:root /etc/apt/trusted.gpg.d/microsoft.asc.gpgsudo chown root:root /etc/apt/sources.list.d/microsoft-prod.listsudo apt-get update; \  sudo apt-get install -y apt-transport-https && \  sudo apt-get update && \  sudo apt-get install -y {dotnet-package}    /* dotnet-sdk-3.1 */genieをインストールします。sudo apt updatesudo apt install -y systemd-genie以下を実行し、systemdをPID1にするgenie -svim .bashrcで以下を追記if [ "`ps -eo pid,cmd | grep systemd | grep -v grep | sort -n -k 1 | awk 'NR==1 { print $1 }'`" != "1" ]; then  genie -sfiこうすることで、実行時にsystemdがPID1でないgenie-sが実行されるようです。かくして、無事PID1で稼働していることが確認できました。$ ps aux  USER       PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND  root         1  0.6  0.1  77736  8808 ?        Ss   11:03   0:01 systemd  $ sudo snap install flutter --classic[sudo] password for denham:2021-06-12T11:06:54+09:00 INFO Waiting for automatic snapd restart...flutter 0+git.e75662a from Flutter Team✓ installedsnowsystem.netqiita.comgithub.com

WSL2でsystemctlを使えるようにする

はじめに開催からだいぶ間があいてしまいましたが、先日参加したヤフー主催のハッカソンOpen Hack U 2020 Vol.4の振り返りを行いたいと思います。Open Hack Uについてhacku.yahoo.co.jpヤフー社員の方のサポートのもと、学生が2週間でプロダクトを企画・開発・発表するイベントです。今回はチームメンバーの対面での開発禁止という完全オンラインの形式で開催されました。本番のプレゼン動画www.youtube.com作ったもの自分達のチーム「焼肉焼いたら家焼くな」では、「漫才」×「言語処理」をテーマに、あるキーワード（ボケ）に対して韻を踏んだ太めなキーワード（ツッコミ）を返してくれる漫才LINEBotを作りました。デモ動画はこちらyoutu.beGitHubのソースコードはこちら github.com開発期間最初の1週間は事前学習にあてていて、実際の開発期間は1週間でした。仕様技術LINE Messaging APIPythonHeroku(本番運用)ngrok(開発用サーバー)アルゴリズム大まかなロジックは入力された文字列をローマ字に置き換えるcsvファイル)から引っ張ってくるというものでした。詳しい実装の流れとして、ワードのローマ字変換をライブラリ(pykakasi)で行う。母音を抽出したものを引数としてランキングを生成する関数に渡す。文字列がリストのものよりも長い/短い場合、短すぎる/長すぎる文字列にマイナス報酬を与える処理を行う。このアルゴリズムには、母体となるデータ(単語辞書の語彙)が不足していることから、返しが特定のワードに偏ってしまう、思うように韻が踏めているとは言い難い(5文字の入力ワードに対して2文字の韻踏みワードがかえってきてしまうなど)という問題点がありました。より精度を上げるため強化学習周りの調整として、辞書の語彙数を増強ラップの韻踏みで重要視される末尾の得点変化率を強くするなどの調整を行いました。当初はライブラリ(Word2Vec)で単語をベクトル化し、太らせスコアを出す予定でしたが、Word2Vecの引数にローマ字をわたせず、スコア化にあたって上記のような自前のアルゴリズムを実装した、というような経緯がありました。また、今回は実装が間に合いませんでしたが、マルコフ連鎖を用いて文章レベルでの応答を実現させるという展望もありました。秀逸な返しの例開発方法基本はDiscordで集まって夜通し作業や進捗共有をし、開発はソースコードをColaboratoryで共有しあいながら行いました。pythonのアルゴリズムをクラスで切り分けてしまえば、機械学習ライブラリの試しや細かい調整などは共通プラットフォームであるColaboratoryで行うのが一番だったためです。僕は今回、ライブラリ調査やスコア化アルゴリズムの実装、デプロイ環境周りの調整を行いました。AWS(Lambda)を導入したかったのですが、こちらは実装が間に合わず頓挫。pythonライブラリを、Lambdaの実行環境(レイヤー)に導入することが出来なかったためです。pythonのバージョンを下げて再構築など行ったもののうまくいかず...。Lambda パッケージ用にDocker イメージを使用する などの方法を用いればうまくいきそうな気がしています。ログ監視の所感デプロイ回りは最終的にはHeroku、開発時と発表時はngrokで行っていました。発表時のサーバー稼働中はPCが激重案件。もっともchoromeのタブをゆうに50件は開いていたため、実にブラックな労働環境を強いていました。ごめんね。とはいえログを眺めていると気が付くことはあって、POST過多による処理落ちかなぁと思っていた部分が、ランキングリストのデータが空のときのエラー落ちの可能性が高そうだ、と見ています。改善の見通しが立てられそう。最後にめちゃくちゃ面白いアイディアの企画・立案、完璧なチームマネジメントとスライドの作成兼発表をやってくれたS君（段取り完璧すぎた。彼の声掛けがないと自分はハッカソン自体参加してなかったです）、アルゴリズムの発案と機械学習周りの実装、最後まで絶妙なスコアリング調整をやってくれたO君（最終日の朝6時半までともにAWSと格闘してくれて感謝！）GitHubのソースコードを共有してくれたNさん（最終日激アツでした、ありがとう！）、2週間お疲れさまでした。Botやりましょう！(奇しくもインターン先でAWSと機械学習を触らせてもらえることになったので、AWS力をなるたけたくわえておきます。)LINEの友達登録はこちらから。ぜひ遊んでみてください！

Open Hack U 2020 Vol.4に参加して

現象Error No.127npm ERR! code 127npm ERR! path /home/hogehogenpm ERR! command failednpm ERR! command sh -c create-next-app "fugafuga" "https://github.com/~~~~~"npm ERR! A complete log of this run can be found in:npm ERR!     /root/.npm/_logs/2021-03-23T02_49_40_026Z-debug.logと遭遇した環境ubuntu18.04(WSL)上記は$PATH関係か、タイポなどで起こるエラーっぽい。詳しくは後述。-gオプションでグローバルインストールしたときなどにpermission deniedされた場合の対処法として、以下が推奨されているようです。対処法npm config get prefixでnpmディレクトリのパスの所在を確認ここでやることが変わる。ケース1  ​"/usr/local"にあったときは、sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}npmディレクトリのオーナーを自分のアカウント(whoami)に変更するでOKケース2"/usr"  にあったときは、docs.npmjs.comを参考に、1.npmのグローバルインストール用のディレクトリを作成mkdir ~/.npm-global2.上記で作成したディレクトリをprefixのパスにセットする(npmの権限を~/.npm-globalに変更)npm config set prefix '~/.npm-global'3.パスを通すexport PATH=~/.npm-global/bin:$PATH　　(あるいはvi .bashrcで直接記述する)source ~/.profileでOKやらかしたこと①前日の夜中にタイポを権限関係のエラーと誤認して、パスを/.npm-globalに通したまま寝る→ディレクトリ(/usr/local/)にないので弾かれる(sudoでいけると思ったけど駄目でした)→export PATH=~/usr/local/bin:$PATHして、npm config set prefix '/usr/local'でパスを通すn packageでnodejs, npmを入れなおすケース1に戻るという工程を踏んで復旧させました。Error No.127は②で起こっていたエラーで、/home/hogehogeにパスないよ、と怒られていたわけです。(回り道をしてしまっていた)参考npmでpermission deniedになった時の対処法[mac] - QiitaResolving EACCES permissions errors when installing packages globally | npm Docs【備忘録】Node.jsでパーミッションで怒られが発生してグローバルインスコができなくなったときに読むもの | Tech_Kazu.log

npmの権限関係エラーの対処法

現象Jestテスト実行時に出る「jest [Vue warn]: Unknown custom element: <v-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.」  などの赤字の警告についてテストツールVue test Utils, Jest原因Vuetifyコンポーネント（<v-col>や <v-btn> ）をJestが認識しないため、Unknown custom elementエラーが出る対処法package.jsonのscriptsに以下を記述package.json "scripts": {+    "test": "jest --config jest.config.js"  }次に、jest.config.jsで指定した階層(root直下のtestディレクトリ)に以下のファイルを追加test/jest.setup.js  import Vue from 'vue'  import Vuetify from 'vuetify'    Vue.use(Vuetify)    以下のファイルをroot直下に追加jest.config.js  module.exports = {    setupFiles: ['<rootDir>/test/jest.setup.js'],    // Load Mock setting    moduleNameMapper: {      '^@/(.*)$': '<rootDir>/$1'  ,    '^~/(.*)$': '<rootDir>/$1'    },      transform: {      '^.+\\.js$': 'babel-jest',      '.*\\.(vue)$': 'vue-jest'    },    moduleFileExtensions: ['js', 'json', 'vue']  }  Vuetifyのようなライブラリを含んだコンポーネントに対するテストは、テストランナーに応じた特別な処置が必要になります。コンポーネントに対するテストを書くにはプラグイン登録が必要になります。このあたりを参照したいときは、Vuetify公式チュートリアルのユニットテストの手法が参考になりそうです。 vuetifyjs.com参考vuetifyjs.comqiita.com

Vuetifyを含んだコンポーネントのテスト実行時に出る警告を消す

画像ファイルをインポートする必要のあるVueコンポーネントをjestでテストした際に発生したエラーでしたが、大分長いこと格闘して、ようやく解決したのでまとめておきます。症状Vue.jsのテストコードを書いていて、以下のようなシンタックスエラーに遭遇した/home/user/hogehoge/src/assets/image.png:1({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG                                                                                         SyntaxError: Invalid or unexpected tokenテストツールVue test Utils, Jestテスト対象のコンポーネント例// sampleComponent.vue<template>    ...</teplate><script>  name: 'sampleComponent',  mixins: [sampleMixin],  data() {    return {      hogehoge: require('@/assets/piyopiyo.png'),    }  },  methods: {    move() {      ...    },  },}</script><style></style>原因と対処法data()メソッドの返り値を画像ファイルとした場合のみに発生するエラーで、つまるところ画像ファイルをインポートすると、Jestは画像のバイナリコードを.jsとして解釈しようとするため、エラーが発生します。reactjs - 画像をインポートするとjestテストが壊れます - ITツールウェブということらしい。インポート時画像ファイルを正しく解釈できるようにする必要があります。なのｄ、package.jsonのtransformとmoduleNameMapperに以下のような設定を追加してあげましょう。jestjs.io// package.json    "transform": {      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"     },    "moduleNameMapper": {+      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js", +      "^@/(.*)$": "<rootDir>/src/$1"     }transformでは画像ファイルの拡張子がインポートされたときにroot直下にあるfileTransformer.jsをインポートするように指示しています。css、scssがインポートされたときにrootディレクトリからmocks/styleMock.jsを参照するように指示しています。jsonの追加記述と対応させてrootディレクトリ(基本的にはpackage.jsonと同階層です)*1にfileTransformer.js、mocksディレクトリを作成し、mocksディレクトリにはstyleMock.jsを作成します。// fileTransformer.jsconst path = require('path')module.exports = {  process(src, filename, config, options) {    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'  },}// styleMock.jsmodule.exports = {}以上の設定のもと、テスト対象のコンポーネントをmount/shallowMountして検証することにより、問題なくテストが通りました。参考【Jest】画像ファイルやCSSのインポートに失敗する場合の対処法 - Qiitareactjs — JestとReactおよびCSSファイルのインポートを伴うSyntaxError*1:https://jestjs.io/docs/ja/next/webpack

【解決】画像ファイルの読み込みでシンタックスエラーが発生する

あけましておめでとうございます！終わってみるとあっという間でしたねー。1月Local学生部に加入して最初の総大会に参加。第11回 LOCAL学生部総大会 開催レポート今日の進捗XAMPPを使ってPHPとWordPressの動作環境を作ったXSSの脆弱性のあるアプリを実際に動かしてみた 目標XSSの対策#localst19— 0yu (@denham95173179) January 18, 2020 前年に参加したMH4YがWordPressの脆弱性を題材としていたため、Webをやりたい！という気持ちがありました。2月ドットインストールとProgateとpaizaを右往左往してやっていた記憶。PHP本を一冊やる。読了。データベースまでさらっと触れられて、初心者の取っ掛かりとしてはすごく読みやすかった pic.twitter.com/caL7wQPolg— 0yu (@denham95173179) February 21, 2020 4月CSSの勉強をちゃんとする（決意をする）。ドットインストールとProgate（無料版）からの繋ぎの本で、☐1冊ですべて身につくHTML & CSSとWebデザイン入門講座 ☐HTML&CSSとWebデザインが 1冊できちんと身につく本で迷っているのですが、自分はこれを使ったよー、みたいな方いらっしゃったらお聞きしたい…#HTML #CSS pic.twitter.com/zUcQnPmhlo— 0yu (@denham95173179) March 17, 2020 cistLTに参加したのもこのころでした。cist-lt-group.web.app5月この辺りからUnityの勉強をちゃんと始める(Udemyの講座を買う)Javaの勉強をはじめる6月、7月2回目のOSC（オンライン）に参加する。Django勉強会に参加したり、talent.supporterz.jpとうとうポチってしまった"ハッキング・ラボのつくりかた 仮想環境におけるハッカー体験学習"（IPUSIRON 著）https://t.co/BVNrFQft2U pic.twitter.com/2dytXzmXod— 0yu (@denham95173179) June 30, 2020 8月ひっそりはてブ開設SC4Yに参加するhackteck.hatenablog.com大学のプロジェクトの成果物としてGAS×Glideのアプリをつくる。Unityの3D系チュートリアルやったり玉転がしチュートリアルを改造中。捕獲エフェクトとか付けたいなーモデル提供は@u____tan_さんhttps://t.co/6IdmnFTHkn pic.twitter.com/c3A34qj7P8— 0yu (@denham95173179) August 4, 2020 Unity1Weekに参加し、初めて自作ゲームを公開する。unityroom.com最初のポートフォリオを作る。（コンテンツはほぼなし）9月初LTcist-lt.connpass.comポートフォリオハッカソンで2個目のポートフォリオを作る。ToDo!今日はここまで pic.twitter.com/m05W5HDTlB— 0yu (@denham95173179) September 20, 2020 フレームワークに初めて触れた）。10月プロメン成果物のアプリをWeb版で公開。chitose-fts.web.appQUOカード溶かしてきた頑張ろう pic.twitter.com/kG1qbKjNmu— 0yu (@denham95173179) October 11, 2020 11月セキュリティミニキャンプに初参戦。2日目朝！ pic.twitter.com/LgkTBQ1rHU— 0yu (@denham95173179) November 8, 2020 初ミニキャンプ楽しかったし学びになった！スタックとか逆ポーランド記法ここで活きるのかーとなって感動Web手も足も出なかった、XSSもっと勉強したい— 0yu (@denham95173179) November 8, 2020 WSL2でGUIを使ってみたりGASでユーザー登録フォームを作ったりリスト表示で一晩格闘してた詰まってた原因がしょうもないタイポでもうね pic.twitter.com/25eY2C8IgY— 0yu (@denham95173179) November 29, 2020 ポートフォリオ（3個目）を作ったり12月momijiLTで初めてチーム開発を経験。unityroom.com久しぶりに触れたUnityが楽しすぎて、ここにきてUnity熱が再熱。小学生向けプログラミング教室に参加したり、12月からは長期インターンに参加させていただけることになり、Vue.jsのテストを書いたりしています。抱負とか今年はゲーム作りやCTFやハッカソンなど、去年やり残したことをやっていきたいですねー。Open Hack頑張る！

明けたけど、2020年を振り返る

こんにちは！この記事はLOCAL学生部アドベントカレンダー22日目への寄稿です。adventar.org今回はVuetifyのUIコンポーネントはいいですね、というお話です。vuetifyjs.comVue.js＋Vuetifyの素振りとして自作のポートフォリオを作り直してみたのですが、ほぼCSSなしでいい感じにレイアウトを組めてとても良いですね。コンポーネントの種類が豊富さが凄い。カレンダーやグリッドデザイン、カルーセルからタイムライン表示までetc.基本的にはメインのコンポーネントに固有コンテンツを記述し、メニューバーはv-navigation-drawer, ヘッダーはv-app-bar,フッターはv-footerといったようにパーツ単位でUIコンポーネントを選択してレイアウトを組むことになりますが、プラモデルを組んでいる感覚に近いです。ワイヤーフレームの例を見ていると、Discordのクローンなんかも作れそうですね。余談ですがUIについてmkan-0141.hatenablog.comこのようなエントリーを見かけて、次はFlutterを使って何か作ってみようかなぁと考えています。

Vuetifyでちょっとリッチな画面を作る

こんにちは。この記事はcistLTサークルアドベントカレンダー18日目への寄稿です！adventar.org技術系とは少し毛色が異なりますが、今回は11/28(土)に行われた、ちとせ創業支援オンラインセミナーのWSに参加した話をしたいと思います。本来は2部構成のWSのようですが、初回のほうは都合上参加できず、2回目となる28日に参加させていただいていました。講師はPLAYWORKS代表のタキザワケイタさん。プログラム前半で3分アイデアソンを行い、後半ではチーム分けを行い、ビジネスモデルキャンバスとストーリーボートの作成を通じて発想した事業を具体化する、という構成でした。アイデア発想法「アイデアとは、既存の要素の新しい組合せ以外の何物でもない」イデアのつくり方』J.ヤング(1988)ヤング先生いわく、アイデアは既存のアイデアのかけあわせから生まれる。ということで、アイデアソンのテーマはかけあわせです。かけあわせとは？テーマ×テーマから遠いモノをかけあわせ、強制発想（リフレーミング）し、新しい価値を見つけ出すという考え方アイデアソンとは？アイデア×マラソンを意味する造語で、特定テーマについて短時間に集中してアイデアを出し合うイベント今回のアイデアソンでは、3分間隔で新しい掛け合わせテーマが提示されるので、それら2つのテーマにまつわる要素をかけあわせた事業アイデアを出し続ける、ということを行いました。たとえばこちらは「和食」から連想される要素をかきだしてみて、プリンとの掛け合わせを考える、という例ですね。出題テーマは千歳市×あつ森、Uber Eats、ペヤング、グランピングetc。3分アイデアソン、実際やってみると想像以上にしんどいです笑後半はチームに分かれて、アイデアソンであがった一つのテーマについてのブラッシュアップを行いました。こうしたアイデア出し→具体化の手法は、起業にかかわらず、個人開発など色々な場面で活かしていけるなぁと思いました。

ちとせオンラインワークショップに参加した話

この記事はLOCAL学生部アドベントカレンダー2020 15日目への寄稿です！adventar.org12日目はaruneko99さん。今回は既存のVue-cliプロジェクトにJestでのテスト環境を構築したこと、その際にはまったところをかき起こしておきたいと思います。Vue.jsでテストがしたいVue.jsでは単体テストの効率化のためにVue Test Utilsを提供しており、こちらはJestやMochaのようなテストランナーと組み合わせて使うのが一般的のようです。環境Jest+vue-test-utilsをyarn(npm)でインストールyarn add -D @vue/test-utils babel-jest jest vue-jest公式ドキュメントJest を使用した単一ファイルコンポーネントのテスト | Vue Test Utilsにしたがって環境設定を行います。package.jsonを編集// package.json{  "scripts": {    "test": "jest"  },    "jest": {      "moduleFileExtensions": [        "js",        "json",        "vue" // *.vue ファイルを処理するように Jest に指示する      ],      "transform": {        ".*\\.(vue)$": "vue-jest", // vue-jest で *.vue ファイルを処理する        "^.+\\.js$": "<rootDir>/node_modules/babel-jest" // babel-jest で js を処理する        },        "moduleNameMapper": { // ソースコードにある @ を src へと割当てる          "^@/(.*)$": "<rootDir>/src/$1"        }   }}次にBabelの設定ファイルを編集します。Jestを使うときはbabel.config.jsまたは.babelrcの2通りの記法があるようですが、今回はすでに用意されていたbabel.config.jsのほうを編集します。{  "presets": [["env", { "modules": false }]],  "env": {    "test": {      "presets": [["env", { "targets": { "node": "current" } }]]    }  }}ここまでの実行結果をみてみるyarn testで実行します。FAIL  src/models/order-item.test.jsTest suite failed to runCannot find module 'babel-preset-env' from '/home/denham/workspace'- Did you mean "@babel/env"?(中略)Test Suites: 2 failed, 2 totalTests:       0 totalSnapshots:   0 totalTime:        2.546 s怒られた...babel-preset-envが存在しないよといわれているので探します。babel.config.jsのenvを@babel/preset-envに書き換えてみます。テストはファイル名.test.jsとすると自動検知してくれます。Vue.jsは学習し始めて間もないですが、既存のソースコードのロジック、DOMの状態チェックなど考えなければならないことが多く、想像以上に検証コードを書くハードルは高そうです。いれて便利なVSCodeExtentionvscode-jestテストコード上でDebugが実行できたり、テスト結果をインライン表示してくれて便利。榊さんのアドカレ、勉強になります。

Vue.jsでユニットテストを書くために

cistLTサークルのアドベントカレンダー4日目への寄稿です。adventar.org目的友人と共同で制作し、10月のサークル合同LTで発表したWebサイト（未完成）chitose-fts.web.appにお気に入り機能追加したい。合同LTcist-lt.connpass.comで使用したスライドについてはこちら経緯友人とGASを使って共同でまたやろうか、という運びになりスプレッドシートでデータベースっぽいこともっとしたいユーザー登録ページ作ってお気に入り機能とか実装したいねページ遷移どうする？-> GASプロジェクトは基本1プロジェクト1htmlしか呼び出せない*1のでページ遷移大変そう...などなどありました。結果わりとなんとかなりました。実際に作成したページscript.google.comスプレッドシートdocs.google.com以下でソースコードと軽い解説を。<!DOCTYPE html><html><head><base target=”_top”></head><body><h1>ユーザー登録フォーム</h1><form action="https://script.google.com/macros/s/AKfycbwLU-A0l5788vTO0sAXT1nL5VYWLNZqCt5hfy8vH8EFO_1rSvY/exec" method="post"><p>ユーザー名：<input type="text" name="namae"></p><p>性別：<br /><input type="radio" name="gender" value="男性">男性<br /><input type="radio" name="gender" value="女性">女性</p><p><input type="submit" value="送信する"><input type="reset" value="入力内容をリセットする"></p></form></body></html><input>タグのname属性で付与した名前をスプレッドシートに書き込む際に受け渡します<form>タグのaction属性でWEBアプリケーションとして公開したページのURLを指定しpostしています<!DOCTYPE html><html><head><base target=”_top”></head><body>送信が完了しました。<br><br><?var url = getScriptUrl();?><input type="button" value="もう一度回答する" onclick="window.top.location.href = '<?!=url?>?page=kakunin';"/></body></html>ここの<input>タグでページを切り替えるためのボタンを作成しています。?page=kakunin';"/>を渡してあげることでkakunin.htmlに遷移させてあげることができます。function doGet(e) {    Logger.log( Utilities.jsonStringify(e) );    if (!e.parameter.page) {        return HtmlService.createTemplateFromFile('index').evaluate();    }    return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate(); /* page=kakuninのpage,この配列に"kakunin"のようなページ名が追加されていく */}function doPost(postdata){var sh=SpreadsheetApp.openById('1juOUKCyip7z0EBwVFSLriP30whTEBvB_lYJV12ZtEuw');var time=new Date();var namae=postdata.parameters.namae.toString();var gender=postdata.parameters.gender.toString();sh.appendRow([time,namae,gender]);  return HtmlService.createTemplateFromFile("result").evaluate();}function getScriptUrl() {    var url = ScriptApp.getService().getUrl();    return url;}doGet()ではfunction doGet(e)e.parameterの中にURLのパラメーターが配列として格納され、return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate()kakunin"のパラメーターの値を取得し、変数pageに格納したものを戻り値として返しています<input type=”submit”>でdoPost関数を呼び出した際の処理をみてみます。 スタンドアロン型スクリプトで作成しているのでSpreadsheetApp.openById(“”)部分に入るシートIDはスプレッドシートのURLのd/と/editの間https://docs.google.com/spreadsheets/d/**********/edit#gid=597941997で確認できます)スクリプトと紐付いていないスプレッドシートを指定して取得しています。postdataをtoString()メソッドで文字列型に変換し、appendRowメソッドでスプレッドシートの最終行にtime,name,genderを追加しています。感想ネックだったページ遷移の問題は解決できたので、残る課題はログインページとお気に入り機能の実装ですね。またサークルのLTなどで何度かプレゼンしているのですが、GASのよいところは①無料（お財布にやさしい）スプレッドシートをデータベースとして代用できること制約のないレンサバはお金かかるし、データベースは学習コストが重いので、小規模でWeb開発したいとか、とりえあずデータベースつかってみたい余談*1:GASのHtmlServiceで提供されるHTMLはホスティングページではないため、Webアプリ公開時に作成されるURLが唯一のURLとなる

GASでユーザー登録フォームを作った

環境・Ubuntu18.04（WSL2）PostgreSQL) 11.2問題$ psql -U postgres -d postgresコマンドでpsqlにログインできず、psql: error: FATAL: Peer authentication failed for user "postgres"なるエラーが表示される原因・peer認証が有効になっているpeer認証とは、ローカルからのアクセス時にpostgres（OS側）のユーザー名がpostgres（データベース側）のものと一致している場合のみ接続を許可する認証方法で、ここが不一致のために怒られているらしい解決策・postgres（OS側）のパスワードを設定$ sudo passwd postgres$ su - postgres  $ psql  psql (11.2)  Type "help" for help.    postgres=#  以下のSQL文を実行してパスワードを設定次にfindコマンドでpg_hba.confを探します$ sudo find / -name pg_hba.conf自分の環境ではpostgresql/13/main下にありました# Database administrative login by Unix domain socket  local   all             postgres                                peer  の行をみてみるmd5$ /etc/init.d/postgresql restartでpsqlを再起動補足公式ドキュメントpsqlコマンドを実行するとerror: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?$ pg_lsclustersでpsqlのstatusを確認→サーバーがダウンしている模様10  main    5432 down   postgres  /var/lib/postgresql/13/main /var/log/postgresql/postgresql-13-main.log$ /etc/init.d/postgresql startで起動参考ryotatake.hatenablog.comwww.utsushiiro.jp

PostgreSQL導入備忘録（peer認証エラー）

以前Python3周りの環境構築でやらかして以降、放置していたUbuntuのアップグレード問題をようやく解決したお話。前提UbuntuはOS自体がpythonで動いているので、これを弄ると色々まずいことに。Ubuntuを18.04(LTS)→20.04(LTS)にしたいUbuntuの最新バージョンへのアップグレードを行うには、以下の手順でやっていくことになります。sudo apt updatesudo apt install update-managersudo apt dist-upgradesudo do-release-upgrade -dところがパッケージマネージャの処理でエラーが発生。Your python3 install is corrupted. Please fix the '/usr/bin/python3' symlink/usr/bin/python3はUbuntuで使用されているデフォルトのPython3バージョンを指すシンボリックリンク（ショートカットのようなもの）であり、ubuntuバージョンの標準のものでないとこのようなエラーが発生するケースがある、とのこと。Ubuntu18.04で規定のバージョンはpython3.6.8ですが、自分の環境では手動でpython3.8としていました。update-alternatives --config pythonでpythonのバージョンを変更します。sudo update-alternatives --config pythonとすることで、実行可能ファイルを確認することができる以下のコマンドにより$sudo update-alternatives --install /usr/bin/python python /usr/bin/python2.7 1$sudo update-alternatives --install /usr/bin/python python /usr/bin/python3.6 2python2、python3の指定した任意のバージョンをそれぞれ登録することができます。（この場合はpython2.7と3.6を実行可能ファイルとして登録できます）python3 --versionのコマンドでバージョンが3.6.8になっていることを確認します。sudo ln -s /usr/bin/python3.6 /usr/bin/python3でpython3.6のシンボリックリンクを再作成が、うまくいかない。バージョン依存の原因ではないらしい。sudo apt-get install python3 を実行したところ、dpkg: パッケージ libjna-java の処理中にエラーが発生しました (--configure):パッケージが非常に矛盾しているようです。怖いですね。ステータスを調べてみるdpkg -s cacti-spineとすると、Status: install reinstreq half-installedインストールが中断されて、半分インストールされた状態になっていた模様。こういったケースでは-reinstallのコマンドが使えるとのことで、sudo apt-get install --reinstall python3インストールが成功していた場合Status: install ok installedとなります。sudo do-release-upgrade -dをして確認。無事20.04にアップグレードできました。まとめpython3のデフォルトバージョンはうかつに弄らない方がいい（あさはかでした）参考codechacha.comqiita.comserverlog.jpqastack.jp

 Ubuntu 18.04(LTS)→20.04(LTS)アップグレードでハマったこと

sc4y.connpass.com北海道地域情報セキュリティ連絡会（HAISL）主催のセキュリティイベントSC4Yに参加しました。Youtube Liveを併用してのオンライン開催でした。本イベントではshellshockを題材にしたハンズオン演習が行われたため、簡単なメモを残しておきたいと思います。ShellShockとは?GNU bash における任意のコマンドを実行される脆弱性（悪用できるバグ/セキュリティホール）jvn.jp実際にバグが仕込まれたのが1993年、Stephane Chazelas氏がこれを報告したのが2014年9月9月の出来事とのこと。ハンズオンでは、そこから修正パッケージが公開されるまでの一連の流れを攻撃者・防衛側の両サイドから検証する形で追っていきました。PoCコードについてPoC(Proof of Concept)コードとは、脆弱性を検証するためのテストコード$env x='() { :;}; echo vulnerable' bash -c "echo testenvはshellの環境変数設定コマンドbash -c "echo test"はシンプルなシェルのコードxは環境変数でenv LANG C=dateなどというように使うx='() { :;};で変数xに魔法の文字列() { :;};とコマンドが入れられている→怪しいこのコマンドを実行すると、想定される実行結果はtestBash のバージョンに脆弱性が含まれる場合は、testの他にvulnerable環境変数の文字列がコマンドとして実行されてしまうのが問題echo vulnerable で環境変数に攻撃的なコードを埋め込んでいる$env x='() { :;}; rm -rf / ' bash -c "echo test"なら、rm -rfでデータをすべて消去/bin/cat /etc/passwdとしたならアカウント情報窃取LAB環境についての覚え書き今回は比較的簡単に検証できる環境としてVirtual Boxを利用・NICというLANカードを介して・LAB環境は脆弱性をわざと参照している*1といわれる技術で隔離している。・攻撃者と防衛側の一人二役で行うWindowsの場合*2）、Power Shellが攻撃側（lo/ループバックアドレス）*3（攻撃側）偵察行動のコマンド例windows powerShellの場合.\curl.exe -A ‘() { :;}; echo Content-Type: text/html; echo ; /bin/ls /usr/local’ http://127.0.0.1/test.phpもしくは(iwr -UserAgent ‘() { :;}; echo Content-Type: text/html; echo ; /bin/ls /usr/local’  http://127.0.0.1/test.php).Content（攻撃側）拠点確立行動のコマンド例.¥curl.exe -A ‘() { :;}; echo Content-Type: text/html; echo ; echo hacked > /tmp/backdoor’ http://127.0.0.1/test.php(iwr -UserAgent ‘() { :;}; echo Content-Type: text/html; echo ; echo hacked > /tmp/backdoor’  http://127.0.0.1/test.php).Contentcurl:http通信bashコマンドを記法CGIコンテンツを指定SlackからPower Shell上にコピペするとcurl.exeの前の\（半角バックスラッシュ）が¥（半角円マーク）にUserAgentにコマンドを入れるだけで攻撃が成立してしまう怖さ被害の有無を調査するshellsockの場合は影響範囲が広く、どこで影響を受けるかわからないため、ありとあらゆるログを見るべき。システムログ/var/log/messages認証ログ/var/log/secureデバイス関連ログ/var/log/dmesg/定期実行処理のログ/var/log/cronメールのログ/var/log/mailloghttpdのログ/var/log/httpd/以下その他にも、データベースを使っているならmysqlのログなど不審なログを発見するために異常時のログを見分けるために、正常時にはどんなログが流れているのか、どういう意味なのかを定期的に確認しておくのがよい。学びとしてセキュリティの勉強はインプットが中心でモチベーションが続きにくく、アウトプットをするにはどうするのがよいだろうか？という質問がありました。*4やCTF*5・バグバウンティの紹介なども。またセキュリティで扱うテーマはとても広いので、最初は興味を持った分野から掘り下げていくのがよいというお話でした。まだまだ不勉強で理解が追い付かないところが多かったですが、内容の濃いお話がたくさん聞けました。www.amazon.co.jp期末試験が終わったらこれを再開したい*1:（NAT:Network Address Translation）:プライベートIPアドレスをグローバルIPアドレスに変換する技術仮想マシンを起動すると127.0.0,1 ssh(port22)が10.0.2.15(port22)に変換されるようになっている*2:仮想NIC*3:自分自身を指すアドレス,localhostのこと*4:https://sechack365.nict.go.jp/*5:Capture The Flag（旗取りゲーム）/別名ハッカーコンテスト

SC4Y ('20#1) サイバーセキュリティ 脆弱性対応 (防災訓練)参加レポート

Unity 1 Week用の作品をUnity Roomに投稿しようと意気込み、Web GLにビルドできない問題が発生。エラーを見てみると、Pathの設定に問題がありそうな一文が。どうもプロジェクトフォルダ名とフォルダまでのパスに全角英数字が含まれているとダメらしい...。 やったこと念のためプロジェクト名の半角大文字を小文字に変更大文字すら怖かった。 バックアップを取るAssets→Export packageでアセットデータのエクスポート＆フォルダごとコピー。 CloudBuildを試してみるSuccessの表示を確認→ダッシュボートでプレイを実行してみたところThe webgl build requested was not foundEdgeでもダメでした。こちらは保留。*1forum.unity.com Build先をドキュメントの外に変えてみたC:\Users\[UserName]\OneDrive初回はエラーで失敗。 再起動して試したところ無事処理が始まり、Node.jsがファイアウォールでブロックされているという警告→アクセス許可で成功。 am1tanaka.hatenablog.com 追記DドライブのDocumentsにWeb GLフォルダを作り保存→こちらも無事成功。 まとめると、ビルドが上手くいかないときはフォルダ名とそこに至るまでのパス名の中に日本語全角がないかNode.jsがブロックされていないかを確認してみるといいかもしれません。 思いのほか時間がかかってしまった。。作品はunityroomで公開中です。unityroom.com右も左もわからない状態でしたが、なんとか形にはできました。よければ遊んでみてください！*1:UnityCloudBuildはUnity Teamsという有料サービスに統合されてしまっていたようです。WebGLへの出力にはプロ以上のライセンスが必要とのこと

WebGLのビルドで苦戦した話

せっかくAmazon Kindle Unlimitedの無料体験中なので、そろそろ本腰入れてGAS入門するぞ、とGoogle Apps Scriptステップアップガイドを始めてみた。www.amazon.co.jp以下、躓いた部分のメモ。 発生した問題doGetメソッドの実行でエラーTypeError: output.append is not a function（行 12） 該当箇所// コード.gsfunction doGet() {var output =HtmlService.createTemplateFromFile('index');return output.evaluate().setTitle('Sample page');}function getData() {return ["Windows","Mac OS X","Linux"];} // index.html<style> h1 {font-size:16pt;background:#AAFFAA;padding:5px;} p {margin:10px;}</style><h1>Sample page</h1><ol><?var datas = getData();for(var i=0;i<=datas.length;i++){if(datas[i]==undefined){ break; } output*1.append('<li>'+datas[i]+'</li>');}?></ol>  解決V8ランタイムを無効にする GASが旧RhinoランタイムからV8ランタイムに対応した関係*2で、一部の構文が使えなくなってしまった模様。V8ランタイムは現在のJavascriptの標準規格であるECMAScriptに準拠していて、こちらの方がよりモダンなJSを書けますよ、ということらしい。今回はRhinoエンジンにダウングレードしたことで問題解消。 公式V8ドキュメントdevelopers.google.com英弱なのでこちらも参照。qiita.com*1:GASの暗黙オブジェクト*2:2020年2月6日より

0yu

Rustでマークダウンパーサーを自作して、WASM+Nuxt3+Viteで動かしてみた

Rustで作るリアルタイムOS

Next.js+Firebase Authenticationでさくっとログイン機能を導入する

VercelのOG Image Generation(vercel/og)を利用してOGP画像を作成する

Next.js+Fireastoreでリアルタイムチャットを作る

ARMマイコンCortex-MでRTICに入門する

CODE BLUE2022 学生スタッフに参加して

HTMLメール作成の忘備録

RTOSを手を動かしながら理解する（スケジューリング編）

Puppeteerでスクレイピングする

就活を振り返る

コープさっぽろのインターンシップで学んだこと

ElectronでセキュアなIPC通信を実装する

ハッカソン飯と一緒に今年を振り返る

Assertion `thread_id_key != 0x7777' failed.(node-fibersのエラー)について

Windows10のデスクトップをMacっぽくするTips

WSL2でsystemctlを使えるようにする

Open Hack U 2020 Vol.4に参加して

npmの権限関係エラーの対処法

Vuetifyを含んだコンポーネントのテスト実行時に出る警告を消す

【解決】画像ファイルの読み込みでシンタックスエラーが発生する

明けたけど、2020年を振り返る

Vuetifyでちょっとリッチな画面を作る

ちとせオンラインワークショップに参加した話

Vue.jsでユニットテストを書くために

GASでユーザー登録フォームを作った

PostgreSQL導入備忘録（peer認証エラー）

Ubuntu 18.04(LTS)→20.04(LTS)アップグレードでハマったこと

SC4Y ('20#1) サイバーセキュリティ脆弱性対応 (防災訓練)参加レポート

WebGLのビルドで苦戦した話

GAS入門とV8ランタイム

Rustでマークダウンパーサーを自作して、WASM+Nuxt3+Viteで動かしてみた

Rustで作るリアルタイムOS

Next.js+Firebase Authenticationでさくっとログイン機能を導入する

VercelのOG Image Generation(vercel/og)を利用してOGP画像を作成する

Next.js+Fireastoreでリアルタイムチャットを作る

ARMマイコンCortex-MでRTICに入門する

CODE BLUE2022 学生スタッフに参加して

HTMLメール作成の忘備録

RTOSを手を動かしながら理解する（スケジューリング編）

Puppeteerでスクレイピングする

就活を振り返る

コープさっぽろのインターンシップで学んだこと

ElectronでセキュアなIPC通信を実装する

ハッカソン飯と一緒に今年を振り返る

Assertion `thread_id_key != 0x7777' failed.(node-fibersのエラー)について

Windows10のデスクトップをMacっぽくするTips

WSL2でsystemctlを使えるようにする

Open Hack U 2020 Vol.4に参加して

npmの権限関係エラーの対処法

Vuetifyを含んだコンポーネントのテスト実行時に出る警告を消す

【解決】画像ファイルの読み込みでシンタックスエラーが発生する

明けたけど、2020年を振り返る

Vuetifyでちょっとリッチな画面を作る

ちとせオンラインワークショップに参加した話

Vue.jsでユニットテストを書くために

GASでユーザー登録フォームを作った

PostgreSQL導入備忘録（peer認証エラー）

Ubuntu 18.04(LTS)→20.04(LTS)アップグレードでハマったこと

SC4Y ('20#1) サイバーセキュリティ 脆弱性対応 (防災訓練)参加レポート

WebGLのビルドで苦戦した話

GAS入門とV8ランタイム

SC4Y ('20#1) サイバーセキュリティ脆弱性対応 (防災訓練)参加レポート