EMC2NARY

資産運用を「UI/UXの問題」として解く:自分をだますHCIとホーミーズ

我が家には、ちょっと変わった文化があります。モノに名前をつけて、人格のあるものとして扱うんです。おかげで家のあちこちに〝ホーミーズ〟がいます。 先に種明かしをしておくと、この記事は、その名前をつける発想を、とうとう無形のもの——資産運用のポートフォリオ——にまで広げてしまった話です。そして我が家の資産運用は、「入口で自分を騙し、出口でも自分を騙す」という、二段構えのマインドハックになっています。 冗談みたいですが、やってみると地味に理にかなっている気がしているので、順にお話しします。

私のキャリア家系図を棚卸してみた

最近、家系図ビジネスというのが流行っているらしいです。自分の祖先が何をしていた人なのかを調べてくれるサービス。私はもともとこういうのがけっこう好きなタイプです。ルーツが分かるとなんだか安心するというか、単純に面白い。 で、ふと思いました。これ、血のつながりだけじゃなくて、キャリアでもできるんじゃないか、と。自分がいま持っている技術や職能は、どこの誰から流れてきたものなのか。系図にして並べてみたら、思ったより綺麗にまとまってしまったので、せっかくだから記事にしてみます。 先に言っておくと、そんなに高尚な話ではありません。ただの自己満です。棚卸ししてみたら妙にしっくりきた、という、それだけの話です。 一点だけ。この記事は事実(実在の人物・製品・出来事)に、私自身の見立て(家系図・血・遺伝といった比喩)を重ねて書きます。事実は事実として、見立ては「こう捉えると腑に落ちる」という話として読み分けてもらえると嬉しいです。今回はAIにかなり手伝ってもらって調べたのですが、そのおかげで自分でも知らなかった先祖のつながりがいくつも出てきて、新しい視点をもらえました。それも自分の実感と紐づけながら書いていきます。

経営管理は、壮大なローカライズだ

翻訳の世界で使う、あのローカライズのことである。私のルーツは、もともと科学コミュニケーションがテーマの一つの研究室の出自で、そこから輸入プロダクトのローカライズと日本展開の仕事へ進んだ。ある文脈で生まれたものを、別の文脈の人が自分のものとして受け取れる形に作り替える——それが私の出発点だった。経営情報を扱う仕事に就いたのは、ここ一年半ほどのことにすぎない。 それでも、いや、だからこそ、最近になって腑に落ちたことがある。 経営管理という仕事も、とどのつまりはローカライズなのだ、と。 もちろんローカライズは借り物の言葉だ。だが借り物だからこそ、一度自分の手でばらして、自分の経験で組み直してみる価値がある。順番に書いていく。まずは、そもそもローカライズとは何か、というところから。

思想編:なぜ私は、ブログシステムを自分で作り続けるのか

前回、ブログシステムを6年ぶりに作り直した話を書きました。技術編です。何をどう作り替えたのか、という話でした。 今回は、そもそもなぜnoteもZennもある時代に、わざわざ自分でブログシステムを作っているのか、という話を書きます。たぶん、こっちが本題です。

技術編:ブログシステムを6年ぶりに作り直しました

このブログのシステムを、全面的に作り直しました。いま読んでいるこのページは、数日前までとは中身がまるごと別物になっています。 最初にお断りしておくと、この話は二部構成です。今回は技術の話をします。何がどう変わったのかを、実際に動くデモを交えて紹介していきます。「そもそもなぜ、noteもある時代に自分でブログを作り続けるのか」という思想の話は、次回にとっておきます。

1つのD、2つのD、4つのD

テック系のタイムラインには、毎日のように「作ってみた」が流れてくる。新しい技術に飛びつき、形にして、イベントで展示して、大盛況で終わる。私はあの熱量が好きだし、自分自身、ずっとそっち側の人間だった。作っては公開し、展示し、ありがたいことに賞をもらったこともある。

FDEとSESは何が違うのか——その正体は、モンスターハンターである

いま、FDE(Forward Deployed Engineer)という職種がにわかに盛り上がっている。 PalantirやOpenAI、Anthropicが採用を拡大し、VCのa16zは「いまテック業界で最もホットな職種」と呼び、日本でもLayerXやログラスなどのSaaS企業を中心に採用が立ち上がってきた。 一方で、この説明を聞いた多くの日本のエンジニアがこう思ったはずである。 「それ、客先常駐のSESと何が違うの?」 この記事を読み終わる頃には、この問いに一言で答えられるようになっているはずである。しかもその答えは、FDEの解説記事によくある「上流から関われる」「自社プロダクトがある」といった差分の列挙ではない。なぜその差が生まれるのかという構造のほうである。 種明かしを先に言ってしまうと、こうだ。 SESとFDEの違いは、ドラクエとモンハンの違いである。

AIの非決定論とどう付き合いシステムを構築していけばいいのだろうか | 第3回GMO大会議参加レポ

日頃、経営管理システムを業務で開発しており、当然のように昨今の流れに乗って私もAIやLLMを統合したAI-integratedなシステムを構築している。 主に経営層が意思決定で使うためのシステムなのであるが、目下私のシステム構築における課題感は AIが出す回答の非決定論(non-deterministic) というポイントである。

個人から見た会社の役割は?

財務はもちろんサステナビリティだとかESGだとか、社会が会社に対して求めている役割については様々なところで多分に言語化されていますが、それよりもっとミクロな視点で従業員として働いている個人が会社に対して求めている役割についてはあまり構造化されて語られていないなと思ったのでこの機会に考えてみることにしました。

最近なんとなく見えてきた「市場価値」の正体

巷ではよくスキルを伸ばして経験を増やして市場価値を上げて転職しよう!という声が聞こえてきます。しかしこの市場価値というものはいかんせん漠然としていてなんだか実態が掴みづらいなあと日頃感じていました。そんな折、この1年で2回の転職活動をしたことと、現在の所属している経営管理ドメイン領域で指標を数式化する訓練をしてきたことから、なんとなく市場価値の正体が見えてきた気がします。本記事では現時点で私が見えている市場価値の実態について整理しようと思います。

羽沢横浜国大のポテンシャルまとめ

羽沢横浜国大近辺に住んで1年、住めば住むほどこの街が好きになってきた 住んで見るとやはりこの街にはポテンシャルを感じずにはいられないので、このタイミングでまとめて整理してみる 移住を検討している人にはぜひ参考になると嬉しい。

モチベーションで仕事するな、に感じた違和感とその先にある本質

「プロならモチベーションで仕事をするな。やりたいやりたくないに関係なく、常に最高のパフォーマンスを出せ」 最近よく聞くこの言葉に、ずっと違和感があった。たしかに正論ではある。プロとは、一定の成果をコンスタントに出す存在であり、感情に左右されずに職務をまっとうするものだという意見はもっともだ。 でも、じゃあ本当にモチベーションは不要なのか?

挨拶をしない人が周りに増えたので、挨拶の意義についてchatGPTの力を借りて理解してみようとする

転職後文化なのかなんなのか挨拶が減った気がする。前職(新卒からお世話になった会社)ではかなり挨拶文化が徹底されており、見知らぬ人でもオフィス内ですれ違うたびに「お疲れ様です」と言い合う行動が習慣づいていた。個人的にもこれは非常に気持ちの良い文化であり、会社でリラックスして仕事する事ができる一つの要因であったのだと今なら思う。 さて、転職後そのままのテンションで挨拶しまくっていたら、驚くほどに挨拶が返ってこないことに気づいた。現在リモートも解除され出社が増えてきているのだが、席に着きチームに朝の挨拶をするとき以外は、顔見知りの人とトイレの入り口ですれ違った際も会議室に集まった際も挨拶が返ってこない。重要な打ち合わせ後にねぎらいと感謝の意味を込めて「お疲れさまでした、ありがとうございます」と上席に伝えても(聞こえていないわけはないが)無視されたと思うレベルに反応がない。 挨拶をすることはメリデメではなくそもそも常識では…?と思うのだがもしかしたらしない派にはしない派の考えるメリットやしない根拠があるのかもしれない。ということでchatGPTに『挨拶はしなくても良い』派と『挨拶はしなければならない』派に分かれてディベートしてもらいそれを観察することにした なお『挨拶はしなくても良い』派は"挨拶することはできるが別にしなくても良い"という主張に対して『挨拶はしなければならない派』は"挨拶は絶対にしなければならない"と主張のレベル感にあえて差を持たせた。なぜなら人間の機能として普通に考えれば挨拶することは意志があれば可能な所作であるし選択の自由がある上で挨拶をする選択をしないという意思決定を行っている背景があるためである。また『挨拶はしたほうが良い』程度の主張だと「一般的に考えてそれはそうだろ』と帰結してしまいそうなためレベル感を最大に上げている。

どうしてもローカルでPDFを1枚ずつJPEG化したい

iLovePDFなど、便利なツールがありますがどうしてもオンラインではなくローカルだけでPDFをそれぞれ画像化したいときってありますよね。例えば個人情報とか、アップロードしたくはないのでローカルでできればベストです。 chatGPTに聞いたところpdftkとimagemagickを組み合わせればできるとのことだったのですが、現行のImageMagick 7.1.1-36ではconvertコマンドに変わりmagickコマンドを利用せよとのことでした WARNING: The convert command is deprecated in IMv7, use "magick" instead of "convert" or "magick convert" ただドキュメントを見る限りmagickコマンドにはこれまでconvertコマンドで利用できていたようなpdfからjpg変換するようなものが見つからず困っていました 最終的にcubepdfを使い位置枚ずつjpeg化して対応しました。これならpdftkを利用する必要もなくGUIだけでできるのでベストかもしれません

技術書典16にて新刊を2冊頒布します!

2024/5/25から行われる技術書典16に出展します! 今回は2サークル関わることになり、それぞれ1冊ずつ、合計2冊の本を頒布することになりました! Good Morning #02 GMOインターネットグループ エンジニア有志一同 著 / ブース:こ02 前回の技術書典15に引き続き、会社の有志メンバーを集い合同誌を作成しました。 私は前回に継続して編集長として関わり取りまとめ等々を行いました。前回の反響を受けて、著者・ページ数ともに大増、新しくロゴもできたりしたりとかなりパワーアップしています! 電子、紙どちらも0円での頒布予定なので、ぜひぜひ読んでみてください!!! ボカロ曲の歌詞をあやつるリリックアプリを作ってみよう! リリックアプリ開発者コミュニティ 著 / ブース:し11 これまでこのブログでも色々と取り扱ってきたリリックアプリについて、おそらく史上初めてとなる書籍です!! Discordで運営されているリリックアプリ開発者コミュニティで書籍執筆の話が持ち上がり、歴代のマジカルミライ プログラミングコンテストの受賞者が集まり執筆いたしました。 初心者向けの導入手順から、受賞者の制作裏話まで掲載されていますので、これ一冊読めば楽曲のリアルタイムデータを取得して歌詞やビートに合わせたインタラクティブなWebアプリ(リリックアプリ)を作る事ができます。 また第五章ではTextAlive App API開発者のarc@dmzさんによる最新バージョンのAPI解説裏話なんかも掲載しています。これはリリックアプリ開発者には必読の一冊ですね! 次の「マジカルミライ 2024」プログラミング・コンテストは7/9が締め切りです!この本を技術書典で買って読んで作ってもまだ間に合います!!興味ある方、ぜひブースまでお越しください! 感想もお待ちしております!!! プログラミングコンテストには参加しないよって方も、表紙のミクさんがかわいいのでぜひ見てってください。会場で頒布予定の物理本はちょっとコストを上げてキラキラなPP加工とかしてるレア物です。ぜひ本棚に一冊いかがでしょうか。 ということで5/26は池袋サンシャインでお待ちしてます。当日は2つのブースを行ったりきたりしていると思います。 よろしくお願いします~

Goodbye VOXELCANVAS

2024年3月31日を持ってVOXELCANVASをサービス終了します。 2017年のリリースから7年も個人開発で続けてきましたが、利用しているバックエンドサービスであるNCMBの終了を受け、この度サービス終了することとしました。 本エントリではこれまでご利用いただいたユーザーの方へ感謝を申し上げつつ、VOXELCANVASの思い出を振り返っていこうと思います。

markdownエディタ「Tale」をリリースしました。

久しぶりのリリースです。markdownがスラスラ書けるブラウザエディタ「Tale」をリリースしました。 OSSとして公開しています 背景 OSSで公開されているNovelというプロジェクトをフォークして開発しています NovelはNotionライクな WYSIWYG editorでSteven Teyらによって開発されています。 NovelはNotionのような書き心地で非常に良いエディタではあるのですが、基本的に開発者が独自の機能を追加して個別で利用することを前提としたプロジェクトであり、保存やロード、markdownエクスポートなどはNovelではサポートしない方針でした こうした背景から自前で拡張コマンドを実装しローカルで使っていましたが、そちらをVercelでデプロイしリリースしたものになります。 拡張コマンド /clear : 執筆中のドキュメントを全削除するコマンドです。このコマンドがない場合、全てドラッグで選択して削除する必要がありました。内部的にはeditor.commands.clearContent()を利用しているため間違って実行してもCtrl + Zで戻ることが可能です。 /export : .md形式でダウンロードします。アップロードした画像ファイルは.png形式で同時にダウンロードされ、markdownからは名前で参照される形となります。 /save : .tale形式で保存します。画像ファイルはbase64形式でファイル内に埋め込まれるため、単一ファイルとして保存されます。 /load : .tale形式で保存されたファイルを開きます /fullscreen : エディタをフルスクリーン化します ?load= : ホストされた.taleファイルを開きます 機能リクエスト・問い合わせ なにかありましたらDMにてお問い合わせください

novelで書いたmarkdownを保存できるようにする

novel markdownエディタにnovelを採用し、ローカルに構築してみました ※テキストは Good Morning #01 inowayさんの章を拝借しています リポジトリ デプロイしてみた novel novelはvercelの方たちが中心となって開発したオープンソースのnotionライクなmarkdownエディタです。ライブデモで動作を確認できます。 notionライクな書き味とlocalStorageを利用したリアルタイムセーブなんかが良いです。 現在ライブデモとVSCode拡張で提供されていますが、ライブデモはmarkdownエクスポートができなかったり、VSCodeは見た目が小さかったり画像のアップができなかったりと、色々残念なポイントがあります。 今回はnovelのブランチをフォークして自前の環境を作り、markdownエクスポートを実現したので共有します。 markdown export \novel\packages\core\src\ui\editor\index.tsxに機能的な処理が記載されています onUpdate()がアップデートされたときに呼ばれるコールバックとなっていて、そちらにエクスポート機能を追加します。 エクスポートのトリガは /saveと入力した際にされるようにします。 const lastFive = getPrevText(e.editor, { chars: 5 }) if (lastFive === "/save" && !isLoading ){ const id = Math.random().toString(32).substring(2); e.editor.commands.deleteRange({ from: selection.from - 5, to: selection.from, }); let editorContent = e.editor.storage.markdown.getMarkdown(); const blob = new Blob([editorContent], {type: 'text/plain'}); // Blob オブジェクトの作成 const link = document.createElement('a'); link.download = 'novel-'+id+'.md'; // ダウンロードファイル名称 link.href = URL.createObjectURL(blob); // オブジェクト URL を生成 link.click(); // クリックイベントを発生させる } これで/saveコマンドを打つとmarkdownがダウンロードされるようになります。 base64化解除 ただ上記の状態だと、埋め込まれた画像が全てbase64化され本文に記述されているため、容量が非常に多くなっています。 画像ファイルはbase64からpngデータに変更して単一のファイルとして保存されるように以下の処理を追加します。 let req = /\(data:image.*?\)/g //base64化された画像のみ()ごと抜き出す let imgs = editorContent.match(req); for(let i in imgs){ var a = document.createElement("a"); //Create <a> let base64 = imgs[i].slice(1); base64 = base64.slice(0,-1) a.href = base64 //Image Base64 Goes here a.download = i + "-" + id +".png"; //File name Here a.click(); //Downloaded file editorContent = editorContent.replace(base64,i+ "-"+id+".png") } これでエクスポート時に画像ファイルがダウンロードされるようになり、markdownには画像ファイル名が記述されるようになりました。 課題 本当はJSZipなんかでzip化したほうがいいんだと思います。めんどくさくてやってません localstorageに残っているデータは現状デベロッパーツールで消すかすべて選択して消すかしかないので/deleteなんかを定義してもいいのかもしれません。事故が怖いですが。 novelのせいなのか私の書いたコードのせいなのかたまにオートセーブが効かなくなります。エラーを見る限りローカルストレージに保存する際のパースエラーっぽいんですが、続けて書いていれば消えて問題なく保存再開されるので現状無視してます update()の返り値のeから最終的にmarkdownが平文で取得できるので、頑張ればchrome拡張なんかでも提供できそうです そもそも書こうと思っていた記事があったのに環境構築から始めたせいで結局執筆は一ミリも進んでおらずこんな時間です 続報 スラッシュメニュー化&json形式でのセーブ・ロードを実装しました。 公式ではフルスタックアプリ化を避けるためこういった機能はマージしないそうなのでissueにて展開済み 参考

3D Gaussian Splattingで作成したplyデータのもやもやを超簡単に取る

3D Gaussian Splatting超楽しい 3D Gaussian Splatting 楽しいですね、気づけば動画を取りまくってしまいます。 {{bench}} ただ一点、作成した際に対象物の周りに、意図しない点群データがあるせいで視界がモヤモヤしてしまうことがあります 上記サンプルでいうと、ベンチだけで良いのに周辺データがモヤモヤ入ってしまっています。 この問題を修正するにはplyデータが編集できる環境が必要でした(無料のものでいうとblenderなど) ただこの方法だとblenderのインストールが必要ですしそこそこスキルが要求されるので面倒でした SuperSplat WebGLゲームエンジンのPlayCanvasがここ最近splat対応をゴリゴリ進めていて、その中でSuperSplatなるプロジェクトを開始しました こちらを利用するとブラウザでplyの表示ができるだけでなく、編集もできてしまいます もやもやも取ることができるので、ブラウザ環境だけで3D Gaussian Splattingで作成したデータの修正ができます! 今回はその方法を紹介します SuperSplatライブデモ SuperSplatは以下のURLにライブデモとして公開されています。アカウント作成など不要で誰でも無料で使うことが出来ます。 Luma AIなどで作成したplyデータをドラッグアンドドロップでアップロードします アップロードが終わると点群データが表示されます 青く表示されているのが点群データです。 モヤモヤが多くあることがわかりますね 対象物を中心に球状にくり抜く まず対象物(今回はベンチ)だけ中心に周囲を不要なものとして球状にくり抜いてしまいます。 左のメニューから Selection > SphereのラジオボタンをONにします するとこのように球が表示されます 左側メニューのSphere横のパラメーターから自分がほしい範囲にかさなる用にSphereのサイズを変更します こんなふうにほしい位置に球が重なればOKです。 次にSet, Add, Remove..とボタンが並んでいる箇所から「Set」を押します すると球内に入っている点群が選択され黄色になります そして次に「Invert」ボタンを押して選択範囲を逆転させます。 これで球外にある点群が全て選択された状態になりました これらは全て不要なので、Scene > Delete Selected Splatsを選択してすべて削除します するとこのように指定の範囲だけの点群のみになりました 範囲指定して点群を取り除く 範囲指定内にくり抜いてもまだもやもやが残っています。 その倍は「Rect」ボタンを押して範囲指定削除を行います 削除したい範囲(今回は上部黄色い点群)だけが独立しその他の点群と重ならない状態にカメラを移動します 「Rect」ボタンを押下すると矩形選択モードになります。マウスをドラッグして削除したい範囲を枠で囲みます 矩形に含まれる部分が選択されるので「Delete Selected Splats」を押下して削除します この作業を繰り返して不要なもやもやを削除します ダウンロード 完成したらExport to > Ply fileからplyデータでダウンロードできます ダウンロードしたplyファイルはPlayCanvas Viewer で表示できます これでブラウザで完結して3D Gaussian Splattingが作製、編集、表示ができるようになりました! 個人的にはこれでHubサービスでも作ってみたいなと思います。

こうなったらいいな羽沢

羽沢バレーの町おこしまであと少し テンションが上ってきたので好き勝手に羽沢がこうなったらいいなという妄想を好きなように書いてみる ※なお素人が根拠や背景情報を考慮せず好き勝手書いているだけなのでご了承ください

コロナやばすぎ

先日から新型コロナウィルスに罹患して色々症状が出ているが、人生生きてきて初めての体験が続いているので記録に残す

あえてこのタイミングではてなブックマークに対応した

やっぱりテクノロジー系のブログの評価指標ははてブかなと思うので。 ブックマークボタンの追加とauthor設定、ついでに眠らせてたはてなアカウントを整備しました ボタンの作成 こちらから作成 サイズは20 x 115で作成 jsの読み込みはheadで実施 head (){ return { meta: [...], script: [ { src: " } ] } } jsが読み込まれて表示されるまでダミーの画像表示が引き伸ばされるのでdisplay:noneを追加 .hatena-bookmark-button{ display:none; } authorを追加 link: [ { rel:"author" ,href:" ] アカウント整備 以後はてブよろしくお願いします!

Nuxt3+@nuxt/contentでブログを作ってcontentをgit submoduleで別リポジトリ管理にする

なるべくお金をかけずに、複数人でコンテンツ管理が可能な静的Webサイトが作りたくなったのでNuxt3の勉強がてら作ってみます。 システム コンテンツ 利用イメージ nuxt3-blogtest-systemの方でNuxt3製Webシステムを構築、contentディレクトリをnuxt3-blogtest-contentからgit submoduleで引っ張ってくる、著者はnuxt3-blogtest-contentだけを操作するイメージ。 手順 Nuxt3の導入 > npx nuxi init nuxt3-blogtest-system > cd nuxt3-blogtest-system > npm install @nuxt/contentの導入 > npm install --save-dev @nuxt/contentnuxt.config.tsを編集 export default defineNuxtConfig({ modules: [ '@nuxt/content' ], dir :{ public: "content/public" } }) pagesフォルダを作成 > mkdir pages > cd pages > touch index.vue > mkdir posts > cd posts > touch [...slug].vue index.vue / [...slug].vueをそれぞれ作成 index.vue <template> <div> <p> here is index.vue</p> </div> </template> [...slug].vue <template> <main> <ContentDoc /> </main> </template> content用ディレクトリを作成 // systemとは別階層で作成する > mkdir nuxt3-blogtest-content > cd nuxt3-blogtest-content > mkdir public > mkdir content > cd content > mkdir posts nuxt3-blogtest-content/content/postsディレクトリにmarkdownファイルを追加 > touch hello.md hello.md # here is hello.md 画像を利用する ![myimg](/img/img.png) //画像を使う場合はpublic/img フォルダにimg.pngという名前で画像を保存 nuxt3-blogtest-system側でnuxt3-blogtest-contentをsubmodule化 > git submodule add content コンテンツを更新した場合は、submoduleをupdate > git submodule update --remote これでnpm run dev もしくは npm run generateするとコンテンツがレンダリングされます。

PlayCanvasを使用してLooking Glassアプリを作成する:Looking Glass WebXR SDKの利用ガイド

demo 実施手順 Looking Glass Portraitの準備 Looking Glass Portraitを用意し、電源とHDMIを接続します。電源をONにすると、LookingGlassのLEDが青色に点滅します。 Looking Glass Bridgeのインストール Looking Glass BridgeはLooking Glass Factoryのウェブサイトからダウンロードしてインストールします。インストール後、タスクバーのLooking Glass Bridge iconをクリックしてLookingGlassをリセットし、デスクトップを表示します。 LookingGlass用のPlayCanvasプロジェクトの作成 PlayCanvasで新しいプロジェクトを作成します。プロジェクトのテンプレートとして、Model Viewer Starter Kitを推奨します。 プロジェクト内でのスクリプトとHTMLの作成 プロジェクト内で、スクリプト(LG.js)とHTML(LG.html)を作成します。 LG.htmlの作成 LG.htmlを以下のように記述します。 import { LookingGlassWebXRPolyfill, LookingGlassConfig } from " const config = LookingGlassConfig config.tileHeight = 256 config.numViews = 20 config.targetY = 0 config.targetZ = 0 config.targetDiam = 3 config.fovy = (14 * Math.PI) / 180 new LookingGlassWebXRPolyfill()LG.jsの作成 LG.jsを以下のように書き換えます。 var Lg = pc.createScript('lg'); Lg.prototype.initialize = function() { pc.app.xr._available["immersive-vr"] = true; var htmlAsset = this.app.assets.find('LG.html'); var div = document.createElement('script'); div.type = "module" div.innerHTML = htmlAsset.resource; document.body.appendChild(div); htmlAsset.on('load', function () { div.innerHTML = htmlAsset.resource; }); }; Lg.prototype.update = function(dt) { if(this.app.keyboard.wasPressed(pc.KEY_ENTER)){ this.camera.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_LOCALFLOOR); } };アプリケーションの実行 アプリケーションを実行し、エンターキーを押すとLookingGlass用のコンテンツが別ウィンドウで再生されます。そのウィンドウをLookingGlassに移動させ、F11キーを押します。 以上で、LookingGlass用のPlayCanvasアプリケーションが実行されます。 動作原理 webxr.jsはWeb標準のWebXR APIをラップし、オープンソースで提供されています。このライブラリは3Dエンジンに依存せず、カメラの位置を取得し、複数のレンダリングを立体視可能な画像に変換して出力します。 LookingGlass用のウィンドウはマウスイベントの受け取りと最終レンダリングを行います。実質的には、このウィンドウはPlayCanvasのLaunchタブそのものです。そのため、タブを閉じたりバックグラウンドに移動すると、動作が停止します。また、複数のレンダリングを行うため、描画負荷が増大する点には注意が必要です。 問題点 PlayCanvasでアプリケーションを実行すると、webxr.jsにより定義されたcanvasのサイズ変更アルゴリズムがBufferの問題で誤った数値を出力する可能性があります。その結果、画像が意図せずにトリミングされる可能性があります。立体視画像の生成には複数の画像が必要なので、一部の画像が欠落したり黒くなったりすると、立体視が一部見えなくなる欠点があります。この問題は、canvasのサイズをオーバーライドすることで一時的に対処可能です。 まとめ 裸眼立体視技術は以前から存在していましたが、その技術を5万円程度の手頃な価格で利用できるポータブルデバイスに組み込み、しかもWeb技術のみで実行可能という点で、その革新性を感じます。Bridgeの導入などまだ一部制限はありますが、Webとの接続性により、環境構築の手間が減少し、さまざまなAPIとの接続によるコンテンツ開発が進むでしょう。

祝息子3歳!

これを読んで思い出したように書く 2023年始まったと思ったら、もうGW終了。時間の流れが早すぎる ここ一年の彼を取り巻く環境は大きく変わった。引っ越しをして生活圏が変わり、妹が誕生して兄になった イヤイヤしていただけだった子供の姿から、妹を見守る立派なお兄ちゃんの姿に変わった 3歳。なんか一つの区切りのような気がする。本当に大きくなった。 最近彼はお手伝い欲が非常に高い。 中でも料理モチベが高く、親が料理をしているとまず間違いなく「手伝うよ!」と声をかけてくる まだボウルの中身を混ぜたり、ぱらぱらとごまをかけたりすることしか上手にできないが、その興味と優しい心は尊重して大事にしていきたい。 引っ越しして生活がガラッと変わって心配していたが、親なんかよりもずっと適応力が高くて、もうすでに仲のいい友達もできたらしい。 自分とは違うけど、彼にとってはここが地元になるんだな、、、自分もこの土地と親しくしていきたいと思う。 結論。誕生日おめでとう。父も三歳。 誕生日プレゼントは要望のあった大好きなパウパトのおもちゃと、ストライダーをプレゼントしようと思う。 坂の多いこの土地では自転車に乗ることは少ないかもしれないけど、自分の世界を広げる道具として、乗り物には乗れるようになっておいたほうがいいと思う。 では今日もお迎えに行こう

【問題解決済み】stable diffusion web ui コミット 5ab7f21でNansエラー

問題概要 stable diffusion webui v1.1.0の最新コミット5ab7f21をgit pullして実行すると、NansExceptionエラーが発生します。エラーメッセージに従って--no-half-vaeオプションと--disable-nan-checkオプションを追加して実行することで解決する場合もありますが、度々黒い画像が生成される不具合が発生します。 解決方法 解決方法は現時点で不明(未解決)ですが、以下のissueでこの問題が議論されています。 多くのユーザーが同じバグを報告しているため、最新のコミットが公開されると改善される可能性が高いと考えられます。今後のアップデートに期待しましょう。 解決 その後新しいコミットが出ましたのでプルして利用することで解決しています。--no-half-vaeを引数に指定する必要があります

stable-diffusion-webuiで使用しているpythonのバージョンを変更する

stable-diffusion-webuiではpython3.10.6の利用が推奨されています。GitHub issueによると3.11.xでは動作しないようです。また3.10.x未満のバージョンでも動作するようですがxformersが使えなかったりといろいろ制限があったので3.10.6にpythonのバージョンを合わせ変更したところ、ハマったので共有します。 原因 最初のlaunch.py実行時にtorchなどの依存関係をまとめてインストールしますがその際に別バージョンでのインストールしたものが残っている場合、pythonのバージョン変更をするとエラーが出てしまうようでした。 対処法 stable-diffusion-webui\venv を全削除し、再度webui.batを実行することで現在指定されているpythonのバージョンで再度構築してくれます。 ※ venvの中身はなかなかに大きくバックアップを取りたくなりますが基本的に環境に合わせて生成されたファイルなので怖がらず消してOKでした。 手順 pythonのアンインストール > choco uninstall python3 python3.10.6のインストール > choco install -y python3 -version 3.10.6 pythonバージョンの確認 > python -V // Python 3.10.6 venv フォルダをすべて削除 > rm ./venv webui.batを実行 > webui.bat 参考

【マジカルミライ2023 プログラミングコンテスト】PlayCanvas製リリックアプリ StarterKit - DEMOを公開しました

今年も開催されるマジカルミライ2023プログラミングコンテスト向けに、PlayCanvasですでにTextAlive App APIと今年の対象楽曲がセットアップ済みのStarterKit - DEMOを公開します。

ChatGPTへのアクセスを簡単にする方法

ChatGPTに質問したいと思った際に、chat.openai.comにアクセスしてメッセージを送るまでの手間が少し面倒だと感じることがあります。そこで、キーボードを6回押すだけで簡単にChatGPTにアクセスできる環境を作成しました。以下でその方法を紹介します。 完成イメージ Windowsキー + Rキーを押して「ファイル名を指定して実行」を起動 「gpt」と入力 ChatGPTのウィンドウが開く 手順 1.ChatGPTのWebページにアクセスし、右上の3点リーダから「その他のツール」>「ショートカットを作成」をクリックします 2.ショートカット名に「gpt」と入力して保存します。 3.任意のフォルダを作成し、その中に「gpt」のショートカットを入れます。 ここでは、C:\Users\[username]\Documents\shortcutに保存しました。 4.Windowsメニューから「環境変数」と入力し、「コントロールパネル」の「環境変数を編集」をクリックします。 5.変数「Path」を選択し、「編集」をクリックします。 6.「新規」をクリックし、先程作成したショートカットのパスを追加します。 これで設定が完了しました。 参考

新型シエンタ(10系)にChrome Castを接続する

2022年8月に新型シエンタを契約し、2023年2月に納車してからかれこれ半月ほど乗っています。 すでに500km弱走行しての感想としては、体感としては乗りやすく燃費もいいので非常に良いクルマだなと思います。 今回はオプションでHDMIを選択して、そこにChrome Castを接続して使っているので、その方法について解説します。

PlayCanvasのOrbit-cameraを制御して指定位置にカメラを移動させる

PlayCanvasのStarter Kitで用意されている「Model Viewer Starter Kit」では360°ビューワーを簡単に作る事ができますが、常にインプット情報からカメラ位置を制御しているため、スクリプトやボタンで指定位置にカメラを移動する方法にやや癖があります。 この記事ではスクリプトからorbit-camera.jsを利用した状態で指定位置にカメラを移動する方法を説明します。 これを使うとコンフィギュレーターなどを開発する際に、基本は自由移動でボタンを押したときだけ特定の部品に寄るなどの処理ができるようになります。

ユーザーコードを入れられるようにした

今後講義でこのブログを使う予定なので、任意のJavaScriptコードを実行できるようにした。 {{test}} コード HTML <div> <input type="number" id="a"> <span>+</span> <input type="number" id="b"> <span>=</span> <span id="ans"></span> <br> <input type="button" value="calc" id="calc"> </div> JavaScript document.getElementById("calc").onclick = function(){ let a = parseInt(document.getElementById("a").value,10); let b = parseInt(document.getElementById("b").value,10); document.getElementById("ans").innerHTML = a+b; } cdnからライブラリを読み込んだりも可能 {{chart}} コード HTML <canvas id="myChart"></canvas> JavaScript if(typeof(script) == "undefined"){ let script = document.createElement('script'); script.src = " document.head.append(script); script.onload = function() { createChart(); }; }else{ createChart(); } function createChart(){ new Chart(document.getElementById('myChart'), { type: 'pie', data: { labels: ['A', 'B', 'C'], datasets: [{ label: '割合', data: [20,50,30], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] }, }); }

FTP-Deploy-Actionが突然動かなくなった

健気に毎週弱音も吐かず回り続けていたActionがある日突然動かなくなっていました。 調査したところFTP-Deploy-Actionが動かなくなっていた模様 とりあえずバージョンを確認したところ最新バージョンの4.3.3が公開されていたのでアップデートをしました。 - name: Deploy via FTP uses: SamKirkland/FTP-Deploy-Action@4.3.3 with: server: ${{ secrets.FTP_HOST }} username: ${{ secrets.FTP_USERNAME }} password: ${{ secrets.FTP_PASSWORD }} server-dir: ${{ secrets.FTP_REMOTE_ROOT }} local-dir: dist/ Settingsのkey nameが変わったようです。 ftp-server -> server //デプロイ先のホスト ftp-username -> username //デプロイ先のユーザー名 ftp-password -> password //デプロイ先のパスワード git-ftp-args: --remote-root -> server-dir //展開するサーバーのディレクトリ 展開先の指定がしやすくなったのが良いですね あとは送信中のログもわかりやすくなりました v3.0.0 #=#=# ##O#-# ##O=# # #=#=-# # -#O#- # # -=#=# # # -=O#-# # # -=O=# # # # -=O=-# # # # -=O=- # # # # -=O=- # # # # -=O=- # # # # ######################################################################## 100.0% #=#=# ##O#-# ##O=# # #=#=-# # -#O#- # # -=#=# # # -=O#-# # # -=O=# # # # -=O=-# # # # -=O=- # # # # -=O=- # # # # -=O=- # # # # -=O=- # # # # -=O=- # # # # -=O=- # # # # ############################## 42.5% ####################################################### 76.9% ############################################################# 84.9% ######################################################################## 100.0% v4.3.3 📁 Create: _nuxt/static/pls/tag/php 📁 Create: _nuxt/static/pls/tag/Pixel5 📁 Create: _nuxt/static/pls/tag/PlayCanvas 📁 Create: _nuxt/static/pls/tag/post ... 📄 Upload: _nuxt/static/pls/backnumber/2020-10/payload.js 📄 Upload: _nuxt/static/pls/backnumber/2020-11/payload.js 📄 Upload: _nuxt/static/pls/backnumber/2020-12/payload.js 📄 Upload: _nuxt/static/pls/backnumber/2021-1/payload.js ... 🔁 File replace: backnumber/2020-10/index.html 🔁 File replace: backnumber/2020-11/index.html 🔁 File replace: backnumber/2020-12/index.html 🔁 File replace: backnumber/2021-1/index.html ... 📁 Delete: _nuxt/static/****** ... ⚖️ File content is the same, doing nothing: _nuxt/app.js ⚖️ File content is the same, doing nothing: _nuxt/assets/logos/*********.svg ⚖️ File content is the same, doing nothing: _nuxt/assets/logos/5296501_*********.svg ⚖️ File content is the same, doing nothing: _nuxt/assets/logos/5296514_*********.svg ... ---------------------------------------------------------------- Making changes to 1046 files/folders to sync server state Uploading: 15.7 MB -- Deleting: 15.9 MB -- Replacing: 83.5 MB ---------------------------------------------------------------- 新規作成されるディレクトリ、変更されるファイル、変更のないファイル、削除されたファイルが検出されたあと、アップロード、リプレース、削除がそれぞれ行われます。 nuxt generate時のファイル名固定、_nuxt/static/以下のハッシュ名固定をしておくとデプロイが高速化できそうです。

11/28を過ぎて停止したHerokuアプリを課金して復旧した方法

11/28でHerokuの無料プランがなくなりました。 いままで動かしていたHerokuアプリが動かなくなったので自分の運営しているアプリも影響を受けていました。 本来であれば11/28までにやらなければいけなかったのですが、少し遅れてしまったので急ぎ対応した記録です。 Step1.Ecoプランに加入する 月額5USDです account > Billingからいけます Step2.ダッシュボードからDynoタイプを変更する 有償にした時点でEcoが選択されていると思います。 Step3. 停止を解除してアプリを再開する こちらのトグルをクリックして再開できます。 これでアプリを復旧できました。

ncmbのREST APIでエラー{"error":"12.16.1 is invalid version","status":400,"code":"E400001"}が出る

ncmbに対してRESTでAPIを投げたときにエラー {"error":"12.16.1 is invalid version","status":400,"code":"E400001"} が出る エラー一覧 にそのようなエラーはない 結論: RESTではなくREST先で読んでいるスクリプト実行時のエラー 対応:バージョンを12.16.1からlatestに変更してあげればOK

PCからGoogleホームアプリを使いたい

Googleホームアプリ 便利ですよね。 家も照明やエアコンのIoT化をNatureで、後は子供の見守りカメラをNest Cameraでやっていたりします。 とても便利なのですが、夜仕事をしていたりすると、PCでこの画面が見えたらいいのになって思うことがあります。 いくつかの方法があるのですが、いろいろ調べて良いと思った方法、悪いと思った方法をそれぞれ紹介します。

反Apple信者の私が移動用のメインマシンをiPad Pro(第5世代) 12.9インチに変えてからしばらく経ったので現在の構成を紹介

PCはWindows、スマホはAndroid(Pixel)と、脱Appleを過去掲げていた自分ですが、移動用のメインマシンをiPad Proに変えてからしばらく経ちました。 気づいたらかなりやりやすい環境まで整えて来ていたのでWindows中心で貼るけどiPad Proを移動用のメインマシンとして考えている方向けに現在の構成について紹介します。

Thunderbirdのトップに格言を表示してメーラーを開くたびにテンションが上がるようにした

背景 ずっと利用していたWindows標準のメーラーの調子が悪くなっていたので、心機一転懐かしいメーラーであるThunderbirdに乗り換えました。 Thunderbirdはmozilla製で、ブラウザ技術を使って作られています。 設定を見てみると、このウェルカムページを変更する項目を発見しました。 このURLを書き換えると好きなWebページをThunderbird起動時に表示することが出来ます。 ずっとウェルカムページが表示されているのもつまらないので、ちょっと面白いページを作って設定してみました。 作ったもの アクセスするたびに格言を表示するWebアプリを作りました 格言データベースはスプレッドシートで管理しています。好きなものを追加するだけで、ランダムに表示される仕様になっています。 作り方 スプレッドシート + GASで構築しています。 GASでスプレッドシートからランダムに一つ格言を取得して、doGet()で表示します。 function getQuotesAtRandom() { const ss = SpreadsheetApp.getActiveSpreadsheet(); let sheet = ss.getSheetByName('Quotes'); let lastrow = sheet.getLastRow(); let id = getRandomInt(2,lastrow); let word = sheet.getRange(id,1).getValue(); let author = sheet.getRange(id,2).getValue(); return [word,author] } function getRandomInt(min, max) { max = max + 1; min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive } function doGet(e){ var output = HtmlService.createTemplateFromFile('page'); let wa = getQuotesAtRandom(); output.word = wa[0]; output.author = wa[1]; return output.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); } 表示するWebページを適当に用意して表示します。 <!DOCTYPE html> <html> <head> <base target="_top"> <link rel="preconnect" href=" <link rel="preconnect" href=" crossorigin> <link href=" rel="stylesheet"> </head> <body> <h1><?= word ?></h1> <h2><?= author ?></h2> <style> .warning-bar-content{ display:none; } h1{ font-family: 'Noto Serif JP', serif; letter-spacing: 2px; color:white; } h2{ text-align: right; padding-right: 10%; font-weight: 300; color: gray; font-size: 1.3rem; } body{ text-align:center; margin-top:150px; background-color:rgb(46,46,46); } </style> </body> </html> GASが生成するWebアプリのURLに直接アクセスすると、 このアプリケーションは、Google ではなく、別のユーザーによって作成されたものです。 という表示が出てしまいます。 これを表示させないために、一枚適当なhtmlを用意し、iframeでGASのWebアプリを呼び出すようにする必要があります。 今回は自前のサーバーを使いましたがGithub Pagesとか使えば完全サーバーレスでも全然行けると思います。 最後にThunderbirdに設定すると、開くたびにランダムで格言が表示されるようになりました。 これでメールをチェックするたびに気が引き締まるような環境ができあがりました。 他にもいいアイデアがあれば実装したいと思います。 参考

Power Automate Desktopで無理やり時間指定実行を実装したときは気をつけよう

Power Automate Desktopが最高に便利です 無料版でだいたいのことができるので重宝しています。 ただ無料版だと時間指定実行が出来ないのですが、力技で時間指定実行を実装することが出来ます。 ですがその方法を取ったときに問題が起きたので記事にします

PlayCanvas Editor APIで面倒な作業を自動化する

この記事は「PlayCanvas | GWアドベントカレンダー」8日目の記事です。 PlayCanvas Editor APIが便利です。 ユーザーマニュアル(触りはこちら) ドキュメント(詳しく調べる場合はこちら) 本記事ではGUIでやると超大変だけどEditor APIでやると楽勝になることを紹介します

Windows11にしたらVSCode + Gitがなんかおかしい

過去記事 症状と背景 パスフレーズ聞かれる、VScodeだと動かない、pushできない、などなど不具合多数 Windows10 -> 11 に変えたけど、それが原因...? 原因 ssh-agentが死んでいた 対応 Powershell管理者権限 Set-Service -Name ssh-agent -StartupType Manual Start-Service ssh-agent ssh-add再登録 C:\Users\ajishixo>ssh-add C:\Users\<username>\id_rsa Enter passphrase for C:\Users\<username>\id_rsa: Identity added: C:\Users\<username>\id_rsa (C:\Users\<username>\id_rsa) 参考記事

Windows11でダークモードにした際にChromeでCSSが変更されて見えづらくなってしまう問題を解決した

Windows11で色設定からダークモードを選択した際に、ブラウザ側でもその情報を読み取りダークモード表示してくれる仕様があります。 TwitterなどでもWebアプリ側に設定はなく、OSでのカラーモードが継承されています。 ただ、Webサイトによっては以下のようにダークモードで背景色や文字色が勝手に書き換えられ、たいへん見づらくなる現象があります 左:ダークモードでCSSが書き換えられ黒背景になっている 右:通常の表示 選択すると正しく表示されるため、テキストが消えたわけではない事がわかります。 Chromeで別アカウントであれば起きない問題なのに、特定のアカウントだけ起きる原因は、Adobe Acrobatのchrome拡張が原因でした。 おそらくPDFビューワーとして機能する際にstyleが書き換えられるのが原因かと思います。 拡張機能を無効にすることで普通の表示に戻すことができます。

2022年あけましておめでとうございます

6日立ちましたが改めてあけましておめでとうございます。 昨年は怪我の完治、副業の本格開始、プログラミングコンテスト最優秀賞受賞、奥さん転職からの夫婦フルリモート生活開始などなど比較的良いことが連続した一年でした。 今年もそれが続くよう頑張っていこうと思います。 毎年自分は二字熟語で毎年の標語を決めるのですが、 今年の標語は柔軟にしました 具体的には身体の柔軟性、思考の柔軟性の2つです。 身体の柔軟性: 昨年末から再度のダイエットを決意しまして、現在絶賛ダイエット中です。 これまで何度もダイエット自体はしてきましたが、今回は特に柔軟性を意識しています。 昨年ぎっくり腰が絶えず、一年の20%位は腰が痛い日々を過ごしていたのが理由です。 ダイエットをしたくて運動してもすぐ怪我してしまい、結局やらなくなるという減少が続いており、今回は柔軟を基盤に行っていくことにしました。 昨年12/26より実施して現在10日目くらいですが、毎日朝晩にYouTubeを見ながらストレッチしています。現在は前屈で両手の指先が床につくまで後5cmくらいのところです。 今年中にこれを手のひらがつくくらいまで柔らかくしたいなと思っています。目指せ2022年ぎっくり腰0! 思考の柔軟性: 本業に合わせて副業を開始した昨年でしたが、どちらの職場でも思考の柔軟性が求めらています。 詳しくは書けないですが、今年から大きく組織形態が変化して、これまでの働き方とは全く異なる柔軟性が求められていると感じています。 また、自分は本業では今年で7年目となり、会社内では中堅を少し越したラインとしてカウントされる経験年数に差し掛かってきました。 かつ珍しいことにこの6年間ずっと同じ事業に関わっているので、現在最強に頭が固くなっていると思います。 市場や技術は変化するのに自分はそれに合わせられていないなあと痛感する昨今なので、この大きく変わるタイミングで自分も変わらねばと思っています。 仕事以外でも、夫婦のことやお金のこと、子供のこと親のことなど、いくつも考えることはあるのですが、柔軟に考えて行きたいと思います。 本年もどうぞよろしくお願いいたします。

パリにおつかいに向かわせた白ピクミン2匹が42日間の長旅を追えて無事帰ってきた

ピクミンブルームで海外へおつかいを行かせる方法が話題でした。 過去にフランスに行って撮った写真があったので、 我が家のピクミンにもパリのエッフェル塔までおつかいに行ってもらいました。 2021/11/15 午後8時48分 にパリに向けて白ピクミン二匹が旅立ちました。 このときに算出された時間は42日と2時間でした 出発から2時間が過ぎたタイミングのキャプチャです。甲府付近にいました ここで白ピクミンの移動速度について気になったので計算してみました 白ピクミンは手ぶらの場合、1km 6分10秒のペースで進んでいました。 フルマラソン4時間20分くらいのペースです。 → 計算ミスでした。 往復の平均速度が時速9.73km 1km 6分10秒のペースです。 後述する往路:復路の移動時間の比が5:9なので 往路の移動速度が13.622km/時 1km 4分24秒ペース 復路の移動速度が7.567km/時 1km 7分55秒ペース となります。 手ぶら白ピクミンはフルマラソン サブ3にぎりぎり届かないくらいの速度でした。 そのペースで10000km走っています。 昔ですが自分がランニングしていた頃、1km6分の壁を超えて結構嬉しかった思い出があります。 自分はかなり運動音痴な部類に入るので1km6分は、頑張れば誰でも超えられるけどそこそこしんどいくらいのランニングペースです。 出発翌日朝、ピクミンは隠岐の島近辺を走行中でした。 出発から2日後の午後3時頃、山東半島より中国に上陸しました。 その前には韓国に上陸しているはずですが、見落としていました。 ここから長い長い中国大陸の旅が始まります。 出発から3日後の午後5時、太原市のあたりを走行していました。まだまだ序盤です 出発から8日後、ようやく中国を抜けウズベキスタンに上陸していました。 カスピ海も見えていますね、西アジアを抜けたら、ついにヨーロッパです。 出発から13日後、ヨーロッパに上陸していました。オーストリア近辺でしょうか。 出発から16日後、気づいたらパリからの復路に入っていて、すでにオーストリアくらいまで引き返していました。 パリ到着の瞬間を見たかったのですが、見逃しました。おそらく15日くらいで到達したと思います。 自分のトップスピードを維持して直線でエッフェル塔まで向かうと15日くらいで到着する というどこで使うかわからないようなデータが得られました。 意外と早いですね。 42日の工程のうち、15日で現地に到着したとすると、単純計算で往路:復路=5:9となりました。 帰りはおよそ1.8倍くらいの時間がかかるようです。 ※ツイートの計算が間違っています ここからは復路です 出発から18日目、ルーマニア近辺を走行しています。 復路スタートから3日ですが、まだまだヨーロッパを抜けれません。やはり往路よりも格段に遅いですね 出発から24日目、たまたまカスピ海の上にいました。 このあとは長い長いアジアの旅です。 出発から31日目、キルギスまで来ました。残すところあと中国、韓国だけです。 出発から32日目、ウルムチからようやく中国に上陸していました 出発から42日目、観測をサボっていてふと見たらもう目と鼻の先まで来ていました まるっと42日で帰ってきました。当初のよみ通りのタイムスケジュールで、ピクミンの正確性に驚くばかりです。 またこの旅路で一匹も死んでいないことを見ると、道中にはチャッピーなどの外来生物もいなかったんだと思います。 残り1時間50分。パリまで行ったピクミンがもう東京都内に入ってると思うと感激です。 残り14分、見慣れた道路と埋め尽くされた花が見えてきました。 あと3分、画面のフレームレートがかなりおちています 到着! その瞬間にアプリがクラッシュしました! 再起動後問題なく動きました。当初の予定通り、42日と2時間。 ケロッと渡してきましたが、君らいくつもの国と大陸・海を超えて往復してきたんやで。。。 無事にパリの苗をゲットできました ポストカードはなし。残念 苗の地図も間違いなくパリでした。すごい。 早いとこ友好度を上げてパの字のデコピクミンにしたいと思います。 こうしてパリジャンの黄ピクミンをゲットできました。 11月に送り出して、気づけばもう年末。 ピクミンブルームのこんな楽しみ方もありですね。

JamStackでもアクセスカウンターを実装したい

この記事はmicroCMS Advent Calendar 2021 17日目の記事です。 皆さんの記事を見ていて自分も知らなかったMicroCMSの機能や使い方をしれたので、Advent Calendarはとても好きです。 個人的には@Ryusouさんの1日目の記事で、MicroCMSダッシュボードが知らない間にアップデートされていたことを知れたのが良かったです。 後はPOST入稿の際にリッチテキストをもうちょっとなんとかできると個人的に嬉しいなあ。。。

PowershellのgitではpushできるのにVSCodeのgit(GUI)ではpushできない問題

結論 環境 OS : Windows 10 Git client : Visual Studio Code Git remote:Github via ssh CUI:PowerShell ssh.exe:openssh from chocolatey 背景 2020年のアップデートからhttpsでのGithubへの接続が制限されたので、ssh接続に切り替えてローカルにリポジトリをクローンして運用していた ssh-addで鍵の登録まで終えた 事象 git clone git@github.com:xxxx としてクローンすると、ssh-addで登録したはずなのにパスフレーズを聞かれる(パスが通ると問題なくクローンされる) ssh git@github.com -T を実行すると問題なくGithubと接続できている クローン後のディレクトリをVSCodeのGUIからpushを行ってもPermission deniedになる(パスフレーズも聞かれない) VScode上のターミナルからgit push origin mainを実行するとパスフレーズが聞かれた後に正しくプッシュされる .ssh/configをいくら書き換えても動かない 原因 sshコマンドとgitコマンド内部で呼ばれるsshコマンドが実行ファイルが違うためssh-addされた鍵が共有されない VSCodeのGit Client GUIはパスフレーズを聞く機構がない(鍵が保存されていないと必ずPermission deniedになる) 解決策 gitコマンド内部で呼ぶsshコマンドを、ssh単体で読んだ際の実行ファイルに明示的にパスを当てる C:\Users\<username>\.gitconfigに以下を記述。 [core] sshCommand = C:/Windows/System32/OpenSSH/ssh.exe これでgit cloneでパスフレーズは聞かれず、GUIからのプッシュも問題なく動いた 参考

ピクミンブルームのここが気に入る/気に入らない

ピクミンと私 私は生粋のピクミンファンである。小学生の頃ピクミン2を手に取り、それはそれは数多くのトラウマ楽しい経験をしてきた。ピクミンの続編をずっとずっと待ち続けて、大学生の頃ピクミン3が発売した。わたしは意気揚々と発売日に購入、プレイしたが当時の高揚感を得ることはできなかった。それでも新しいピクミン体験を受け入れ、先日発売されたピクミン3デラックスは人生初プレイの奥さんとともに初心で楽しんだ。 このように自分の人生の半分、いや70%くらいはピクミンでできている。なので自分はピクミンの続編を心待ちにしている。 ある日急にこんなニュースが飛び込んできた。 正直、嬉しくはなかった。Nianticの作る実世界連動のゲームはハマった試しがないし、ただのIPとしてピクミンを利用されている気がしてならなかったからだ。 ただこれまでピクミンとともに過ごしてきた自分として、インストールせずにはいられなかった。そして、インストールし一週間くらい遊んでこの記事を書いている。 プレイしてみて、生活習慣の改善や徒歩のモチベーションとしてはとてもよいゲームで、実際にこの一週間で50000歩ほど歩けている。こんなに身体が調子が良いのは久しぶりだ。 だが、ピクミンシリーズとしてこのゲームを見ることは、やはりどうしてもできなかった。その理由を描いていこうと思う。 ピクミンブルームのここが気に入らない ピクミンに名前をつけれる まず最初に非常に嫌悪感を持った。このゲームではピクミンに名前をつけれるのである。 ピクミンはピクミンであって名前をつける対象ではない。 本来ピクミンは隊列にいないときはオニヨンに大量に入ってるのであって、個性も存在しないため呼称はできないだろう。 なんでこんな仕様にしたのか、任天堂はいいのだろうか ピクミンとの友好度がある 次にこれも嫌悪感がある。ピクミンとの友好度が存在するのだ。 友好度が上がるとアイテムをもってきてくれたりするようになる ピクミンに友好関係を持ってはいけない。ピクミン1の主題歌、愛のうたのフレーズを見てみよう 引っこ抜かれて、あなただけについて行く今日も運ぶ、戦う、増える、そして食べられる ほったかされて、また会って、投げられて でも私たちあなたに従い尽くします <中略> 力合わせて、戦って、食べられて でも私たちあなたに従い尽くします 立ち向かって、黙って、ついてって でも私たち愛してくれとは言わないよ なんと切ない歌詞だろうか。 だが、これが、本来のピクミンとの関係なのである。 ピクミンに名前をつけたり、仲良くなったりしてしまうと 確実に情が出てしまう。私はピクミンに名前などつけたくない。 一緒に戦って、でも儚く散っていって、それでも愛してくれとは言わないよ。 これがピクミンなのである。 ピクミンの花を摘める これは言語道断である。 ピクミンの花を摘むのはフーセンドックリと相場が決まっている。それも厳密にはブレスによって花を散らす”攻撃”であるのだ。 花びらをつかって花を咲かすというコンセプトからよくわからないが、せめてそれがピクミン自身の花であってほしくなかった。 ピクミンが疲れる レベル15に差し掛かると、チャレンジという要素が登場する これは複数人で協力してピクミンを派遣し、巨大なきのこを倒すことで報酬が得られるミッションである チャレンジは一日3回限定なのだが、3回終了したあとにこんな表示がされる。 ピクミンたちは疲れたようです。また明日チャレンジに挑戦しましょう。 ... このチャレンジのデザインは、まあいい。一日何度もやられてはゲームバランスが良くないだろう。 だが、疲れた と書かれるのが非常に気に食わない。 まず、ピクミンは疲れない。仮に疲れたとしても作業の手を止めることはない。 先程の愛のうたの歌詞をもう一度見てほしい。本当にピクミンが疲れてチャレンジをしなくなるだろうか。 ピクミンが活動できなくなる瞬間はある。原生生物が活発化する夜間だ。 その時は宇宙船とともにオニヨンに入ったピクミンは大気圏外に一旦退避する。 このような習性があるのだから、そういうふうな言い回しをしてほしかった。つくづくがっかりした 果実の名前が人類が使っている呼び名になっている これまでのピクミン界は荒廃した人間界だったので、果実はあれど、その呼び名は宇宙人が名付けた名前が一般的だった。 シリソックリやデコリポッコリ、カボストニタリヨタリなど、植物学者でもあるアルフたちが名付けた名前だった。 だが今作ではももやオレンジと言った、現代の日本語の名称が使われている。 これは非常にがっかりした。 だが、ちょっとずつ腑に落ちてきたところもある。 ピクミンは引っこ抜いて最初に見た人物を親だと認識し、ついていく習性がある。 今回のユーザーはMiiである。Miiはメタバースでの自分でもあるわけで、そこでは現代と同じであれば、果物の呼び方も同じなのかもしれない。 果実のエキスをピクミンが吸う さて、果実の名称はまあ納得できそうだが、これは到底納得ができない。 ピクミンが果実のエキスを吸うのだ。 本来、ピクミンが吸うのは果実のエキスではなく大地のエキスだ。 大地のエキスはピクミンの星に住む生物の多くにとって栄養源となるものであり、非常に栄養価が高い。星の地中全体にわたって存在するようだが、もっぱら黄色いゼリー状のものを指す。(※ピクミンWikiより引用) 果実のエキスを必要としているのは、アルフたち宇宙人や、我々人間である。ピクミンは、宇宙人に従って果実をとり、それを栄養源として宇宙人がPNF-404で生きていけるのである。 このように人間とピクミンの関係は、協力関係ではなく、従属関係なのだ。 今作はピクミンに指示を出し、ピクミンが遠くへ果実を取りに行き、回収後エキスの形になって、人間がピクミンにエキスを与え、エキスを吸ったピクミンには花が咲き、それで得られた花びらを使って人間は周囲に花を咲かせることができる。 これであればピクミンは自分で果実を回収してエキスを吸えばいいし、人間は野生のピクミンから花びらをむしればいい。 エキスの形にする工程に人間が必要なのだろうか? 本来ピクミンは種の保存のためにオニヨンに栄養を送り続け個体を増やし続ける必要がある。これは本能的な部分だと思う。ピクミンブルームではペレットもないし原生生物もいないし、ピクミンを生産するオニヨンもない。ピクミンはうわった形でどこかから生えてくるのだ。そのあたりも謎が多い。 ピクミンブルームのここが楽しい 悪いところばかり書くのも良くないので、いいところも書きたいと思う。 歩くモチベーションになるくらいピクミンたちが魅力的 実際にピクミンブルームは楽しい。先述の通り、ピクミン作品としてみると拒否反応がでてしまうこともあるのだが、別のものと思えば、大好きなピクミンと一緒に街を歩ける。超楽しいコンテンツだ。 また、たまにピクミンがポストカードを持ってくるのだが、慣れ親しんだ地元のランドマークとピクミンがツーショットになっているのが、非常にグッと来る。かわいいし、面白い。たくさん集めたくなる。 みんなのピクミンを集結させるチャレンジは興奮する チャレンジはよくできていると思う。実際に突撃はピクミンの中でかなり爽快感のある操作なのだが、実際に大人数で同期的にそれができるのが超気持ちいい。 体力も原作と同じ表示方法で、ピクミンの攻撃方法も一緒で、原作好きとしては非常に嬉しい。 今後のアップデートできのこだけではなくチャッピーとかもでてきて食べられてほしい。 リアル時間+リアル地図をピクミンが歩いてものを運搬しているのが感動する ピクミンの楽しさの一つとして、過酷なことをやらせてそれを見る楽しさがある。 敵を倒さずに前線から物資を運搬させたり、巨大な敵に突撃させたり。 ピクミンブルームでは自分が訪れたところでアイテムを発見して、ピクミンにお使いを依頼することができる。 近場にいるときはすぐ帰ってくるのだが、当然自分自身が動くとターゲットまでの距離は遠くなるため、ピクミンの稼働時間は長くなる。 実際に東京の西側から幕張にお使いを頼んだときの画面がこれだ。 これは非常にグッと来る。40kmという、まあ普通に考えたら絶対歩かない距離を、14時間くらいかけてこのピクミンは往復して物資までもって帰ってきたのだ。 また、道中のピクミンを観察できるのだがそれはまあ過酷な旅で、幹線道路も横断するし川も入るしなんなら海の上をも超えていく。青ピクミンでもないのに。 そういう細かいことは抜きにしても、送り出したピクミンが道中荒波を乗り越えて帰ってくるさまは、非常にピクミン本来の楽しみ方と同じでとても感動する。 もっと遠い距離に行かせたら、どのくらいの時間がかかるんだろうか、、、と想像してウズウズしてくる。これのために北海道と沖縄を往復してもいいなと思える。これはピクミンブルームにしか出せない移動欲求だと思った。 以上、ピクミン愛に乗せて殴り書いたが結論ピクミンシリーズとしては認めたくないが位置ゲーとしては過去最高にハマっている自分がいる。 まあ四の五の言わずに自分が楽しいと思う方法を見つけて楽しむのが正解なのかもしれない。

ページビュー数を表示する

JAMStackでもページビュー数を取得して表示したい! ということで実装しました。 技術要素はこちら Google Analytics Reporting API v4 google-api-php-client MicroCMS patch API Google Analyticsのデータを閲覧権限で取得してきてNuxtのビルド時にごそっとpatchイベントを介してMicroCMS上で確認できるような設計にしました。 最終的にこんな感じでpv数がmicroCMSで確認できます。 あとは通常のJAMStackと同じで取得したpv数を表示する流れです。 実装: まずPHPでGoogle Analytics Reporting APIの導通をします こちらのページを参考に簡単に作れました。 そのあと、今回は記事ページのpv一覧がほしいので、このようにphpを記述しました <?php // Google API クライアントライブラリの読込み require_once __DIR__ . '/google-api-php-client/vendor/autoload.php'; // 鍵ファイルのパス $key_file_location = __DIR__ . '/service-account-credentials.json'; // ビューID $view_id = 'view_id'; // 認証処理 $client = new Google_Client(); $client->setApplicationName('sample'); $client->setAuthConfig($key_file_location); $client->setScopes([' $analytics = new Google_Service_AnalyticsReporting($client); // データを取得する期間 $dateRange = new Google_Service_AnalyticsReporting_DateRange(); $dateRange->setStartDate('2020-09-01'); $dateRange->setEndDate('today'); // 取得するメトリクスの指定 // // PV $pageviews = new Google_Service_AnalyticsReporting_Metric(); $pageviews->setExpression('ga:pageviews'); //ディメンションをpathに設定 $dimention = new \Google_Service_AnalyticsReporting_Dimension(); $dimention->setName( 'ga:pagePath' ); //部分一致"post"でページ全体をフィルタリング $filter = new \Google_Service_AnalyticsReporting_DimensionFilter(); $filter->setDimensionName( 'ga:pagePath' ); $filter->setOperator( 'PARTIAL' ); $filter->setExpressions( [ 'post' ] ); //フィルタを適用 $filters = new \Google_Service_AnalyticsReporting_DimensionFilterClause(); $filters->setFilters([$filter]); // リクエストの作成 $request = new Google_Service_AnalyticsReporting_ReportRequest(); $request->setViewId($view_id); $request->setDateRanges($dateRange); $request->setMetrics(array($pageviews)); $request->setDimensions( [ $dimention ] ); $request->setDimensionFilterClauses( $filters ); // リクエスト実行 $body = new Google_Service_AnalyticsReporting_GetReportsRequest(); $body->setReportRequests(array($request)); $reports_obj = $analytics->reports->batchGet($body); // オブジェクトを配列変数に変換 $reports_array = json_decode(json_encode($reports_obj), true); //一旦整形する $pageviewarray = $reports_array['reports'][0]['data'][rows]; $outputarray = []; //クエリパラメータ付きのパスは同一PVとして加算する for ($i = 0; $i < count($pageviewarray); $i++) { $realpath = explode("?",$pageviewarray[$i]['dimensions'][0])[0]; if(substr($realpath, -1) != '/'){ $realpath = $realpath . "/"; } if($outputarray[$realpath]['pageview'] == null){ $outputarray[$realpath]['pageview'] = intval($pageviewarray[$i]['metrics'][0]['values'][0]); }else{ $outputarray[$realpath]['pageview'] += intval($pageviewarray[$i]['metrics'][0]['values'][0]); } } //JSで扱いやすいようにフォーマット変更 $output = []; for ($l = 0; $l < count($outputarray) - 1; $l++) { if(substr(array_keys($outputarray)[$l],0,6) == "/post/"){ $obj = array('path'=>array_keys($outputarray)[$l],'id'=>rtrim(substr(array_keys($outputarray)[$l],6),'/'),'pageview'=>$outputarray[array_keys($outputarray)[$l]]['pageview']); } array_push($output,$obj); } echo json_encode($output); するといい感じにAPIができました あとはこいつをnuxt.config.jsでビルド時に記事ページにpatchします let pvobj = await axios.get("getpageview.php"); for(let pv = 0;pv<pvobj.data.length;pv++){ try { console.log("try : " + pvobj.data[pv].id); await axios.patch(' { "X-MICROCMS-API-KEY": "your_microcms_key","Content-Type":"application/json" }}) } catch (e) { console.log('Error!!') } console.log("done"); } これでmicroCMSにPV数が記録されます。 問題点: ビルドプロセスにpatch処理を入れたことで、microCMS側で設定しているGithub ActionのRepository dispatchイベントが発火され続け、Github Actionsのワークフロー一覧が大変なことになりました。 POSTイベントで自動投稿する記事があったので、API入稿もCIを走らせていましたが、今後patchを動かしていくのであればCI動いては困るので、API入稿でのCI発火は止めました。 また、このプロセス追加によってビルド時間が1分→5分くらいに伸びました そんなにリアルタイム性が求めらていないデータなので、今後Github Actionsの無料枠を逼迫するようであればPHPにそのままpatchの処理を移管してcronでも適当に週一くらいで走らせる設計に変更しようと思います。

1年

気づいたらこのブログを開設してから1年経っていた。 今までブログメディアはいくつか立ち上げてきて、そのどれも中途半端で閉じてきたけど 100記事以上書いて1年以上コンスタントに続いたは我ながらよくやったなと思う。 おそらくここまで続いた要因としては1.ブログそのものを0から作った愛着、2.ブログ開発のアップデートをしたいというモチベーション、3.日々困らないだけのネタを提供してくれる家族の3つかなと思う。 相変わらずテーマなんてものはないけど、自分が書きたいものを書くだけのブログメディアにしていきたいなと思う。 それと同時に、限定公開やパスワード付き記事、タグページのリッチ化など、色々高機能にしてきたから なんかもっと有益に使ってみたいという思いもある。これからも活用していこう 余談:JAMStack構成でやるにはこの分量ですでにビルド時間が1分、デプロイ時間が15分くらいかかるようになってきた。。。 もっとデプロイが手軽なWebサーバーを用意すればよいのだろうけど、Github pagesは有償にしないとできないし、PHP動かないし、、、 やっぱs3? もうちょっと困ったら考える

LIFF(LINE)ブラウザでwindow.prompt()が期待する動作をしない

運用しているLIFFアプリでwindow.prompt()を使っているのだけれど、ある時から、promptのデフォルトメッセージそのままだと処理が進行しないというバグ報告をもらった。 該当の部分はこちら if (comment = window.prompt("[ユーザー名:" + displayname + "]で申込します。\n\nコメントをどうぞ!","よろしくおねがいします")) { こちらがデフォルトの"よろしくおねがいします"のまま確認ないしはOKを押すとcommentには"よろしくおねがいします"が入力されるはずだが、commentは""のままらしくif文が通らないらしい。prompt画面でメッセージを修正すると、問題なく修正されたメッセージが入る。 検証してみた。 以下のようなhtmlを作成 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LIFF window.confirm test</title> </head> <body> <input type="button" onClick="buttonclick()" value="button"></input> <p>output : <span id="output"></span></p> <script> function buttonclick(){ let comment = window.prompt("LIFFブラウザでwindow.prompt()でdefaultメッセージから変更しない場合、OKを押しても値が渡りません","default message"); if(comment){ document.getElementById("output").innerHTML = comment; } } </script> </body> </html>スマホブラウザから実行すると問題なくpromptの返り値がデフォルトでも表示される {{spb}} だがLIFFで実行した場合、デフォルトのままだと返り値はemptyで、変更して初めて戻り地がメッセージになった {{liffb}} ぜひ手元の端末で以下のURLから試して欲しい LIFFで実行する場合は以下URLをコピーしてLINE上にペースト、初回起動でアクセスを許可して実行可能。 URL: これは通常のWebブラウザで期待する動きと異なった動作なのでLINE側の修正が入ってくれないと困るバグ、、、 ご対応よろしくお願いいたします。 追記 2021/10/17 ここで報告してみた

タグにメタデータを持たせられるようになりました

作ったもの タグページにメタデータを持たせられるようになりました。 現在はdescriptionと画像を設定可能。 URLとかも持たせられるようにする予定。 実装 タグデータのmicroCMSプロジェクトを作成 タグページ生成時にタグデータ一覧になかったらタグを登録 タグがつけられたページ数を確認して変更があればpatchで情報を上書き for(let i=0;i<tagarr.length;i++){ generates.push({ route: '/tag/' + tagarr[i].name, payload :{"name":tagarr[i].name,"posts":tagarr[i].posts,"info":taginfomationarr[tagarr[i].name]}}) if(!configtags.includes(tagarr[i].name)){ await axios.post(' { "X-WRITE-API-KEY": "xxxxxxxxxx","Content-Type":"application/json" }}) }else if(taginfomationarr[tagarr[i].name].postsnum != tagarr[i].posts.length){ await axios.patch(' { "X-WRITE-API-KEY": "xxxxxxxxxx","Content-Type":"application/json" }}) } } infoデータが有ればタグページ上部に表示 <div class="text-center" v-bind:style="'color : #'+ string_to_utf8_hex_string(name+name+name+name+name).substr(name.length,6) + ';'"> <h1>#{{name}}</h1> <p class="text-muted" v-if="info.description">{{info.description}}</p> </div> <div v-if="info.icon" class="d-flex justify-content-center"> <b-img v-bind:src="info.icon.url" style="width:30%;min-width: 200px;"></b-img> </div> 使うかわからないけど、今後学校の授業とかで長期で資料とか載せたい場合とかでも いい感じに使えるようになってきた。

記事が公開された瞬間にツイートする

ようやくつけました。めっちゃめんどくさかった 最終的なymlはこんな感じ # This is a basic workflow to help you get started with Actions name: CI # Controls when the action will run. Triggers the workflow on push or pull request # events but only for the master branch on: push: branches: [ master ] repository_dispatch: types: [trigger] # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: # This workflow contains a single job called "build" build: # The type of runner that the job will run on runs-on: ubuntu-latest # Steps represent a sequence of tasks that will be executed as part of the job steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - name: Checkout 🛎️ uses: actions/checkout@v2 - name: setup node uses: actions/setup-node@v1 with: node-version: '10.x' - name: Cache dependencies uses: actions/cache@v1 with: path: ~/.npm key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} restore-keys: | ${{ runner.os }}-node- - name: install run: npm install . - name: generate run: npm run generate - name: Commit & Push changes uses: actions-js/push@master with: github_token: ${{ secrets.GITHUB_TOKEN }} branch: 'master' - name: Deploy via FTP uses: SamKirkland/FTP-Deploy-Action@3.0.0 with: ftp-server: ${{ secrets.FTP_HOST }} ftp-username: ${{ secrets.FTP_USERNAME }} ftp-password: ${{ secrets.FTP_PASSWORD }} git-ftp-args: --remote-root ${{ secrets.FTP_REMOTE_ROOT }} local-dir: dist/ - name: get title if: ${{ github.event.client_payload.type == 'new'}} id: myRequest uses: fjogeleit/http-request-action@master with: url: " github.event.client_payload.id }}" method: GET customHeaders: '{"X-API-KEY": "${{ secrets.X_API_KEY }}"}' - name: tweet if: ${{ github.event.client_payload.type == 'new'}} run: curl -X POST -H "Content-Type:application/json" -d '{"value1":"${{ fromJson(steps.myRequest.outputs.response).title }}","value2":" ${{ secrets.IFTTT_URL }} ちょうど空きができたので、tweetの部分はIFTTTでアプレットを作成(Twitterのアプリ登録めんどいしね) 投稿されたidを取得するのは簡単だったけど、それを利用してtitleを取得してくるのがだるかった。。。 忘備録: idを指定したstepはsteps.[step_id].outputsで取得可能 JSON.parseはfromJson()でいける 事前にcurlしてそれを利用したい場合、このactionが良かった sawa-zenさんありがとうございました!

夫婦共働きでフルリモート化するので対応策を考える

奥さんが転職活動を終え無事希望していたフルリモートの企業に就職した これまでも申請すればリモートが可能な職場ではあったのだけど、会社の方針として出社が前提であるような体質であり、本人としては申請はかなりストレスのように感じていた様子。 今回の企業はコロナ前からリモートを推奨していたくらいリモート文化が根づいている企業で、聞くところによるとオフィスは閉鎖されているというレベルの徹底っぷり。 これにて晴れて念願のフルリモート夫婦となったわけだ。我々夫婦は基本的にいつも一緒に行動するくらい仲の良い夫婦なので純粋に嬉しい。一緒にお昼も食べれるし家のこともできる。素晴らしい。 だが夫婦両方のフルリモートにはいくつかの弊害もあるらしい。軽く調べてみると以下のような記事が見つかった。 ストレスやイライラは、まあ一旦おいておくとして。 仕事部屋の問題は大きな問題である。 これまでも夫婦どちらもリモートである日は存在したが、お互いのMTGがかぶった瞬間だけ面倒だった。 我が家は2LDKなのだが、一室6畳を仕事部屋としており、二人机を並べてなるべくそこ以外で仕事はしないポリシーにしている。 これは自分のポリシーなのだが、小学生の頃に家庭科で習った寝食分離という概念は非常に重要だと思っており、また追加で就寝食分離が一番好ましいと思っているからだ。 仕事部屋と食事する部屋と寝る部屋が一致してしまうと、自分はスイッチのオンオフが正常に働かなくなり、仕事をしすぎるもしくは仕事をしなさすぎるという状態になる。 なのでリビング、寝室、仕事部屋と分ける事が重要だと思っているし、仕事が終了したあとには仕事部屋には立ち入らないことを徹底している。 だが夫婦リモートでMTGがかぶると、どうしてもマイクの音がそれぞれの発声を拾ってしまうため、部屋から離れざるを得なくなってしまう。そういうときは自分か奥さんの重要度が高いほうが仕事部屋に戻り、もう一方は寝室かリビングで仕事を継続するといった形で対応していた。 先述の通り自分は仕事部屋以外で仕事をすることは好ましくないと思っている(たまに屋外でしたりするリフレッシュは別)のでこの移動すらも排除したいと思った。 だが自分が聞こえてしまうのもまずいし、マイクを通して同僚に聞かれるのはより問題だと思ったので、防音の改善に着手した。 結論今回は色々考えたが、ピアリビングの防音カーテン コーズを利用してみることにした 大体お家の防音対策を調べるとこのピアリビングがヒットするんだが、工事費や手間を考えると、カーテンが一番コスパが良いだろうという結論に至った。 具体的には横並びになっている机同士の間に少し感覚を開けて、その間に突っ張りカーテンレールを配置した。 突っ張りカーテンレールはこちらを購入。カーテンレール上部の隙間を狭くできることが決め手。 これより低価格帯のものもあったが上部が空いているものが多く、それでは防音効果が得られないためこちらの商品にした。 また、我が家は賃貸なので非破壊である点も魅力的である。 届いて組み立て、問題なく配置ができた。やや突っ張り力は申し分ないが壁紙や床材に対してグリップ力が物足りなく、息子の攻撃やルンバの突進などで滑って転倒する可能性もありそうだったので、別途耐震ジェルを購入。壁や天井との間に挟むことで防御力をアップした。 レールを設置してから計測しコーズをオーダーカーテンで購入。最終的にサイズは250 * 230 となり、6.2万円程度、レールやその他の部品と合わせて8万円程度の出費となった。 コーズ自体は高い音の吸音遮音効果が高く、人間の話し声のカット力が高いそうなので楽しみ。到着後、ありとなしで音量を測定し、この記事に追記する。 追記 2021/12/3 夫婦でのリモート生活が始まってから1ヶ月半経った。 防音対策はというと、結論から言うと防音カーテンは使っていない。というか外してしまった 理由として 性能としてそこまでではなかったこと いちいちカーテンを引くことが面倒だったこと カーテンを設定したことによって採光の問題が発生したこと カーテンよりも良い音対策ソリューションを発見したこと がある 性能としてそこまでではなかった 防音カーテンを引いて、カーテンレールの上部も吸音材で塞いだが通常時20デシベル、通話時最大で40デシベルくらいは聞こえた 集音性の高いマイクを使っていたら普通に入る音量だった。防音ブースほどの遮音性ははっきり言って全然なかった いちいちカーテンを引くことが面倒だった MTGは突然始まることも多い、そんなタイミングでカーテンをちまちま引くのは無理だった またカーテンを走らすことで挟んでいるだけの吸音材がぼたぼた落ちてくる。全然だめ カーテンを設定したことによって採光の問題が発生した 当然だが蛍光灯の光を遮ったので自分のワークスペースは証明を別途用意する必要になった。エアコンの風も妻の方へ届かなくなった。 ぜんぜんだめ カーテンよりも良い音対策ソリューションを発見したこと これが一番の決定打になった。まず今まで使っていたマイクが無指向性でかなりの高精度だったためガンガン環境音が入っていた。 ノイズキャンセリングも試したが、ソフトウェアでの処理は限界があった。だがハードウェアで考えれば、単一指向性にすればよいということを調べて知った コンデンサマイクではなくダイナミックマイクがよいと言うのを見て調べたがオーディオインタフェースが必要だとかなんだとかでめんどくさがっていたら、 ふとコールセンターのイメージが浮かんできた。あれ?コールセンターの人たちは横並びでなんであんなに音を気にせずハンズフリーで喋っているんだ? この気付きからヘッドセットを選択することに。ポイントは単一指向性。 結論自分はLogicoolのPRO Xを購入。Blue VO!CE対応なのが決め手。エクスパンダー/ゲートをかなり高めたら自分の声以外全く聞こえなくなった。自分が喋っている最中に机の上で爆音でYouTubeを流すと気持ち音が入るくらいの音量になった 妻の方はJabra Engage 50を購入。調べたところこっちはハードウェアが神がかっていてほぼ外部音を取り込まないらしくコールセンターでは必需品らしい。 地味に嬉しいのが通話中だけLEDが赤色に点灯し、今話しかけてはいけないことがわかる仕様になっている。これは隣にいる身からするとありがたい。 また、ヘッドセットで耳を密閉してしまうことで隣で話している声自体も聞こえないようになった。完璧だ。 防音カーテン代は無駄になってしまったが、この形で一旦落ち着いた。 カーテンは以後部屋を区切りたくなったときとかに使おう。

マジカルミライプログラミングコンテスト2021に今年も応募した

マジカルミライプログラミングコンテストが今年も開催されるので早速開発して応募した 今年はメインビジュアルが左さんなので気合が入る。みーまー時代から好き。グッズが欲しい。 もうGithubプッシュ済み、YouTube投稿済み(限定公開)、応募済みなのだがまだ非公開。 前回の作品と反省はこちら 前回の反省を活かしきれたか、振り返ってみる ・テンポに合わせてもう少し動きをつけたかった これはできたと思う。ビート情報は使わなかったけど、要素を絞ることで楽曲にマッチした演出ができた ・画作りしたかった これは完璧。今回ちょこっとお金も使って、いい感じの見た目が作れたのでぜひ見てみて欲しい。 ・インタラクティブ性をもっと出したかった これも行けた。でも解説しすぎるのはナンセンスで、プレイヤーに感じ取って・考えてみて欲しいので、そういうふうなエッセンスを散りばめてみた。 体験してくれた妻いわく、「胸がギューッとなる」とのことだったので、多分上出来。 正直、いい線まで行ってくれるんじゃないかとワクワクしている。 今年は昨年に比べて2ヶ月弱前倒しなようだ。早く自分の作品が発表されているところを見たい。

microCMSにプリセットで入っているimgixを利用してお手軽に動的OGPを設定する

Qiitaとかである記事のタイトルなんかをOGPに入れ込んでシェアした段階でわかりやすくなるあれです 動的OGPを作成する手続きとしてはいくつかあるんですが、大きく分けでサーバーサイドで画像を作成するもの、image CDNを利用していい感じに作ってもらうものの2種類があります。 VOXELCANVASなんかはモデル作成後にphpで画像化してimage CDNに保存して、最後にimage CDNでロゴとblendするというハイブリッドな方法をとっています。 このブログも今まで記事ページは動的OGPを噛ませていなかったので、そういえばimgixとmicroCMSがパートナーとなったことだし、もしかしたら超簡単にできるんじゃね?ってことで挑戦してみました 手順を解説します。 まず最初に動的OGPのベースとなる画像を作成してmicroCMSにアップロードします アップロードした時点でimgixの機能が使えるようになるので、テキストなんかを自由に入力できます {{image}} あとはこれをOGPとしてNuxtで設定してあげるだけです。 head (){ return { title : this.title + " | ", meta: [ { hid: 'description', name: 'description', content: this.body.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'').substr(0, 99)+"..." }, { hid: 'og:title', property: 'og:title', content: this.title + ' | 空想は世界を包み込む' }, { hid : 'og:image', property: 'og:image', content: " { hid: 'og:url', property: 'og:url', content: ' + this.$route.path + "/" }, { hid: 'og:description', property: 'og:description', content: this.body.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'').substr(0, 99)+"..." }, ] } } 以上で動的OGPが設定できます。 imgix周りの環境構築をすべてmicroCMSがやってくれるのでとても楽でした。 今回は1行で実現したので楽でしたが複数行にする場合は少しややこしくなるようです。 →対応したので追記しました また、このブログでも何回か紹介しているimagekit.ioでは選べるフォントが少なめなのでまだimgixのほうが良さそうです。 2022/08/10追記:複数行に対応しました blendで複数行もワンラインでできることに気づき、対応しました。 {{imagemul}} og:imageを以下のように変更しています。 { hid : 'og:image', property: 'og:image', content: "

actions-js/push@masterでのデフォルトブランチがmasterからmainに変わっていてCIが動かなくなっていた

ある日突然CIが動かなくなった このCI自体はこのブログシステムのJAMStackアーキテクチャ内で利用していて、ブログシステムのアップデートと記事の更新によるトリガでCIが動くような仕組みになっている。 triggerと書かれたworkflow runが記事の更新によるものでソースコードについては編集を加えていないため、CIが動作しなくなるのはなにかのライブラリのはず ということで調査を行った 失敗したCIのログがこちら エラーが出ているActionはこちら エラー箇所のログはこちら Run actions-js/push@master with: github_token: *** author_email: github-actions[bot]@users.noreply.github.com author_name: github-actions[bot] branch: main directory: . Started: bash /home/runner/work/_actions/actions-js/push/master/start.sh Push to branch main [master 856abcb] chore: autopublish 2021-08-08T14:39:20Z (中略) To ! [rejected] HEAD -> main (fetch first) error: failed to push some refs to ' 原因はbranch: mainの箇所 ドキュメントを読んでみると、Inputsの中のbranchはデフォルトで'master'を参照していると書いてあったのだが、Destination branch to push changes とあるので、デフォルトブランチを参照するという意味とも取れる。ややこしい。 まだ自分の管理しているリポジトリではmasterからmainへの移行がすすんでいなかったため起きたエラーだった。以下のように修正し、問題なく動作することが確認できた。 - name: Commit & Push changes uses: actions-js/push@master with: github_token: ${{ secrets.GITHUB_TOKEN }} branch: 'master' #追加

Webサイトの変更を監視してLINEに即通知を行うシステムを開発・提供しています

Webの変更を監視して、変更があった場合即LINEへ通知する仕組みを開発・提供しています。 ECサイトでの商品の確認や、トレードサイトなどでのレートの変更確認、ブログやメディアなどで最新記事が公開された瞬間にすぐ情報を得ることができます。 現在coconalaで提供させていただいております。ご興味がある方はこちらからご連絡ください。 技術的にはGoogle スプレッドシート + Google Apps Script + LINE notifyで開発しています。 Webサイトの確認したい箇所をGASのトリガー機能を利用して定期的に監視、スプレッドシートに保存します。 監視内容とスプレッドシートに記録された内容が違った場合、LINE notify経由でLINEに送信するシンプルな設計です。 納品はGoogleスプレッドシートの管理者切り替えで行いますので、Googleアカウントがあれば簡単に受け取り、利用開始可能です。 手動でのスクレイピングサービスは多くありますが、自分の代わりに定期的に確認し、変更があるときだけ送ってくれるような自動化ツールとしては 面白いと思います。ぜひ低コストでWeb監視したい場合はお声がけください。

結婚して良かった事の1つは、記念日が増えることだ

もともと、6月が大嫌いだった。 理由はのび太くんと同じで、祝日がないから。GWが終わった絶望感と、梅雨のジメジメが重なるのも相まって好きになれるわけなかった。 でも、今は好きだ。理由は記念日ができたから。 今では6月に入った瞬間奥さんの誕生日を盛大にお祝いし、父の日にもパーっとお祝いして貰える。最高の月だ。 今日は父の日ということで家族でしゃぶしゃぶを食べに行った。コロナ禍で7:30がラストオーダーなので、5時からの食事。いつかこれも思い出になるだろう。 その後に花束とお手紙、似顔絵のプレゼントをもらった。 とても嬉しかった。父になってもう1年以上経ったんだなあ。 親父にも父の日のプレゼントを渡そう。親父へのプレゼントは毎回悩んでいたのだが、いつからかセブンスター3箱が定番になっていた。母にはコーヒー。嗜好品で喜んでくれるのはありがたい。 本題に戻る。今日お祝いされて思ったが、結婚、子供の誕生と人生が進んでいくと、記念日が増えていき、お祝いする日が増えてきて、気づいたら毎日がハッピーな日々の連続になっていく。 自分の誕生日も結婚してから意識するようになった。やっぱりお祝いしてくれる人がいるっていうのはとても嬉しいし、自分ひとりだったら祝う気にもならなくなってくる。 そうして昔嫌いだった月も、気づいたら好きな月になってくる。家族を持つ、大切な人が増えるということは、大切な日も増えるということなのかな、とおもった2度めの父の日だった。 自分一人では今日という日をお祝いすることはできなかった。妻と息子へ、自分を父にしてくれてありがとう😄

生活の軸を朝方にシフトした

自分はなるべく7時間以上寝ないとベンチマークが下がる人間なのだけど、どちらかというと今までは夜型で、21時くらいからパフォーマンスが上がってきて27時位に眠くなって朝11時に起きる、みたいな生活が馴染んでいた。 もともと子供の頃は親が共働きで早く出ていってしまう家庭だったため6時に叩き起こされて朝食を取り、7時に親を見送り8時に登校するような生活をしていた。 この場合7時から8時に空白の1時間が生まれ、特に勉強したり運動したりするような真面目な少年じゃなかった私はだいたいこの時間で二度寝してしまい、学校にいつも遅刻していた。7時起きならいいのに、といつも思っていたが家の方針は変わらなかった。 この記憶が強いため、いつか自分は朝起きなくても良い生活に憧れを持ち、朝起きなくても問題ない仕事につこうと思った。結果として朝弱い人が多いエンジニア職で裁量労働制の職場に就職できたので、社会人になってからは朝9時に起きれば全く問題ないし、最悪11時に起きてもそこまで迷惑をかけないようなポジションまでつけていた。 そこから何年かたったが、今は朝5:30に起きている。それには理由がある。 まず、昔のように夜にブーストをかけることができなくなった。今でもコードを書いてたりするとコーディング・ハイになって時間を忘れてプログラミングをしていることもあるのだけど、昔のようにガーッと寝たら回復するような身体じゃなくなってしまい、翌日にものすごく響くようになってしまった。 学生時代はそれこそ麻雀で二徹なんかしたこともあったが、睡眠0では間違いなく身体のどこかに不調がでる。もう無理はできない気がする。 そしてもう一つ大きな理由がライフスタイルの変化、具体的には子供の存在だ。 まずうちの一歳児は誰に似たのかめちゃめちゃ朝方であり、いつも大体8時前には寝て5時頃には起きる。起きてもいい子に一人で遊んでるような余裕はないためだいたいぐずり始め、周囲を散策し始める。 基本そこで妻が同時に起床し、面倒を見ていて自分は寝ていた。 が、妻は7時に出社してしまうため必然的に息子と自分だけの時間が生まれる。この時間は今まではタスクというタスクはそこまでないので、自分は半分寝てて半分起きているような感じで息子に命の危険がないかくらいを見守っている。 ただ実際着替えさせたりおむつを変えたりくらいはしないといけないので7時後半から活動を開始し、一日がスタートする。 しばらくこういった生活を続けていたんだが、やはり息子がぐずっていると当然熟睡はできないし、命の危険はないにせよ自由な息子を放置していてやや危ない場面にも遭遇したため、あまり良い朝の時間の過ごし方ではなかった。 そこでもう思い切って生活を朝型に100%シフトすることに決めた。まず息子と同じく朝5:30に起き、顔を洗って口をすすいで、ラジオ体操第一を妻と一緒にやる。 早朝のラジオ体操だが、ドラゴン桜2に感化されて始めたがこれがすこぶる良い。まず序盤の伸びの時点で異常に気持ちいい。身体の筋肉がほぐれていきスッキリする。 それ以外は朝食を食べることくらいしかまだルーチンとしてはないのだが、せっかく朝から活動して時間がたっぷりあるので、せっかくなら継続してなにかに取り組みたいと思っている。なにかおすすめの朝活があれば知りたい。 結論、自分が望んだ手にした遅くまで寝てる生活は数年しか続けられなかった。新しい家族を持ってから、自分のリソース(経済的、肉体的、etc)は当然自分にすべて注げなくなる。むしろ自分に割くリソースなんて一部で、基本的には家族に割くことになる。 そう考えると、自分のリソースをすべて自分に投入できた時代はとても貴重だった。今は時間の許す限り勉強したり研究したりすることもできないし、麻雀で徹夜することもできなくなった。 ただ別に悲しくはない、効率的に生きないとなと改めて思った。そのためにも今後朝の時間を有効活用しようと思った。

nuxt.jsでテキストボックスクリック時にテキストを全選択する

URLを発行したりしたときにコピーさせやすくするためのアレです こんなふうにテキストボックスを用意します <b-input ref="selectablebox" readonly id="inline-form-input-name" value="コピーしたいテキスト" @click="select($refs.selectablebox)" ></b-input> methodsにselect()を作成します select : function(target){ if(target.$el){ target.$el.select(); } } 以上。 注意点: refを利用してその後に$elで参照しているため Vueコンポーネント化されたDOMに対してのみしか動きません。 なのでデモではbootstrapのb-inputを利用しています。

モンハンはゲームじゃなくてSNSだと思ってるという話

モンハンライズ楽しい 2ndGでデビューしてから早13年、最新作のライズももれなく楽しんでいる。 自分はモンハンはゲームではなくSNSとして楽しんでいる側面があって、それが理由で長続きできているのだと思う。 高校生の頃はクラスの95%がハンターで、授業中に集会所にアクセスすると集会所20くらいまで満室だった思い出がある(授業中のプレイはよくないよ!)。 帰宅後もPS3経由でアドホックパーティを繋いで朝まで狩っていた。このために父親にお願いして壁に穴を開けて有線を通したのが懐かしい(PS3のアドホックパーティではPS3-PSPの通信に無線wifiのポートを利用するためPS3とインターネットの通信は有線LANを利用しないといけない) 思い返すと、ゲーム単体として遊んでたというよりかは、ギルドカードのパラメーターを自分好みに極めたり、タイムを競って共有したり、ただだらだら別の話をしたいがために口述としてモンハンを利用したり、ゲームそのものを遊んでたことは少ない気がする。 事実友達が一緒にやっていたからここまでハマったんだろうなあと思う。 MHWまでなると、もはや通話を繋げるために一狩り行くような感じになっていた。その頃にはもう社会人になっていて、ゲーム系の学科だったこともあり、一緒にプレイする人が、SIEに就職したり、カプコンでモンハンを作っていたり、気づいたらとても豪華なメンバーになっていたのがとても感慨深かった。 そして、今作ライズももれなく楽しんでいる。和風テイストなのが自分が好きだった3rdみを感じてとても嬉しい。新しいプロモーションが公開されたときには、正直毎回そこまで感動はしないのだが、買った人が周りに増えてくると、気づいたら自分も買っていたという状況になる。これこそが、ゲームとして期待してゲームとして楽しんでいるわけじゃなく、みんながやってるからやろうといったような、SNSとしての側面が大きいんじゃないかなと思う。 かけりむしとか操竜とか、ガルクとか、 正直昔のモンハンと比べるとハンターがどんどんスタイリッシュに強くなっていて、懐古厨の自分としては昔のどんくさいハンターのほうが良かったなあなんて老害めいたことを言ってしまいそうになるのだが、 自分はゲームとしてよりかはSNS、コミュニケーションツールとして楽しんでいるから別にそこはどうでもいいのだ。事実作り込まれててプレイし始めたら楽しいわけだし、なんの不満もない。 さて、放散弾ライトのビルドがどんどんいい感じになってきた。ナルガの延髄がほしい。 みなさんも良ければ一狩り行きましょう

痔瘻日記:完!

本日の通院にてシートンが抜け、無事完治となりました。 深部複雑痔瘻(Ⅲ型)闘病記もこれにて終了。 振り返ってみる: 2020.7.26 肛門周辺の違和感 2020.8.8 発熱 38.5 2020.8.11 地域の肛門科受診 原因特定できず 2020.8.12 中規模病院受診 CTにて肛門周囲膿瘍発見(深部) 2020.8.12 - 15 抗炎症剤投薬 2020.8.15 改善見られず、緊急入院 緊急ドレナージ手術(1回目) 2020.8.17 改善見られず、造影CT実施、骨盤内に進行する膿瘍と反対側にもう一つの膿瘍発覚 再ドレナージ手術(2回目) 2020.8.18 血液検査の結果が大幅改善 2020.8.20 退院 2020.8.24 ドレナージ完了、中規模病院通院終了 肛門周囲膿瘍+骨盤内膿瘍治療完了し痔瘻根治手術へ 2020.8.28 痔の専門医初受診 2020.9.1 MRI 2020.9.11 術前説明 Ⅲ型深部複雑痔瘻が発覚。大規模な切開開放術とシートン法での治療が決定 2020.9.16 入院 2020.9.17 痔瘻根治手術実施前の腰椎麻酔がうまく入らず、下半身麻酔負荷となり後日全身麻酔での手術に切り替え 2020.9.18 一度退院 2020.10.5 入院 2020.10.6 全身麻酔での痔瘻根治手術 完了 2020.10.11 退院 2020.10.23 通院 2020.11 以降 1ヶ月に一度シートン締め直し(6回) 2021.5.7 処置にてシートン脱落 根治 長い戦いだった。。。 痔瘻で苦しむ人の参考になれば幸いです。 闘病記はこちら

痔瘻系YouTuber「痔主チャンネル」を開設しようかな

表題通り(出落ち) いや、痔に特化したYouTuberって見たことないし、 おしりの病気ってギャグかシリアスかで言ったら圧倒的にギャグだから大げさにならない人のほうが多いし、 肛門外科ってまだどうしても慣れてない人からしたら行きづらい印象あるし でもほっとくとやばい病気に繋がりやすいのも肛門の病気なわけで この事実を伝えるのは重要な気がする 特に若者!男子! 彼らはおしりの病気になりやすい 痔瘻は若年で急激に進行するパターンもある 合併症としては筋繊維に感染症が広がればフルニエ症候群だし痔瘻が進行すれば痔瘻癌でお尻から排便できなくなるし、若いとクローン病とかの疑いも出てくるしで、とても怖い。 予後不良な病気は早く直したほうがいいのにしない人が多いのもこのあたりの特徴なんだろうな。 ということで、需要はありそう。 iPad proの新型を買ったので、それが届いたらやり始めようかな。

祝🎉息子一歳

息子が1歳になった。今日の催しはお昼から開催して、寿司パーティ、一升餅(の代わりにお米)、スマッシュケーキ、バースデープレゼント、選び取りと目白押しだったが全て完了し大満足で息子は寝た。 選び取りカードで息子が選んだのは「弁護士」 我が息子ながらいいチョイスだと思う。弁護士になって困ったときはパパを助けてほしい。 にしても、1年。長かったようで早かった。 去年の今頃もコロナだった。緊急事態宣言は最初の発令で、みんなまだしっかり自粛していた。 希望していた立ち会い出産は叶わず、自分は前日から入院していた妻のことを思いもんもんとしながら寝ずにプログラミングしていたのを覚えている。 結果初産ではありえないくらいの安産で生まれてきてくれた息子ももう1歳。世の中はコロナでめちゃくちゃになって、1年たったが何も変わってない。でも息子は大きく変わった。 最初は何もわかってないみたいな感じだったのに、今は自我がどんどん強くなっていて、やりたいこと、嫌なこと、好きなご飯、今何をしたいか、言葉はなくても手にとるようにわかるようになってきた。 思えば首がすわる前はうつ伏せのとき顔をべちょーと地面につけて泣いていたし、はいはいができる前は飛行機のポーズをして前に進もうとしていたが、進むわけもなく疑問に満ちた顔をしていた。今では自由に自分の身体を動かすことができるようになってきたので、そんなことはもうしない。「できること」が増えたぶん「もうやらないこと」も増えていくんだなあと寂しくなる。 今彼は、何かを尋ねるときは「え!え!」と言う。何かを提示するときは「あ!あぁ!」と言う。テンションが高いときは「ごぅごぅ!」と言う。こっちに来てほしいときは、指だけでおいでおいでを表現する。 それらひとつひとつがたまらなく愛おしいが、これらも全ていつか見なくなってしまうと思うと寂しくなる。しっかり記録に残しておこうと思う。 なにはともあれ、誕生日おめでとう。父は嬉しい。父もこれで1周年。このまま元気にすくすく育っていって、君の新しい一面がどんどん見れることを父はとても楽しみにしている。

私的Nuxt.jsでどのアーキテクチャを選ぶかフロー

ユーザージェネレーテッドかどうか YES → SSR NO ↓ ページ数が多くそれぞれのページのSEOを気にするか YES → SSG NO ↓ SPA SSR 動作が早いがデプロイ環境がnode.jsサーバーがホスティングされている必要がある。firebase hostingを利用すれば無料で環境を構築できなくもないがやや面倒。私はロリポップマネージドクラウドを利用している。 ユーザージェネレーテッドなWebアプリをJAMStack構成でやる場合、ページ数合計100ページくらいだと、Github Actionの無料枠2000分のビルドから逆算すると多くても150回程度しかCIを回せない。 そんなにページ数がない、そんなにCIを回さないのであれば可能だが、ユーザー投稿後ページとして出来上がるまでのダウンタイムはやはり無視できない SSG 基本はSSG+github actionでJAMStack構成でやっていきたい。SSGであればhosting先はgithub pagesでもいいので、ドメインさえ気にしなければ無料でできてしまう SSGを諦める理由としては、上記ユーザージェネレーテッドコンテンツの存在が大きい。 投稿者がコントロール可能なWebメディアなんかはJAMStackが最適だと思う。出力された静的ファイルをCDNでホストすれば爆速になると思う。 ただ課題もあって、1000件をこすようなコンテンツ量であればCIのコストがかかるだろうし、都度デプロイで静的サイトを足していく方法では、CIによっては過去ビルドはリフレッシュされてしまう使用のものも少なくないので気をつけたい。またJAMStackの特性として特定時間に公開といった処理は難しいのでそういった用途では選択を避けたい SPA これは正直選びどころがわからない。サーバーで動作させたくないライブラリを利用している場合(そんなときSSGでもprocess.clientで絞ればいいが。。。)とかはSPAにしとくと楽かもしれない。 やったことはないが、限られたページかつ、流入がトップからがほとんどなネイティブアプリに近いような作りで、PWAやelectronでネイティブで動作するようにし、ばらまく前提で作っているようなアプリはSPAで開発してPWAでストアにアップすることがおすすめかも知れない。

VOXELCANVASのモデルページをアップデートしました

過去記事 サービスのSSR化に伴い、モデルページを刷新しました ドキュメントはこちら ページの外観 関連ボクセルはこのように表示されます Original : そのボクセルの最初の祖先ボクセル Ancestor : そのボクセルの親ボクセル Derivation : そのボクセルの子ボクセル(複数) その他のボクセルやWeeklyランキングも表示されます Weeklyランキングは毎週日曜日に更新されます。 ランキングに載ると通知が来ます OGPもPlayerCardで対応しています 6末に終了するGoogle polyをリスペクトしたデザインにしてみました。 ぜひ触ってみてね!

Among usを快適にプレイするためのツールまとめ

ミュート ゲームの進行に合わせて自動ミューとしてくれる。王道。 だいたいミュート系はこれが使われている気がする 近くにいるプレイヤーだけ声が聞こえる 半自動ミュートボット、管理者が生死判定をしてゲームの進行に合わせてミュート/ミュート解除する 日本語 ローカルサーバー 一番スター数が多いカスタムサーバー。PC, mobileクライアントのみ対応 ↑のサーバーアプリケーションの方。dockerイメージが公開されている ゲームの設定 お気に入りのゲーム設定を保存できる メモツール 多機能メモツール 英語 戦績を補完したりできる Webアプリ 多機能メモツール 日本語 インストール必要なデスクトップアプリ 軽量メモツール 日本語 マップのビジュアルメモのみ Web/デスクトップ 両対応

Among us向けヘルパーツールを作りました「Among us ビジュアルヘルパー」

ツールはこちら Web版: デスクトップ版:ダウンロード ダウンロードして解凍した後、amongus-visual-helper.exeを実行してください Among usビジュアルヘルパーはAmong us初心者プレイヤー向けのゲームプレイ支援ツールです。アイコンを配置したりルートを描画したりして行動を可視化できます。配信用途でも利用可能です。 ツールは以下機能を搭載しています アイコン 自由移動配置 アイコン 生死切り替え アイコン 名前設定(色変更可能) アイコン 除外 フリーハンド ライン描画(色変更可能) 背景色変更 背景色を変更することで、OBSでカラーキー設定することで配信に使うこともできます 活動中はマップとして、議論中はメモとして使えます。 カラーキーはマゼンタがおすすめです。 日本語版も3/5のアップデートで正式にリリースしたのでもっと盛り上がったらいいですね。 私もハマっているので人数合わせにお困りでしたらぜひリプでお声がけください。

NCMBのスクリプト機能はGETでいいなと思ってもPOSTで設定しておこう

どう見てもGETで返せばいいやろ、、、と思うスクリプトを作ったとしても POST,DELETEだとCORS開放済み ソース→ res.header()はエラーになる→CORSの設定はコードでできない つまりGETはクライアントでJSONPでのアクセスにしないといけない RESTでやるならいいけどtokenとか面倒だしみんなSDKでやっているはず SDKは内部的にHTTPRequest叩いてるだけでそのコードはライブラリ内 SDKからはJSONPに変更ができない つまりSDK+GETスクリプトは使用不能 ということなので、どう見てもGETなライブラリも、POSTを使おう。 追記:残念なことにPOSTにしたスクリプトでも動いてくれなかった。 いつもこういうときはAPIのAPIをPHPとかで作ってしまうのだけど、ncmbのREST APIのヘッダー設定めんどくさすぎるのでパス 現在コミュニティで問い合わせ中。チュートリアル通りにやったので、なんとかしてほしい。。。 追記(3/9):普通にScript機能もCORS設定していないらしい。なんやて。。。 でも動かない。POSTでアクセスしているのに、、、 技術サポートは有償からなんだよな、、、困った、、、

サークルファン・インフォをリリースしました

すべてのサークルをオープンにする 「サークルファン・インフォ」をリリースしました サークルファン・インフォは社会人サークルや地域の教室の生の声をお届けするWebメディアです。 今までは、サークルオーナーはサークルを紹介したくてもtwitterやジモティー、スポーツやろうよなどで主観的な情報を自分から発信するしかなく、参加者が参加前に客観的なサークルの情報を知ることができずに、参加に踏み込めないという問題がありました。 そこで、サークルファン・インフォでは編集部が直接サークルオーナーへインタビューしてサークルの特徴や目的をヒアリング、記事としてまとめることで客観的な第三者目線の情報を発信いたします。新規の参加者の方も第三者目線の記事を読むことでよりサークル参加のイメージがわくと思います。 あなたのサークルもぜひ記事を掲載しませんか?もちろんインタビュー料掲載料は無料です。ご興味ございましたらサークルファン・インフォページ内の「掲載リクエスト」よりご連絡ください!

会社のテックブログを勝手に爆速にしてみた

本記事はOne Tech Blogに寄稿した記事を転載したものです こんにちは GMOグローバルサイン・ホールディングス株式会社 GSP事業部 PlayCanvas推進室室長の津田@utautattaroです。 普段はPlayCanvasの事業責任者として普及促進活動をしたりWebGLのサンプルを作ったりしています。 会社では珍しく(?)フロント系のエンジニアなので、今回はフロントエンドな話題を取り上げてみました。

Symmetry Dimentions Inc.にジョインしました

2021年2月1日より、xR、デジタルツインの研究開発を行っているSymmetry Dimentions Inc.にWebGLエキスパートとしてジョインしました。 現在同社が構想しているデジタルツインWebプラットフォームの構築に向けて、今までWebGLを活かしたプラットフォームやユーザーサービスを開発・展開してきた知見を活かして積極的に協力していく予定です。 初の副業(業務委託)での参画です。VOXELCANVASに興味を持っていただいたところから、同社のデジタルツインプラットフォーム構築に向けて、WebGLを活用したプラットフォームの開発運用実績ありということでご興味を持っていただいたのがきっかけです。 エンタメ以外の業界は初なのでワクワクです。全力でデジタルツインWebプラットフォーム構築していければと思ってます。 副業エンジニアのハウツーなんかもブログに残していければと思ってます。

VOXELCANVASにモデルページを実装しました

こんな感じ クエリで呼び出すYouTube方式です。 twitterシェア用のボタンも追加しました。 ユーザーページ、モデルページ、タイムラインと揃ったので、もうこれはVoxel art makerからVoxel SNSに進化したと言っても過言ではない気がします。 ぜひ遊んでみてください! 2021/04/19 追記 アップデートしました

VOXELCANVASにマイページ機能を追加しました

VOXELCANVASにマイページ機能を追加しました。 でアクセスできます 例 ここでの検索なんかもできます 技術的にはnuxt.jsの動的ルーティングで側だけJAMStack実装。 ビルドタイミングにアップデートされるので、ユーザーデータの更新は即時的には行われません。 こういうユーザーが複数いるサービスのJAMStackって難しいよなあ。 2021/04/19 追記 サービスのSSR化に伴いアップデートしました。 やっぱりもっと早くSSRにするべきやったんや。

3Diframe x model viewer starterkitを利用したときに右クリックでブラウザメニューが出るのを防止する

@yausterの3Diframeサンプルを利用して3Diframeを実装すると、model viewerで右クリック→ドラッグ操作でPANをしたときに、メニューが出て煩わしいことがあります。 iframe-plane.jsのinitialize()内に以下コードを追加するとメニューが出力されなくなります document.body.oncontextmenu = function () { return false; }; なんでこれサンプルに含まれていなかったんだろう。。。PlayCanvasにプルリクの機能があればしたい。。。

phpを使ってimagekit.ioにREST API経由でbase64形式の画像をアップロードする

はまったので忘備録 公式によると以下curlコマンドで画像アップができます。 curl -X POST " \ -u your_private_api_key: \ -F 'file=iVBORw0KGgoAAAAN' \ -F 'fileName=hoge.png' PHPで書き直すと以下のようになります $POST_DATA = array( 'file' => 'iVBORw0KGgoAAAAN', 'fileName' => "hoge.png", ); $curl=curl_init(" curl_setopt($curl,CURLOPT_POST, TRUE); curl_setopt($curl, CURLOPT_POSTFIELDS, $POST_DATA); curl_setopt($curl,CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($curl,CURLOPT_SSL_VERIFYHOST, FALSE); curl_setopt($curl,CURLOPT_RETURNTRANSFER, TRUE); curl_setopt($curl, CURLOPT_USERPWD, $imagekit_privatekey.":"); curl_setopt($curl,CURLOPT_COOKIEJAR, 'cookie'); curl_setopt($curl,CURLOPT_COOKIEFILE, 'tmp'); curl_setopt($curl,CURLOPT_FOLLOWLOCATION, TRUE); $output= curl_exec($curl);crulの-uコマンドになじみがなくてよくわからなかったのですがどうやらこれはbasic認証らしいです。 phpのcurlでbasic認証を通す場合はcurl_setopt($curl, CURLOPT_USERPWD, $imagekit_privatekey.":");のように記述します またこの記事同様デフォルトでランダム文字列が入ってしまうのですが、外す場合にはuseUniqueFileNameをfalseにする必要があります ただ、今回はmultipart/form-dataでの送信のため、http-build-queryなどを通さず、直接送信しているため $POST_DATA = array( 'file' => 'iVBORw0KGgoAAAAN', 'fileName' => "hoge.png", 'useUniqueFileName' => false );とすると、正しく動作しません。 正確には $POST_DATA = array( 'file' => 'iVBORw0KGgoAAAAN', 'fileName' => "hoge.png", 'useUniqueFileName' => 'false' );と文字列リテラルで渡す必要があります。 これで正しくアップロードできます

imagekit.ioで画像をアップロードしたときにランダム文字列が末尾につかないようにする

imagekit.ioでは上書き防止のためにデフォルトではアップロード後に画像の末尾にランダム文字列が付与されるようになっています。 これを削除するには以下の方法から設定を変更します。 Image settingsからMEDIA LIBRARYを選択 >ENSURE UNIQUE IMAGE NAMES DURING UPLOAD をfalseにするとランダム文字列がつかなくなります

【Web表現チェンジャー】PlayCanvasに追加された3Diframeサンプルが控えめに言ってヤバい

最近PlayCanvasで3Diframeのデモが@yausterによって追加されました これがなかなかに面白い機能でPlayCanvasの3D空間内に好きなだけiframeでWebページを埋め込めてしまうのです。 バーチャルゲームセンターも実装できた これをもう少し工夫すればバーチャル美術館とか、展示場とか、何でもできそう。 ポートフォリオもこれで構築すればすごい差別化できそう。 しかも実装はスクリプトを板ポリにアタッチしてattributeでURLを指定するだけ。すごい。 実装自体はCSS3Dでやっていて、PlayCanvasの3D座標系とCSS3Dの3D座標系を完璧に正しくマッピングしきっている。美しい。。 また3D空間でCSS3Dの前にEntityが映り込んだ際は正しくCSS3Dがエンティティ背景に回り込むようになっていて、より没入感を高めている。これはすごすぎる。。。 なおこちらの3Dモデルは全部VOXELCANVASでちゃっちゃっと作成。リソース作成からアプリ開発、デプロイまで全部Webでできてしまった。。。 VOXELCANVASではvirtual-deskkitというタグでパブリック公開中。ぜひダウンロードして使ってみてね。 これで好きなYouTube動画に囲まれるWebサービスとか作ったらおもしろそう。 YouTubeで検索ワード入れたら候補の動画が10個くらい帰ってくるようなAPIないかな 試してみたい。

社会人サークル運営統合システム「Marcle」の提供を開始しました

この度社会人サークル運営統合システム「Marcle」をリリースしました。 MarcleではWebシステム+LINE公式アカウント+Google Docsを組み合わせて、社会人サークルで重要な 集客 メンバー管理 イベント管理 配信 をスムーズに行ってくれる機能が搭載されています。 すでに都内の2つの社会人サークルで利用されている実績があります。 提供方法は二つ、「買い切り型」と「フランチャイズ型」があります。 どちらもカスタマイズが容易なため、どのような形態のサークルでも利用可能です。 社会人サークルをこれから展開していきたい方、すでに展開していて、問題を抱えている方 是非お気軽にご連絡ください!

初音ミク「マジカルミライ 2020」プログラミング・コンテスト で入選しました

入選しました 初音ミク「マジカルミライ 2020」プログラミング・コンテスト で入選しました。エントリーNo.9です。 Now playing! 投票はこちらから ミクナビ アプリをインストールしてアカウント登録をすると投票ができるようです。投票よろしくお願いいたします! つくったもの PlayCanvas製の3Dインタラクティブリリックアプリです。透過キャンバスを動画の上にべた張りして、model viewer starter kitを利用して無重力空間で歌詞がぐるぐるなるようにしました。 ニコニコ動画でボカロ動画を見まくっていたことを思い出しながら、弾幕をイメージして3D空間上で拡張しているようなイメージです。 サビが取得できたので終わりと始まりでいい感じに物理的な演出を加えてみました。 余談 エンジニアになったきっかけが、ボカロPになりたいからだった(当時神奈川工科大学に音楽理論やDTMを勉強する気で入学したが2週間で挫折しプログラミングに浮気した)自分にとってはなんだかものすごい感慨深いです。またピノさんの楽曲という点もものすごく感慨深い。サインもってます。私はニナとコハナサイチが好きです。 11/30追記 ソースコード公開しました

今年も残りわずかなので2020年想定外だったことを発表する

#今年も残りわずかなので2020年一番想定外だったことを発表するというタグがtwitterで流れていたので、twitterでは恥ずかしいのでブログで発表する。せっかくなので複数個書いていく 尻にトンネルが開通していた 尻の痛みからまさかの深部複雑痔瘻発覚、4回の入院、3階に渡る手術をするはめになった事は本当に想定外。後半この思い出しかない コロナで家族の時間増えた これは嬉しかった。子供の誕生の瞬間には立ち会えなかったが、新生児期から子育てにめちゃくちゃコミットできている。最高。 開業した これは意外と予想外。すくなくともVOXELCANVASを事業化することは考えてなかったし社会人サークルをフランチャイズ展開すること、NnwsPicks Expertのお誘いが来ることなどなど全く想定していなかった。まあでも今年の中頃から出てきていた漠然とした不安から挑戦を開始して、なんとかスタートはできた。 新築を立てて翌年賃貸に引っ越した これは本当に予想してなかった。結婚前に建てた新築物件に新婚で住むのは難しい。色々あったが、今はとっても楽。 今年も色々あったけどしっかりがんばれたことに感謝 30代突入までのあと3年をどう過ごすかがだいぶ重要な気がする。18のときに立てた目標を見落とさず頑張る。 買って一ヶ月の最新スマホを伊豆急行の窓枠に落とした するっと落ちていきました。するっと。

継続と挑戦

いくつかトピックをまとめていく バイデン勝利 トランプがフロリダをとったあたりで怖くなって戻したが、ペンシルバニアウィスコンシンをバイデンがとったあたりで入れたLがちょっと私を潤してくれた。このまま上がり続けてほしい。バイデンの金融政策に期待。 挑戦 奥さんが簿記一級取得に向けて勉強を始めるらしい。素晴らしい。すごい。自分もなにか頑張りたい。逃げ続けてきた英語をやるか、どうしようか。 出社 今日は久しぶりに出社した。渋谷の街は様変わりしすぎていてもう正直よくわからない。通勤電車は普通に密だった。 ピクミン3デラックス 買った。7年ぶり。どうせなら4にしろよ…とぐちぐち言い続けていたがピクミン初体験の奥さんと楽しみたくて購入。GamePadありきのUXをどう移植してるのかと思ったら、結構力技だった。まあしょうがない気もする。switchは2画面できないしね ちょっと機能が追加されて難易度が簡単になったように見える。昔より楽しめるといいな 以上。明日は地域の町中華に初めて行く。チャーハン大盛りを食べる予定。

ハリー・ポッター アズカバンを見た

金曜ロードショーでハリー・ポッターシリーズをやっているので楽しく見ている。 こういうシリーズ物で一番ハマったタイトルだと思う ここからは独断と偏見でハリー・ポッターのランク付をしていきたい 好きなタイトルランキング 1位 ハリー・ポッターとアズカバンの囚人 監督が変わり雰囲気ガラッと変わって公開当初にビビったの覚えてる。この頃からハリーがしっかり魔法使うようになったのと、お父さん世代の登場が出てきて好き 2位 ハリー・ポッターと不死鳥の騎士団 いろいろ進行するのが好き。ダンブルドア軍団とか 3位 ハリー・ポッターと炎のゴブレット かっこいい。あと話がわかりやすい 4位 ハリー・ポッターと謎のプリンス スネイプ回 好きなキャラクターランキング 1位 シリウス・ブラック かっこいいし優しい 2位 ハグリッド えらい 3位 ロンのお母さん かっこいい 4位 ルーピン先生 やさしい 5位 ムーディ先生 やさしいしかっこいい

健康生活

送り迎え 今日試しに保育園の送り迎えをどちらも歩いて行ったところ、合計13000歩、9.5km踏破していた。このうち半分は息子を担いで歩いている。 今日の体感としては、慣れれば楽になりそうだと思った。だが、早めにいい靴がほしい。 仕事 仕事の方は、3回目のPlayCanvas Japan TVを配信した。今日のテーマは「PlayCanvas 日本の歩み」と言う事で、色々振り返ってみた twitter埋め込み実装 ブログについてTwitter埋め込みがかんたんに実装できた。 だがwiget.jsの読み込みが走らないと処理が開始されないためF5を押さないと表示されない。 なんとか外部からメソッドを叩けるといいのだが… 次回実装予定 [2020/11/06 追記] twttr.widgets.load()で実装完了 twtterはwidgets.jsを読み込んでいればグローバルに存在している まとめ 今日はようやくルーチン化してきて早めに終わったのでこの時間に就寝。 おやすみなさい。

抱っこひも

息子の送り迎え二日目、抱っこひもを簡易版に変えてみたが案外いい感じ。 抱っこひもで寝なかったが簡易版では息子は寝た 右肩の負担がやばいが両方に来るよりは自分的にマシなのかも。 これから片道2kmの保育園までの道中を、8kgのおもり(日々増えていく)を持って歩いて往復しようと思う。ダイエットだ! 今日は社会人サークルを社内プレゼンしたいという案内をいただき、快諾した。 補足のつもりで資料を提供したが、楽しくなってしっかり書いてしまった。どこかで発表したい。 今日もお疲れ様。

Google Payが動かなくなった

環境 Google Pixel5 Android 11 Google Pay 2.119.x 状況 朝息子を送ったあと帰りのバスで残額不足で支払いできず、現金で支払う 下車後 Google Payアプリを起動するも、スプラッシュスクリーンから遷移しない 帰宅後WiFi環境下で再度チャレンジ、アプリは起動したがチャージ残高が5300円ほどになっており、また最終使用歴も10/29となっていた。 上部更新ボタンを押しても更新完了し数値は変化せず。 アンインストールし、再インストールを試みた。問題なく起動したがSuicaの作成ができない とりあえず最新のGoogleのハードウェア、ソフトウェア、アプリのはずなのでなんとかしてほしい… とりあえずGoogle Payサポートに連絡。NFCの問題だろうか…困った…

術後4週間目:板

手術から4週間 気づいたら術後から今日で4週間になっていた 傷は順調に回復している気がする。痛み止めが切れるとまだ強めに痛むが、飲んでるときはほぼ傷まない。 座るのも患部に直接圧をかけない限りは全く平気。 滲出液はやっぱりどうしようもない。ガーゼのルーチンができたので、愚直に処置するしかない 見てみたら患部が板のように平らになってきていた。肉芽は全てなだらかになった。 そして端からくっついてきている。もう術後直後のようにカパッとは開かない。無理やり開いたとしても楕円形になる シートンだけはやはり曲者だ。痛くは無いのだが確かにそこに存在を感じる。 次はほぼ間違いなく締め直しだと思うので覚悟しておこう。 Hue 風呂の電気が切れそうなのでHueに交換してみようと今さっきポチった 風呂場をムーディな空間にするのが今から楽しみ。 欲を言えば玄関の電気もHueにして曜日で色分けとかやりたかったのだが、ブラケットが外れなかった。賃貸なので無理はしないでおく。 マジカルミライ プログラミングコンテスト そういえばマジカルミライ プログラミングコンテストに作品を提出した。今日が締め切りなのだがなんとか間に合った。 初音ミク、ボカロといえば自分が高校生のときにハマり、この世界に入ったきっかけなので、是非この機会でなにか自分の能力で貢献したい。 作品はまだプライベートリポジトリだが、しばらくすれば公開できるそうなのでその時までお楽しみに。

次はURLのogp出力に挑戦

やりたいこと noteみたいにURLを貼ったらogpを読み取ってリッチに表示するようにする 検討している実装手段 ビルドのタイミングでbodyを直接書き換える方法を取る。 具体的に URLを検出したら以下のライブラリを利用してogp情報を取得する Nuxt.jsでのプライグインの利用方法も忘れない 課題 microCMSではaタグが使えるのだけど、aタグで貼ったときはむりやりリッチリンク化したくないので、そこは無視するようにする。 具体的に これはリッチリンク化したいURL これはしたくないURL とりあえずやってみよう

目次をデフォルトで開いたり、開いたり閉じたりを検出したい

やりたいこと ↑この上の目次をデフォルトで開いてる状態にしたい 現状想定しているやり方 まずはDOMにアクセスしないといけないので、これを試す Bootstrapのイベントで取れるようなら撮ってみる だめならJavaScript書く できた bootstrap-vueのcollapseの詳細を見て解決。 toggleの項ばっかみてた

目次を作りたい→作った

目次を作りたい 目次とは hタグをまとめて上部にアンカーリンクを置く 要件 完成物 とりあえずhタグが全部リンク化されている状態にしたい どうやって作るか? とりあえずフルスクラッチで作ろう 具体的に bodyをデータで持ってるからそれからhタグを検索。 idはmicroCMSがどうしてるのか調査したい 見出し5 見出し5って使うの?パラグラフより小さいけど まとめ とりあえず頑張って作る 作った 作り方 正規表現でタグ切り取り <h1>-<h5>までのタグを正規表現で切り取り let reg = /<h[1-5].*?<\/h[1-5]>/g; let tables = payload.post.body.match(reg); 配列に入れる microCMSだとh1-h5は自動でidを振ってくれるのでひと手間減って便利 if(tables){ for(let i=0;i<tables.length;i++){ let obj = { "tag" : tables[i].slice(1,3), "id" : '#' + tables[i].match(/".*"/)[0].slice(1).slice(0,-1), "text" : tables[i].match(/>.*</)[0].slice(1).slice(0,-1), } t.push(obj); } } 表示 横全面だとダサいのでgridでmd=4へ いい感じ <b-container class="p-0 m-0"> <b-row> <b-col md="4"> <div class="tableofcontent bg-light p-2 mb-2" v-if="t[0]"> <b-list-group> <p class="p-1 m-0 text-center"><strong>もくじ</strong></p> <b-list-group-item class="py-1" v-bind:class="'t'+table.tag" v-bind:href="table.id" v-for="table in t">{{table.text}}</b-list-group-item> </b-list-group> </div> </b-col> <b-col> </b-col> </b-row> </b-container> h1-h5でインデントをCSSでつけている .th1{ padding-left: 0.5rem !important; } .th2{ padding-left: 1.0rem !important; } .th3{ padding-left: 1.5rem !important; } .th4{ padding-left: 2.0rem !important; } .th5{ padding-left: 2.5rem !important; }結果 やったぜ

highlight.jsを入れた

vue-highlight.jsもmarkdownitも試したがうまくいかなかったので最終手段CDNで入れたら秒でできた。 2時間返してくれ。 C++ #include <iostream> int main(int argc, char *argv[]) { /* An annoying "Hello World" example */ for (auto i = 0; i < 0xFFFF; i++) cout << "Hello, World!" << endl; char c = '\n'; unordered_map <string, vector<string> > m; m["key"] = "\\\\"; // this is an error return -2e3 + 12l; } HTML <!DOCTYPE html> <title>Title</title> <style>body {width: 500px;}</style> <script type="application/javascript"> function $init() {return true;} </script> <body> <p checked class="title" id='title'>Title</p> <!-- here goes the rest of the page --> </body> C# using System.IO.Compression; #pragma warning disable 414, 3021 namespace MyApplication { [Obsolete("...")] class Program : IInterface { public static List<int> JustDoIt(int count) { Console.WriteLine($"Hello {Name}!"); return new List<int>(new int[] { 1, 2, 3 }) } } } CSS @font-face { font-family: Chunkfive; src: url('Chunkfive.otf'); } body, .usertext { color: #F0F0F0; background: #600; font-family: Chunkfive, sans; --heading-1: 30px/32px Helvetica, sans-serif; } @import url(print.css); @media print { a[href^=http]::after { content: attr(href) } } JavaScript function $initHighlight(block, cls) { try { if (cls.search(/\bno\-highlight\b/) != -1) return process(block, true, 0x0F) + ` class="${cls}"`; } catch (e) { /* handle exception */ } for (var i = 0 / 2; i < classes.length; i++) { if (checkCondition(classes[i]) === undefined) console.log('undefined'); } return ( <div> <web-component>{block}</web-component> </div> ) } export $initHighlight; PHP require_once 'Zend/Uri/Http.php'; namespace Location\Web; interface Factory { static function _factory(); } abstract class URI extends BaseURI implements Factory { abstract function test(); public static $st1 = 1; const ME = "Yo"; var $list = NULL; private $var; /** * Returns a URI * * @return URI */ static public function _factory($stats = array(), $uri = 'http') { echo __METHOD__; $uri = explode(':', $uri, 0b10); $schemeSpecific = isset($uri[1]) ? $uri[1] : ''; $desc = 'Multi line description'; // Security check if (!ctype_alnum($scheme)) { throw new Zend_Uri_Exception('Illegal scheme'); } $this->var = 0 - self::$st; $this->list = list(Array("1"=> 2, 2=>self::ME, 3 => \Location\Web\URI::class)); return [ 'uri' => $uri, 'value' => null, ]; } } echo URI::ME . URI::$st1; __halt_compiler () ; datahere datahere datahere */ datahere CDN最高

テキストから一意の値を算出する

タグに自動で色がつくようにしました。なお、同一のタグは同一の色がつくようになっています タグのコンポーネントはこんな感じ <template> <b-badge pill v-bind:style="'background-color : #'+ string_to_utf8_hex_string(tag).substr(1,6) + ';'" class="mr-2" v-bind:to="to">{{tag}}</b-badge> </template> <script> export default { props:["tag","to"], methods : { string_to_utf8_hex_string : function(text){ var bytes1 = this.string_to_utf8_bytes(text); var hex_str1 = this.bytes_to_hex_string(bytes1); return hex_str1; }, string_to_utf8_bytes : function(text){ var result = []; if (text == null) return result; for (var i = 0; i < text.length; i++) { var c = text.charCodeAt(i); if (c <= 0x7f) { result.push(c); } else if (c <= 0x07ff) { result.push(((c >> 6) & 0x1F) | 0xC0); result.push((c & 0x3F) | 0x80); } else { result.push(((c >> 12) & 0x0F) | 0xE0); result.push(((c >> 6) & 0x3F) | 0x80); result.push((c & 0x3F) | 0x80); } } return result; }, bytes_to_hex_string : function(bytes){ var result = ""; for (var i = 0; i < bytes.length; i++) { result += this.byte_to_hex(bytes[i]); } return result; }, byte_to_hex : function(byte_num){ var digits = (byte_num).toString(16); if (byte_num < 16) return '0' + digits; return digits; } } } </script> この後はワードクラウドとか作りたい

8時間ゲームジャム

PlayCanvasで4人、8時間でゲームを作りました。 こちらからプレイ! 制作風景はこちら 楽しかった。 あとやりたいことリスト undo完成させる スピードアップ、ダウン 広場で休憩

ドーナツの穴みたいにさ、穴を穴だけ抜き取れないのに、あなたが本当にあること、決して証明できやしないんだ この歌詞の意味が高校生の頃はよくわからなかったけど、痔瘻根治手術を受けて身体にぽっかり穴が空いた今ならわかる

寝ない息子と戯れる

息子が寝ない 今日は奥さんがほぼ終日外出だったので息子と二人で過ごしてみた。 なぜか自分が昨日今日とやや風邪気味なので結構しんどい。 まず息子寝ない。反町のポイズンでも寝ない。 一瞬バウンサーで寝たが25分で確実に起きる。そして号泣。 そして今、夜の寝かしつけに挑戦中なのだごこれがまた寝ない。元気いっぱいである。 奥さんがいつもミルクを飲ましながら寝てるのを思い出し120ml上げてみた。うーむ元気だ。そしてしばらくしたらぐずり始めた また120mlあげた。びっくりしたことに普通に飲みきった。一時間足らずで240ml、普通に小学校の給食出てる牛乳の量を軽く越しててビビる。 そんだけを飲みきってまだ全然寝ない。昼無理して寝かせようとしすぎたか。 そして寝返りが止まらない。寝返りしたらしたで号泣する。どうしろってんだい。 夜になっても風邪は治らない。鼻詰まりと鼻水、くしゃみがしんどい。だが息子はそんなこと関係ない。 あー、早く寝てくれないかな。いやもういっそ寝かすのは諦めて遊ぶ方向性もありかな。 疲れた。

Webの変更をLINEに通知する仕組みを提供するサービスをココナラに出品しました

息子のお守りをしながら文章書いた 自分で使っていた仕組みが意外といい感じのフレームだなーと思ったので、提供することにした ちなみにWebサイトのスクレイピングはサーバーにそこそこの負荷をかけるため規約で禁止されているサイトは割と多い。 基本方針としては当然怒られない範囲内での提供とする。価格設定はとりあえずつけてみたけど運用し続けていくようなサービスでこの金額は妥当なのかは正直よくわからない。まあでも需要はありそうなので一旦これでリリースすることにする。後で良さげなサムネイル作ろう。

Github Codespaces試してみた

今のところめっちゃいい感じ 基本的にVSCode こまったらCtrl + Shift + Pで何とかなるところとか普通にVSCode npm run devとかでlocalhost:3000とかでデバック環境立ち上がると、URLが作成されてどの端末からでもそのURLでアクセス可能 スマホからデバッグできるの良いね 初動が遅い、修正の反映も遅いのがちょっと微妙かも、、、 と思ったけど反映早いわ ちょっとエラーがうざい VSCodeでは見逃されていたようなエラー(v-forのv-bind:keyないとかそのレベル)が結構怒られる。 オートセーブ 知らなくて焦った

iPad pro 第四世代12.9インチが欲しいけど欲しい理由と買わなくてよい理由が明確なので列挙しておく

欲しい理由 持ち運び動画編集機として優秀 お絵描きできるデバイスがない Allways connected PCとして優秀 処理性能が同サイズ比でも優秀 LiDARやってみたい 持ち運び動画編集機として優秀 現在動画編集は家のデスクトップのfilmoreでしか行いのだが、スタイラスを使った動画編集がすごくよさそう。 Proであれば性能的にも問題はなさそうなので、動画編集のコストとハードルがぐっとさがり、家族の動画とかたくさん残せそう お絵描きできるデバイスがない 年賀状とか、凝ったことしたくなった時にどうしようか。ScanSnapがあるのでアナログで書いてスキャンでもいいけどデジタル出かけた方が何かといいかもしれない Allways connected PCとして優秀 WindowsがARMで動作するようになって64ビットのアプリケーションもエミュレータで動くしSimも入って常時接続だしこれからは常にネットとつながったAllways Connected PCの時代だ!とか2年前くらいに言ってたけど、あれどうなったんだろうか。最近HPからしょぼしょぼ出ているのは見るけどスペック的に微妙だし、バンド対応とかも怪しいしあんま使いたくなる機種がWindowsではない その点A12Zを積んでてあの日本びいきなAppleが作ったタブレットのiPadであれば処理速度、通信環境ともに申し分ない。iPadOS13.4からマウスもサポートしたしもう普通にノートPCだろう 処理性能が同サイズ比でも優秀 そもそもA12Zってやつはベンチマークがcore i7の結構上位のインテルCPUとほぼ同じかそれ以上のスペック出るらしい。そしてGPU性能はぶっちぎり。自分は3Dエンジニアでもあるので、WebGLをよく使うがベンチマークを測ってみても全然違う。 LiDARやってみたい これは本当ただやってみたいだけ。たぶん三回くらいやって飽きる気がする。でも一回家を計測してみたい。 あ、子供を計測するのとかも楽しいかも。 ただこれらは全部今の状況では否定できて、今メインで使っているノートPCのgram13と比べても、たぶんgramで全然事足りる 動画編集についてはデスクトップのFilmoreでも一本作って結構疲れてしまいそのあとやっていないので、そもそもそんなに好きじゃないんだと思う。ツールが変わったところでやるかは怪しい。お絵描きに関しては、子供とかにやってほしいなと思うが今5カ月の息子に渡してもApple pencil食べて本体をよだれで破壊する未来しか見えない。まだ早い。Connected PCは一時期めっちゃほしいなと思ったけど今は外に出歩かないし不要。処理性能はそこまで要求するのか?という感じ。LiDARは一回でいい。 結論 まだ買わない。3年くらいしたら検討してもいいかも。 自分はエンジニアなので引き続きメイン機はWindowsでいい。買うとしたら家族用に使う感じにする。まあでも最近は開発環境はGithub CodespacesやPlayCanvasと、Webで集約されてきているので、出歩くことが増えてきたらこの選択肢はありかもしれない。。。 ただWindowsとAndroidで構成されている我が家にiPad OSがどう馴染むのだろうか。。。その辺も少し不安。結論、優秀なWindows Connected PCかAndroid タブレットにでてきほしいが、何となくこの状況を見ていると期待はできないので気長に待ちつつiPadとの共存を考えてみる。 にしてもgramは本当にいいPC。すごく良い。2年でPCを買い替える自分が買い替える気にならない。そのくらい良いPC。映画「AI崩壊」にも出演していたくらい良いPC。 以上。また買いたくなった時に買わなくてよい理由を思い出すためのエントリでした。

良品計画(7453)が僕を高みへ連れてってくれる

コロナで株式市場が盛り下がったタイミングあたりから株式投資を始めた。 今のところ一番調子がいいのは良品計画株。決算が良かったらしくてコロナでの減少も関係ないくらいになってきた IT関連銘柄も結構すごい、やっぱりオンライ商材を持ってる会社は強いなあ これからどこに投資しようか悩む。ANAは5300億の赤字とのことだったけど、アフターコロナでは航空機需要はもとには戻るとは思うので、どこかのタイミングで買おうかな ANAの公式展開によると24年には復旧できる見込みらしいから、中長期の投資イメージで買っといても良いかも

術後18日目:検診

術後初めての検診へ。 結果は良好。よく洗えてるとお褒めの言葉を頂いた。 痔瘻は合併症がおおく放置すると予後が悪いことに定評がある病気だが、自分もフルニエ症候群や、クローン病、痔瘻癌など、色々調べてみたら怖くなってきたので改めて担当医に聞いてみる。 聞いたところ、クローン病ではないと断言できるそう。また癌化もしていなかったし、そこまで長期で放置していたものではないとのこと。ただ複雑化した痔瘻というだけで、これですべてのトンネルは切り開いたので、予後は良好と改めてお墨付きを頂いて安心した。 フルニエ症候群については、肛門直腸周囲膿瘍の段階で早めに切開排膿術とドレナージしていたのが良かったそうで、あのまま放置しすぎていたらなっていた可能性もあるらしい。特に筋肉側に流れていったときが、筋肉は感染症に弱いらしくフルニエ症候群になる危険性が高いとのこと。 自分はすべて摘出してしまったので、あとは治るだけ、らしい。 ガーゼのはめ方も正しかったらしい。やはり最初の頃の激痛が走るはさみ方は推奨していないようだ。 おしりの形状記憶に関しては、ないとの回答だった。ガーゼを挟まないと本来山になっている部分が板のようになって突っ張ってしまうらしい。そうなった場合ひどいようであれば切ることもあるらしいが皮膚は伸びるのでそんなに心配はないとも言われた。まあでもそうならないように正しく奥から肉が盛り上がるようにするべきとのことだった。 そして今回はゴムの締め直しは行われなかった。やはり痛いのか?と聞いたところ、締めた直後はしばらく痛いとのことだった。嫌だ。 そしてIT健保の一部負担還元金についてtwitterで知ったのだが、これすごい。総額30万くらいかかっていたのだが、6万円だけ支払って余剰分は帰ってきそうだ。 自分は2つの病院を3ヶ月に跨いでお世話になってしまったのでこうなったが、もっとスマートに決めていれば2万円まで抑え込めていたのもすごい。ありがたい。 そして診察が終わったあとサイゼリアで奥さんとご飯を食べて、予約していたJTBへ Gotoトラベルを使って温泉旅行に行くことにした!方面は熱海。バイキングと貸切風呂と和室を熱望したら伊東の方になってしまったが予約できた。 代金は5万円が2万9千円くらいになった。すごい。 今日は割引を実感した一日だった。素晴らしい。 Goto自体は1/31までなので、年明けまたどこかに行きたいなとも思ってる。冬の沖縄とかも好きなんだけどな。調べたら12万くらいでJAL Jクラス+デラックスツイン+レンタカーくらい行けるようだ。Gotoすげえ まあでも子供も小さいしゆったりした旅行がいいな。冬は温泉、夏は海ってくらいがちょうどいいのかもしれない。 伊豆旅行を楽しみに頑張ろう

術後16日:座り仕事

1日飛ばしていた くらいには回復してきた 今日術後はじめて座り仕事に復帰できた!痛みも少ない! ただ座っていると浸出液は半端じゃない。立ち上がるたびにスポンジから水が出るときのような音がする。慣れる。 痛みレベル:昨日より痛くない、だいぶ落ち着いた! 今日は座れた喜びで、仕事と、放置気味だった実装したかったものをいくつか実装。おかげでこのブログもブログとしての体が整ってきた。 記事ページにnextとpreviousを実装した。microCMSでは記事を取得するAPIにはない項目なので、nuxt.config.jsのroutes()に以下のように追加 async routes () { await axios.get(...) .then((res) => { res.data.contents.map((post,index) => { let nextArticle = ""; if(res.data.contents[index + 1]) nextArticle = res.data.contents[index + 1]; let previousArticle = ""; if(res.data.contents[index - 1]) previousArticle = res.data.contents[index - 1]; generates.push({ route: '/post/' + post.id, payload :{"post":post, "next": nextArticle,"previous" : previousArticle }}); map()は第二引数でindexを取得可能。その値を使って前の記事と後の記事を参照している。現状は記事全文を代入しているがその必要はないかもしれない。。。 これでnext,previousを持っていれば下に表示するように。bootstrap cardで構築しようと思ったけどめんどくさかったのでとりあえずb-linkだけにした。 とりあえずブログとしての体裁はそろったが、、、これが100記事、1000記事とスケールしていった時のことが少し心配。 まあ最悪FTPじゃなくてGithub Pagesでもいいな。どうとでもなりそう。 開発楽しい。社会人サークルの方も進めよう。

backnumberを実装した

こんな感じ microCMSのcreatedAtで、年月だけを抽出して記事を作成する仕組みを作った これで、タグ機能、バックナンバー機能とブログとしての体裁は整ったかな 最近は、Github Actionsのビルド時間が長いことが悩み。一回大体6分くらい ほぼFTPでの時間がかかっているようで、悩み中 現在29記事でそのレベルなら、増えてきたら大変そう どうしようかなあ、、、まあまだGithub Actionsの無料2000分/月には遠く及ばないので、いったんは無視できるかな とりあえず記事を書き溜めていく

術後14日目:10000日

今日は奥さんが生まれてから10000日目の記念日だったのでこっそりサプライズ 人間、生まれて100日くらいまでは日齢で数えるけど、いつのまにか月齢になって、そうこうしてるうちに年齢だけを数えていく。 そんな中で10000日ってのは忘れた頃にやってくるので、祝う人は少数だと思うけど、10の累乗数で次にやってくる100000日は274歳になってしまうので、ぜひお祝いしてほしい。 そんなこんなで手術から2週間。肉芽が平らになってきたらしい。浸出液の勢いは止まらない。出血はもうほぼ起きない 痛みは風呂上がりだけ、かゆみとヒリヒリとした痛みとシートンと思われるズキズキとした鈍痛がちょっと辛い。 まあでも日中の生活はだいぶ慣れてきた。おそらく座り仕事に復帰してもいい頃合いだと思う。 痛みレベル:昨日よりは落ち着いた 閑話休題 バチェロレッテを奥さんと二人でゲラゲラ笑いながら見ている。見ていて思うのは、やはり悪口を言う人は早い段階で排除されるということ。あと今回のバチェロレッテに関して言えば、しっかり自分を持っている人が強いな。 副業に関して、開業届を出してからしばらく立っていたのだが、今日ようやく届いていた個人事業主用口座とデビットカードを使って弥生会計を導入した。直近では9月に発生した行政書士への作業依頼費と、paycareerでの面談ポイントが収支報告かなとおもう。NewsPicks Expertなんかも案件が入ってくるといいな。来年から個人開発サービスのマネタイズも開始しよう。

術後13日目:面倒

ガーゼを変えるのがめんどくさくなってきた 真面目にやってたガーゼと痛み止めのストップウォッチも今は72時間とかになっている。 変えているは変えているんだけど、変えなくても痛みや不快感が増してくるわけじゃないし、座るときガーゼが絞れて音がするくらいでそこまで不快感はないのでいいかなみたいな感じ。 痛みは結構引いてきた。今は突っ張る感じがちょっとある 風呂で流すときは痛みではなくかゆみに代わってきた。 そして傷断面が少し滑らかになってきた。写真を撮ってみると、肉芽の間に乳白色の組織ができてきている。 これは滲出液が固形化したもの?よくわからないがぬめりがある そろそろ座り仕事を復帰しようかな。 ところで仕事で使っているRazerのノートPCのバッテリーが膨張してきた。 変えるには会社に行かないといけないのでものすごく億劫。でも使用中にバッテリー爆発して指はじけ飛ぶのも嫌だな 調べたらRazerのバッテリーは膨張しやすいらしい。出てきた写真と比べたらまだそこまでじゃなかったのでお尻が痛くなくなるまではちょっと様子を見ることにした 過充電保護回路がなくそこで膨張してしまうようなので、重電のし過ぎには注意する。

術後12日目:ウォシュレット

今日は実家で術後初めて親と過ごした。 車での移動はやはり辛い。構造上深く腰掛けるようにシートの角度はできているので、まっすぐ座ることはできない。半分浮かしながら座って耐える 実家のトイレでウォシュレットを使ったのだが、やはり初見のウォシュレットは緊張する。最新型だったので、思ったより拡散して噴射された。洗浄力高そう 今は痛みは落ち着いてきたが、かゆみが辛い。しかも清潔にした直後が一番痒くなる。最もヤバイのは風呂上がり後、痒すぎてかいてしまう。 基本的にガーゼを当てて安静にすれば落ち着く。ぼーっとしてるとシートンの結び目が少し重苦しい。 というか、傷の中にシートンの結び目があるのだが、これは大丈夫なのだろうか。2つ懸念があって、 結び目が体内に取り残されてしまうんじゃないか問題 結び直しの処置が痛すぎるんじゃないか問題 がある 1.に関しては最近TENETをみたので壁に埋め込まれていく逆行した人類のように、ゴムも体内に取り残されるのではみたいな謎の不安を抱えているが、基本異物だと身体は認識しているはずなのでそれを信じようと思う 2.に関してはまじで心配。そもそも結び直しはいたいらしいのに、このままずりっと向きを変えられるような処置されたらおそらく死んでしまう。摩擦で。 とりあえず今はこいつとともに生きていくしかないので、なるべく嫌悪感を抱かず共存していきたい。 そういえば奥さんが11月から就職が決まった🎉 二人で就活を頑張っていたのでとても嬉しい。 それと同時に家事や子どもの保育園送り迎えなど、今のように甘えてばかりじゃ入れない状況になってきた。 11月には普通に生活できるレベルには戻したい。 自分の身体の再生力を信じる。 痛みレベル:昨日よりはやや落ち着いた痛み

術後11日目:外出

退院後初の外出。3時間ほど買い物にいってみた 痛みは弱いが違和感大。歩みが遅い。宮城の方言でいうと「いづい」というような状態。 ただ出血的な痛みは軟膏でカバーできるようになってきた。病院でもらったガーゼも終了したが、市販ガーゼでの対応も慣れてきた。 座るのもまぁまぁ問題ない。こころなしか、ガーゼの交換をせずしばらく立った状態で座るのが傷に優しい気がする。 時折ずきんと強い痛みが来るときがある。これはなんだかよくわからないが結構痛い。そしてすぐやむ。清潔じゃない部分があるんだろうか 今の不安はなくなりそうな軟膏。あと一本半もない。次の通院は金曜日、果たしてもつだろうか。節約しながら塗るしかないか。 痛みレベル:昨日と同じ

術後10日目:突然

突然痛みが和らいだ。理由は不明 目覚めは普通、2日前から軟膏を断っていたのだが、ちょこん法でも入り口付近にガーゼがひっつくようになってしまったので、軟膏を再調整してみた 昼間、仕事が忙しくガーゼを取り替えることができずしばらくそのままにしていて、座るとぐじゅっと湿ったガーゼが絞られるような音がするくらいなったときに、急に痛まなくなった さっきまで座るのがしんどかったのに座れるように、移動も軽快に、なんだか急に楽になった。 妻に患部を見てもらったところ、肉芽が盛り上がってきた感じから、全体的に盛り上がってきて高低差がなくなってきた感じに傷口が変わったらしい。 結果、痛みはかなり減った。良かった。 とりあえずこのあと風呂に入って洗い流す。 病院でもらったガーゼがなくなったのでここからは市販品ガーゼで戦っていく。一歩ずつ。 痛みレベル:昨日よりだいぶ痛くない

術後9日目:Pixel5

Pixel5が到着した 使用感いい感じ、移行のスムーズさはさすがGoogleといったところ eSimとのデュアルSimもいい感じだけど、5Gしたいなあ 夜景撮影がすごい。特定されてしまうので写真は載せられないが、絵画みたいになる。 そんなこんなで痔瘻は相変わらず痛い 今は痛みが上部に集中してきた。ガーゼちょこん法でも出血する(大した量ではないが) ときおり差し込むような痛みがある。原因は不明、声が出そうになるような鋭い痛みだ。 あとは体重をかけるとおしり全体が痛むようになってきた。いよいよこれは座れない。普通に術後すぐのほうがよく動けた ところで社内に先輩の痔主を発見した。3人に一人の割合なので、案外いるもんだ。治った人もたくさんいるのだから、頑張ろう 痛みレベル:昨日よりも痛い 差し込む痛みが時々ある

術後8日目:痒み

股が裂けそう あ、もう裂けてるんだった 8日目は昨日から引き続きガーゼちょこん法(ガーゼを三つ折りにして気持ち入口に挟むだけの方法)で出血は免れた。もう出血は攻略しきった気がする 痛みを超えるのにはより大きな痛みをと、と野田洋次郎が言っていたように、一つ痛みをクリアすると、前まで気づいてなかった痛みに気づくようになる。今は切断部最上面の裂けそうな痛み&痒みが耐え難い ものすごいムズムズする。そして普通に座るだけなのに突っ張り感が強い。もしかしてくっついてはいけないところがくっついてしまったのか?本来人間らしい挙動でもくっついてないはずの場所がくっついていたらそれは突っ張るに決まっている。 人間の体はどこまで形状記憶しているのだろうか。 「ああ、俺とお前はくっついていないんだった。あぶねあぶね」と肉芽同士が気づいてよしなに自己解決してほしい。 風呂に入ると痛むのも気になる。お湯を流して痛むのは普通に傷だろう。昨日の写真では、断面部がピンク色に数ミリ成長していた。ここの皮膚の再生が追いつかずかゆいのだろうか。そこは組織同士帳尻を合わせてうまいこと本体に不快感を与えずやってほしいところである。 そして、体力の消耗が激しい。横になっているのに通常通りの仕事をこなすだけでものすごい疲れて、夕方ころはヘトヘトになっている。身体は再生することに本気を出しているので、今はそこに集中しろと怒られているようだ。 痛みレベル:昨日より少し落ち着いたが痒みが強い

術後7日目:攻略

手術から1週間立った 昨日のガーゼの貼り方が功を奏したのか、痛みはかなり落ち着いた。現在は一番背中に近い部分の痛みがあるが、痛みとかゆみのほぼ中間という感じで、無性にかきたくなるような感じだ そして座ったときやしゃがんだときなど、同じくその部分が裂けそうな痛みを感じる。 「ガーゼでしっかり挟んで傷同士がつながらないように」という主治医の言葉が気になる。もしかしたら繋がってはいけないところが繋がってしまったんだろうか。 とはいえもうもとの激痛ガーゼ生活には戻れないので、なるべく手前側はしっかり挟むことを心がけて生活するようにする。 風呂に入る前、いつもならびっしりこびりついている浸出液や血液がほとんどついていなかった。おや、出が悪かったのかなと思った次の瞬間、「ビシャア」と床に湿ったガーゼと浸出液が落ちた。どうやらガーゼで完全に塞いでいたようで、緩んだ拍子に落下してきたらしい。 あいにくキッチンでぶちまけてしまったので、いそいそと床を掃除しながら思ったのだが、そこそこぱっくり空いていて、肛門にほぼ直結している傷口から常時漏れ出す浸出液をガーゼ2枚で塞いでいたのは、なかなかに優秀なんじゃないだろうか。液がたまっていたということは、もちろん湿潤も維持されていたはずだし、きっちり入り口は分けられていたはずだ。 ひとまず、今日は3歩全身。明日の朝また快適に起きれるよう、今日もしっかり睡眠をとる 痛みレベル:昨日の1/10 痛みは一部、痒みと痛みの中間、くっついたとこ(?)が裂けそう

説立証

痛みにうなされた夜だったがだいぶぐっすり寝れた、9時間くらい 昨日傷つけたところは相変わらず痛いが、だいぶ収まってはいる。10が6になったくらい トイレで朝のガーゼ交換をする。どきどきだ。夜用のシートは浸出液と血でぐずぐずになっている。量も多い。 ガーゼ交換。すんなり外れた。いい感じ。やはりこの付け方が良かったんだろう 軟膏をたっぷり塗ってまた入り口に軽く挟むだけに留める。今日は2時間座りっぱなしの仕事があるので頑張ろう。 一旦、昨日までに破壊された部分が治るといいなあ。汚れるのはしょうがないとして、とりあえず痛みだけはなんとか軽減したい。

ガーゼの貼り方がいけないんじゃないか説

過去類を見ないほどの疼痛と出血が襲ってきた ガーゼを剥がそうとした際、慎重に慎重に風呂場でお湯をかけながら剥がしたにも関わらず、大量の出血と疼痛に襲われた タオルを患部に当て痛みを我慢しながら座ることで、風呂場でも自重で止血できたがいかんせん最近の出血がパターン化してきている気がする。 原因として、私のガーゼのあて型が間違っているんじゃないかという気がしてきた。 現在は、そこそこ深めの傷全体に、全てガーゼが当たるよう置くまで深く差し込んで処置をしていた。 いろいろ調べていると湿潤療法というような幹部を常に湿らす処置法があるくらいなので、ガーゼで吸い取りすぎるのも良くないらしい。 主治医に傷同士が癒着しないよう正しく間にガーゼを挟むこと、と言われたが、思えば主治医も入り口付近にちょいっと挟む程度でここまでガッツリ貼っていなかった気がする(うろ覚えだが) ということで、このまま患部を痛め続けるのも精神的肉体的負担が大きすぎるので、主治医の処置を思い出して、ちょっと挟むだけ処置法に変更してみようと思う。もちろんちょっと挟むガーゼ部分にはこれでもかと軟膏を塗る。 まああの痛みを経験したあとでは従来のガーゼの貼り方に戻す気はサラサラ起きない。一旦この方法でうまく行くように、まずは痛みの原因となったガーゼ傷が落ち着くように祈ることにする

術後6日目:出血はデフォかもしれない(過去最大の痛み)

軟膏をつけても付けなくても出血するときは出血する どうせしばらくしたら止まるのだからあわてずいつも通り対処することにした 早く風呂で洗い流したい 痛みについて、過去最大に痛い。 何をしても痛いし、何をしなくても痛い。もうどうすることもできない。 ピークよ来いと嘆き続けてきたが、そもそも記録し続けないとピークかどうかもわからないわけで、その日の痛みを記録することにした。 だが全体を大権してないので、痛みは前日との相対的なものとする。今日からスタート 痛みレベル:過去最大の痛み

大出血

大出血した トイレでガーゼを剥がしたとき、痛みは弱かったが大出血し、便器を赤く染めた すぐさま新しいガーゼをはめ、病院で聞いたとおり汚れても良いタオルをおしりに当て止血を試みる 初めてだったので奥さんに手伝ってもらった その際に病院に電話。次回診察の予約をすると同時に出血があったことを連絡。相手は事務員さんではないのだろうか?こちらの言うことが全て通じて対処法についてもとても丁寧に教えてくれた。 ガーゼを剥がす際はかさぶたが剥がれるような感じで出血するのはしょうがないらしい。出血時の病院への連絡も、何もないときに大量に出るや、その後全く止まらないなどではない限り連絡は不要とのことたった。 とりあえず言われた対処をして乗り切る、まだ止まらないようだったらまた連絡しよう。 にしても、さすが年間2000例の痔の手術を行う病院だ。おしりについて全スタッフが詳しすぎる。安心した 血が止まることを願う

軟膏は偉大

やはり軟膏は偉大だった…疑ってごめん にしてもあと4本…次の通院まで持つだろうか… 妻とまだ子供が5ヶ月で良かったねという話をした。確かに自由に立って歩くようになってたらちょうど自分の肛門くらいの位置に頭があるので、「パパー!」と突撃してきたら私の肛門が終わってしまう。ちょうど息子の頭の大きさくらいの穴が空いてるのも笑える。 痛み止めのみ忘れ防止アンドガーゼ交換タイミングでタイマーが混在しているので、複数ストップウォッチアプリを導入した そして今日から仕事復帰 とりあえず慣れていこう。頑張りすぎない。

再びの出血&痛み

深夜の痛み止め&ガーゼ交換で起床したが、張り付きが尋常じゃなかった。というかこれを理由に出血した 原因は軟膏ではなかった。疑ってごめんよ軟膏… 傷が治っていく過程で凝固しやすいタイミングにはいったのか? よくわからないがくっつく力が異常に強い。このまま両サイドの傷同士をくっつけてしまいたいが正しく奥から肉を盛り上がらせるためには正しくガーゼを隙間にはさめ!との医師のお言葉があったので、耐える にしても痛い…何項大量塗布で乗り切れるのだろうか… 検証は続く

痛み

退院後、痛みが強くなっている気がする ガーゼが患部に引っ付く力が強くなっている。 はがすときは今まですんなりはがれてくれていたのが、今は数か所くっつくようになってしまった。 出血まではしていないと思うが、はがすときに痛みが伴うし、シャワーをかけても痛い 痛み止めもあまり効かない痛みになってきた 患部というよりはヘリの部分がやはり痛む。熱も持っている あと上部はかゆみも強い かけたくてもかけないのでつらい いったん塗っていた軟膏をやめた。気のせいかもしれないが軟膏を塗り始めてから不調が続いているからだ はがしやすくするために購入した軟膏がはがしづらくしていたらたまったもんじゃないので、検証してみる 今はうつぶせで文字を書いている。この時は幾分かまし とりあえず4時間でタイマーをかけてみた。軟膏なしの状態はいかほどか。 そして痛み止めも飲み忘れないようにしよう。痛み止めの効力は飲んだら1になってだんだんと0に近づいていくを繰り返しているわけではないようだ。正しく正しい感覚で飲み続けることで、1以上の実数が掛け算されていくようなイメージ。飲み忘れが発生したら振出しに戻ってしまうような感じ。飲み続けることが重要だと最近実感した。 今日で術後5日目。ピークよ、来い。

帰宅

退院した! 痛みは実際術後からどんどん増してきている。何をしたら痛い みたいなものはないが、常にズキズキ痛い。しかも傷そのものではなくて、傷のヘリの部分がやはり痛む 退院前最後の診察は傷はきれいとのことで2分で終わった。傷の綺麗さと傷みが比例しない 帰宅は1時間ほど。電車はリュックを抱えるような形にしたらわりかし楽にすわれた。最寄り駅からのタクシーがしんどかった 自宅。いろいろ試してみたがまだオフィスチェアの着座がしんどい。深く腰をかけるタイプの椅子はこれから。 今が痛みのピークと信じて、だましだましやっていこう

痛み止め

痛み止めのサイクルが6時間おき一日4回までなのだが、実際は 朝8時 昼12時 夜18時 深夜0時 に飲むようにしている 昨日深夜分を飲み忘れて寝てしまい、4時ころに痛みで目が冷めた。ぼやけた頭で薬だけ飲んで二度寝した 今朝食で起こされたが調子がいい。やはり痛み止めは重要だな。 このあと10時の診察を終えたらあとは退院!これから長い自宅での療養生活が始まる。

出血

明日退院なのに今日の風呂で出血 軽く数滴ポタポタという感じだったけどあれは間違いなく浸出液じゃなくて血だった 患部の写真を撮ってみたら間違いなく2日前よりは肉芽が盛り上がってきていた!自分の細胞の強さを感じる だが切開開放された断面のヘリの部分が赤く腫れて固くなってしまった。押すと痛い。間違いなく術後よりも痛い 主治医を捕まえて聞いたところ、これは電気メスによるやけどらしい。それはもう我慢して時間が解決するのを待つしかない 滲出液が思ったより乾くので軟膏を処方してもらった。ガーゼにつけて創にはめるのだが思ったより伸びない。だが痛みはかなり抑えられている気がする。 さて、明日退院だが大丈夫なのだろうか、今日の痛みは昼に痛み止めを飲み忘れる痛恨のミスが原因だと思うが、このままピークが過ぎて痛みがなくなっていってくれることを願う

140個のボクセルで何かを作る!「つぶやきボクセル」が最高すぎたwww

つぶやきボクセル って知ってますか? Twitterのように140個のボクセル(ボックス)を使ってモデルを作って投稿できるサービスです! スマホ一つでボクセルを追加したり色を変えたりして遊べます! 最終的にこんなモデルやドット絵を作成して、公開できます! つぶやきボクセルを作りました! #つぶやきボクセル #voxelcanvas ゆゆゆ &mdash; †△銀猫⛩ (@Silnyan_A) October 9, 2020 どうやって作るの? このURLから簡単に作れます! 操作方法も書いてあるので簡単! もっと細かいものを作りたい人はVOXELCANVASっていう連携サービスがおすすめ! 是非遊んでみてください~

tweetlogを作った

自分のツイートを収集してブログに残す仕組みを作りました IFTTT GAS microCMS で構成しています。 まず、Twitter APIがめんどくさそうむずかしそうだっため、IFTTTでスプレッドシートにツイート取得し続ける仕組みを構築しました。 IFTTTも最近有料になってしまい、ちょっと辛いです。50ほどあったレシピは2個まで絞りました。Google asistant系だけはどうしようもない で、週に一回蓄積されたスプレッドシートの内容をmicroCMSにPOSTして、tweetlogとして出力するような形にしました。 microCMS, POSTでアップするときは\nみたいな改行コードが効くのですが、HTMLを直接流し込むとすべてがエスケープシーケンスにされてしまい困りました。解決策あれば教えてください。 ひとまず週一回のロギングで運用開始。問題なければ毎週日曜のお昼にツイートログが出力されます。 こうご期待!

入院生活で用意したほうがいいと思うもの3選!

この8-10月で3回入院して溜まった知見を共有します 底の厚いスリッパ 病院は基本的に清掃が行き届いてるので見ためきれないのですが、やはり数多くの患者がいる場所なので、床は想像以上に汚いです。またアメニティセットなどでもらえるスリッパはびっくりするくらい底が薄く小さいので、足の大きな人は確実に足が地面に付着します。ユニクロで1000円で売ってるので買いましょう ふりかけ、ご飯のお供系 食事を制限されてない方限定ですが、病院食だけで毎回飽きる上に薄味のものが多いので、あったほうが便利です。特に消化器系で入院されている方は術後全がゆ食になることが多いですが、病院によっては相当な量の無味なお粥が提供されます。塩すらないので、ふりかけがあったら食べやすくなります。食べるラー油とかごはんですよとかもおすすめです。 無制限モバイルルーター 最近は増えてきたようですがやはりまだwifi完備の病院は少ないです。基本的に入院生活は暇なのでスマホばかりいじっていると容量をどんどん食っていきます。無制限ルーターは4000円程度で1週間ほど契約できるのであったほうが何かと便利です。 以上、入院生活にあったらいいものでした。 なお、短期での入院を想定しています。

腹痛

術後4日目です 術後すぐは出血がありましたが痛みが少なく、医者や看護師から驚かれていましたが、術後2,3日目から徐々に痛みが増してきました。 今日はなぜか腹痛が少しあります。寝方に問題があったのかもしれません。 痛みと言っても激痛ではなく、荷重をかけたときのズキズキ感程度ですが、長時間座ったりするのはややしんどいです。 幸運なことに創がすべて背中側にできているため、うまいこと前に荷重をかければ分散できます。食事などはこの姿勢でとっています 創が突っ張ってきている感覚について聞いてみたら、ガーゼで隙間を作らないと、傷口同士でつながってしまうこともあるとのことでした。 それを引きはがすのは絶対痛いと思うので、ちゃんとガーゼで隙間を作るようにしようと思います。

痔瘻根治手術を終えて

痔瘻手術しました 自分は時計で言う5時7時の範囲を深さ5cmほど、長さ15cmほどで切開開放術を行うというかなり規模の大きい術式でした。 術後の印象としては覚悟していたよりも痛くないという印象です。もちろん痛いんですがこんなに大きな風穴が空いてるのに案外しれっと生活できるもんなんだなあと思いました。 完全に傷が塞がるまでおよそ半年間、大量の浸出液と格闘しながら頑張っていきたいと思います。

このブログについて

概要 EMC2NARY(イマジナリー)は、AI・Visualization・Human Computer Interaction(HCI)を中心に、ソフトウェアアーキテクチャやプロダクト開発、日常から得た気付きを記録する個人ブログです。 技術だけでなく、「人はどう理解し、どう考え、どう意思決定するのか」というテーマに興味があります。 AIシステムの設計、データ可視化、WebGL、ゲーム開発、UX、子育てや日常の出来事まで、一見関係のないテーマも、自分なりの視点で構造化しながら書いています。 このブログは、自分の思考を整理し、未来の自分への忘備録として、そして誰かの新しい発想のきっかけになればという思いで続けています。 ブログへの感想やコメントは、各記事のはてなブックマークコメントへお気軽にお寄せください。 技術スタック このブログは Astro による静的サイトとして構築し、ビルド時にすべてを解決する「JSをできるだけ届けない」思想で組んでいます。2020年に Nuxt 2 で作ったものを、2026年にAstroで全面刷新しました。 Frontend : Astro CMS : microCMS Architecture : Jamstack / Islands Architecture Search : Pagefind Math : KaTeX Code Highlight : Shiki OGP Generator : Satori CI/CD : GitHub Actions Hosting : lolipop! Preview : Cloudflare Workers Server Logic : PHP Analytics : GA4 PV Counter : Google Analytics Data API Auto Post : IFTTT EMC2NARYという名前について EMC2NARY(イマジナリー)は、 Imagination encircles the world. 「想像力は世界を包み込む」 という考えから名付けました。 名前は、アインシュタインの有名な言葉 Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world. に着想を得ています。 「想像力は知識よりも重要である」という言葉そのものよりも、「自分にしかできない発想を大切にしたい」という考え方に強く惹かれました。 知識は調べれば手に入ります。 しかし、新しい視点や発想は、自分自身が考え続けることでしか生まれません。 EMC2NARYという名前は、アインシュタインのエネルギー方程式 E = mc² と Imaginary を組み合わせた造語です。 「空想(Imaginary)が世界(E=mc²)を包み込む」 そんな意味を込めています。 シンボルマーク シンボルマークは、五角形を「手」、円を「地球」に見立てています。 この手で生み出したものが、世界へ広がっていく。 技術も、デザインも、文章も、ものづくりのすべてが誰かに届き、新しい価値につながっていく──そんな思いを表現しています。 注意事項 本ブログは個人の見解を発信する場であり、所属する組織の公式な見解を示すものではありません。 掲載している内容については十分配慮していますが、本ブログの情報を利用したことによって生じた損害等については責任を負いかねます。あらかじめご了承ください。

自己紹介

Profile Ryotaro Tsuda(津田 良太郎)HN: うたろ Visualization & HCI Architect Observe. Abstract. Visualize. Understand. 観察し、抽象化し、可視化し、理解する。 Good decisions begin with understanding. 良い意思決定は、正しい理解から始まる。