名古屋のWeb制作会社につとめるプログラマーのつぶやきhttps://blog.sus-happy.net/jahttps://blog.sus-happy.net/astrojs-ogp-update/https://blog.sus-happy.net/astrojs-ogp-update/ずいぶん放置してしまいました、約3年半ぶりの記事です。 以前Astroのエンドポイントを使ってVercel上でOGP画像を自動生成してみたという記事を書いていました。今回Astroやsatoriのバージョンを上げたところ、OGP画像の生成が動かなくなってしまいました。 今回はその時に修正した内容のまとめです。 アップデート内容 大分放置していたので、下記のようにアップデートすることになりました。 Mon, 28 Sep 2026 00:00:00 GMTAstroVercelJavaScripthttps://blog.sus-happy.net/astrojs-ssr/https://blog.sus-happy.net/astrojs-ssr/前回このブログをAstroに移行していましたが、OGPの自動生成についてはまだ移行が出来ていませんでした。 @astrojs/ogみたいなライブラリも開発中？っぽいのですがまだ公開すらされていないみたいなのと、astro-og-imageというライブラリはあったのですが、puppeteerを使ってるみたいで結構重そうだったので、@vercel/ogみたいにsatori + resvg-js (reMon, 13 Feb 2023 00:00:00 GMTJavaScriptAstroVercelhttps://blog.sus-happy.net/astrojs/https://blog.sus-happy.net/astrojs/去年に名前を見かけて気になっていたAstroについて、やはり実験といえばココだろう、ということでブログをAstroを使って再度リニューアルしてみました。（ちょうどv2も公開されてたし） また、JSを使わないAstroなのであればいっそのこと各処理のJSも削ってやろう、ということでアニメーションなどもCSSで実現してみました。 記事情報について このブログは、MovableType -> WordPThu, 02 Feb 2023 00:00:00 GMTJavaScriptAstrohttps://blog.sus-happy.net/react-pixi-context/https://blog.sus-happy.net/react-pixi-context/ReactにはContextというコンポーネント間でデータを受け渡す機能があります。この機能を活用すると、基本的には指定のコンポーネントの子コンポーネントで利用する事が出来るようになるのですが、ReactPixiはCanvas要素を使っている関係もあってか、そのままではReactPixiのコンポーネントではContextのデータを受け取ることが出来ません。 PixiJS、ReactPixiとは PSat, 10 Sep 2022 20:16:00 GMTJavaScriptReactPixiJShttps://blog.sus-happy.net/gatsby-nextjs/https://blog.sus-happy.net/gatsby-nextjs/このブログは自分の実験場でもあるので、WordPress -> Ghost -> Nuxt.js -> Gatsby.jsと色々変更していたのですが、今回Next.jsに変更してみました。 Next.jsの公式ドキュメントにもGatsby.jsからのマイグレーションの方法が記載されていたので、そちらをベースに、ちょっと問題となった所をメモ。 （全体的にTypeScriptに変えています） getPSun, 15 Nov 2020 00:31:00 GMTJavaScriptReactGatsby.jsNext.jshttps://blog.sus-happy.net/vue-composition-api/https://blog.sus-happy.net/vue-composition-api/Vue3がそろそろ公開されそうな雰囲気なので、ちょっと先にVue Composition APIをつかってみました。 Composition API RFCをボチボチ読んで、Class Componentで書いてたものを変換してみたのでその時のメモを残しておきます。 Props propsはsetupの第一引数から取得可能。 {{ foo }} import { createComponent }Sun, 20 Oct 2019 07:43:00 GMTJavaScriptVue.jsNuxt.jshttps://blog.sus-happy.net/heroku-puppeteer/https://blog.sus-happy.net/heroku-puppeteer/前回、node-webshotを利用してスクリーンショットを撮っていましたが、PhantomJSが開発終了していることに気づいたため、node-webshotからPuppeteerに変更してみました。（よくよく見ると、node-webshotも2016年から更新されていないんですね…） Puppeteerを使ってみる いつものごとくnpm、またはyarnでPuppeteerをインストールすると利用Mon, 16 Jul 2018 15:41:09 GMTHerokuNode.jshttps://blog.sus-happy.net/heroku-webshot/https://blog.sus-happy.net/heroku-webshot/追記(2018/07/16) PhantomJSが開発終了していたのを、記事を公開してから気づいたので、Puppeteerに乗り換えるなどを行った方が良いかと思います。 Node.jsはnpm scriptsでしか使ってなかったのですが、URLを入力➝スクリーンショットを撮る仕組みが欲しくなったので、Node.jsをぼちぼち触ってみました。 文字化けが発生する 今回は「とりあえず撮れれば良い」といWed, 04 Jul 2018 15:50:10 GMTHerokuNode.jshttps://blog.sus-happy.net/ghost-to-hexo/https://blog.sus-happy.net/ghost-to-hexo/WordPress -> Ghostとブログを使っていたのですが、それ以外でサーバをあまり使うことがなかったので、GitHub Pagesに乗り換えようと思い、Hexoを使うことにしました。 VuePressやNuxt.jsもちょっと気になったのですが、サッと移行しようと思ったので、ブログ機能を最初から持っているものを選択しています。 GhostからHexoのデータへ変換 GhostのエクスポートMon, 04 Jun 2018 18:12:50 GMTGhostHexoGitHubhttps://blog.sus-happy.net/update-macos-sierra/https://blog.sus-happy.net/update-macos-sierra/2018/06/10 Karabiner-Elementsが色々対応してくれていましたので、内容を修正しました。 明けましておめでとうございます。いつの間にやら2017年になっていました。今年もよろしくお願いいたします。 さて本題について、macOS Sierraが発表されてから3ヶ月位経ちましたが、随分バージョンアップ出来ずにいました。バージョンアップを渋っていたのは主に下記の理由からです。 VSun, 08 Jan 2017 15:52:54 GMTMachttps://blog.sus-happy.net/manila-ramen-mendokoro-ramenba/https://blog.sus-happy.net/manila-ramen-mendokoro-ramenba/フィリピンのマニラに来てからいつの間にか半年くらい経ってしまいましたが、割りと環境が合っているのか楽しく過ごしています。 そんな中で、マニラでもラーメンが結構流行っているようで、歩いていける圏内でも幾つかの店舗が見つかりましたので、ほそぼそと残していこうと思います。 （貧乏舌なので「美味い」ばかりの感想になると思いますが、基本的には自分メモということで…） 今回は『Mendokoro RamenbMon, 29 Aug 2016 14:57:32 GMTラーメンフィリピンhttps://blog.sus-happy.net/wordpress2ghost/https://blog.sus-happy.net/wordpress2ghost/長らくWordPressでこのブログを更新してきましたが、前々から気になっていたGhostに移管をしてみました。 その時に行ったことをメモしておきます。 目次 Ghostの準備 Node.jsをnvmでインストール Ghostをインストール Node.jsの実行をデーモン化する nginxからGhostを実行する 記事データの移管 手直しが必要なモノ 雑感 Ghostの準備 まずはGhostのインFri, 08 Apr 2016 16:54:02 GMTWordPressGhosthttps://blog.sus-happy.net/ansible_vagrant_config_automation/https://blog.sus-happy.net/ansible_vagrant_config_automation/少しAnsibleについて触ってみたので、メモを残しておきます。 目次 背景 構築目標 Vagrantfileを用意する Ansibleの設定 Ansibleのインストール Ansibleの設定ディレクトリの構造 ApacheのVirtualDocumentRoot 今回のデータ 雑感 背景 元々Vagrantは使ってたのですが、Chefは利用しておらずSSHで直接設定変更していたため、全くもってSat, 13 Feb 2016 00:44:04 GMTAnsibleApacheVagranthttps://blog.sus-happy.net/senmi-shikizakura/https://blog.sus-happy.net/senmi-shikizakura/今年もどこかの紅葉を見に行こうと考えていた所、そういえばマツケンの愛知県PRで小原村の四季桜が載っていたので見に行ってみました。 今は小原村から豊田市に編入され、豊田市小原町という地名になっているようです。 小原村まで 今回は豊田市駅から豊田おいでんバスで「上仁木」まで1時間程度、そこからあるいて10分程度で到着します。 しかし、下調べが甘かったので、実は行きのバスは途中の「小原大草」で降りてしまTue, 24 Nov 2015 23:23:51 GMT一人旅写真https://blog.sus-happy.net/ruby-on-rails-h2o/https://blog.sus-happy.net/ruby-on-rails-h2o/その２ Unicorn+Nginx編ではNginx上で動かしていましたが、もしかしたらH2O上でも動くんじゃないかと思い試し見たところ動いたのでメモを残しておきます。 ちなみに、Unicornの設定については以前の方法から変更はありませんので、今回のメモには残していません。 H2Oをインストール H2Oのインストールの手順はほぼ変わりませんが、一部だけ手順が変わっています。 以前の方法では、cmaSun, 04 Oct 2015 21:27:12 GMTH2ORuby on Railshttps://blog.sus-happy.net/ruby-drunk-list-3/https://blog.sus-happy.net/ruby-drunk-list-3/その１、その２に引き続き、Ruby on Railsのメモです。（ちなみに呑んだくれリストとはこんな感じのモノです。） 今回は、Ruby on Railsのアプリ構築時に調べた・躓いた点についてのメモです。 目次 改行コードをbrに変換したい JavaScriptが正常に動作しない 雑記 参考 シリーズ 改行コードをbrに変換したい いわゆるPHPで言うところのnl2brをRailsで行うためにはThu, 01 Oct 2015 00:55:20 GMTRubyRuby on Railshttps://blog.sus-happy.net/handa-yakachigawa/https://blog.sus-happy.net/handa-yakachigawa/どこか写真撮りに行きたいなぁと思っていた所で、ちょうどテレビで彼岸花について特集をしていたので、東海県内の群生地が無いか探してみたところ半田の矢勝川にあると知ったので行ってみました。 矢勝川堤まで 名古屋駅から40分くらいの名鉄河和線「半田口駅」から歩いて5-10分位のところなので、電車でも気軽に足を運ぶことが出来ます。 一応駐車場もあるようですが、結構混んでいたのでもしかしたら停められないこともSat, 26 Sep 2015 16:49:05 GMT一人旅写真https://blog.sus-happy.net/ruby-drunk-list-2/https://blog.sus-happy.net/ruby-drunk-list-2/その１に引き続き、Ruby on Railsのメモを残しておきます。（ちなみに呑んだくれリストとはこんな感じのモノです。） 今回は、Rails + Unicorn + Nginxの設定メモです。 Unicornの設定 railsのアプリケーションが作成しているコトが前提となります。出来ていない時は、 rails new projectname で作成をしてください。 インストール アプリケーションWed, 23 Sep 2015 22:10:59 GMTnginxRubyRuby on RailsUnicornhttps://blog.sus-happy.net/ruby-drunk-list/https://blog.sus-happy.net/ruby-drunk-list/Ruby on Railsを少し勉強しておこうと思っていたところで、友人にビールの飲み歩きをしてる話をしていたら、リスト作っておかないと忘れるんじゃない？と言われ、確かにそうだと思ったのでRailsの勉強がてらに呑んだくれリストを作ってみました。 今回の環境は、CentOS7 + Nginx + Unicorn + Ruby on Railsです。 途中まで記事を書いていたら長くなってきたので、分Wed, 23 Sep 2015 00:43:47 GMTRubyRuby on Railshttps://blog.sus-happy.net/react-js-rpg-counter/https://blog.sus-happy.net/react-js-rpg-counter/Facebookが開発を行っているReact.jsを勉強しておきたいなぁと思っていながら大分経ってしまいましたが、ちょっと先週末に簡単なカウンターを必要だったので、土曜日にReact.jsを使って作ってみました。 作る 今回はFluxまでには手を付けず、コチラのスライドのデモを参考にさせていただきました。（Fluxっぽい作りにはなっていますが、Dispatcherの代わりに簡易的なEventEmiTue, 08 Sep 2015 23:24:37 GMTJavaScriptReacthttps://blog.sus-happy.net/gujo-hachiman/https://blog.sus-happy.net/gujo-hachiman/そういえば、 HOBBYカテゴリー が用意されているのに殆ど投稿していないなぁ…と思い、たまに写真を撮りにいってるコトを書いていこうかなと思い立ったので、少し前に行った郡上八幡のコトを残しておきます。 郡上八幡まで 名古屋から岐阜駅までJRで1本、そこから高速八幡線で1時間ちょっとくらいで着きました。時間に余裕があるのであれば、郡上八幡駅までの長良川鉄道が川沿いを走るので景色も楽しめるそうです。 Sat, 29 Aug 2015 13:26:20 GMT一人旅写真https://blog.sus-happy.net/h2o_php7/https://blog.sus-happy.net/h2o_php7/最近H2Oというnginxよりも早いと言われているらしいWebサーバを知ったので、取り敢えず入れてみました。 またコレを機に、HHVMよりも早くなったらしいPHP7も気になっていたので、そちらも入れてみました。今のところWordPressは動いているみたいです。 ちなみにCentOS7です。 目次 H2Oの用意 H2Oのインストール H2Oの設定 H2Oの起動・停止 PHP7をphpenv+phpTue, 30 Jun 2015 22:01:30 GMTCentOSH2OHTTP/2PHPhttps://blog.sus-happy.net/three-js/https://blog.sus-happy.net/three-js/次世代Canvasとも言える、WebGLを簡単に扱うことができる、three.jsを少しだけ触ってみたのでメモです。 インストールから初期設定、簡単なサンプルの実行までは、既に詳細に分かりやすく説明されている記事がありますので、そちらをご覧頂ければと思います。 ※「THREE.CubeGeometry」は「THREE.BoxGeometry」に名称変更されている様なので注意。 画像をテクスチャとしSun, 21 Jun 2015 21:58:05 GMT3Dhtml5JavaScriptthree.jsWebGLhttps://blog.sus-happy.net/unity-flash-p2p/https://blog.sus-happy.net/unity-flash-p2p/P2Pについて色々と調べている中で、UnityとFlashについて一旦テストで実験までしてみたので、忘れても良いようにメモを残しておきます。 なお、「P2P通信すること」だけが目的だったため、Unityのゲームエンジンとしてのオブジェクトの同期処理等は調べていないためその辺りの説明は省いています。 目次 Unity（UnityScript）でのP2P Flash（AIR for iOS/AndroSun, 05 Apr 2015 18:22:21 GMTAndroidFlashiOSUnityUnityScripthttps://blog.sus-happy.net/wordpress-admin/https://blog.sus-happy.net/wordpress-admin/WordPressの管理画面の一部だけ文字化けが発生するという、不思議な現象が発生したので調査した内容をメモしておきます。 目次 文字化けの発生箇所 文字化け発生の原因を推測 動的生成時の翻訳処理について調査 解決策 文字化けの発生箇所 文字化けが発生したのは、管理画面内の一部分だけで、下記の通りです。 投稿画面の「メディアを追加」クリック時のモーダルウィンドウ内 メディア画面のソートするプルダウMon, 09 Feb 2015 22:42:36 GMTPHPWordPresshttps://blog.sus-happy.net/drag-drop/https://blog.sus-happy.net/drag-drop/随分前からある機能ですが、今更ながら調べてみて自分にとって使いやすいライブラリとして用意したのでメモしておきます。 仕様について どうせやるならウィンドウ全体に出来ると良いよね、ということでGmailとかWodPressとかみたいに、ウィンドウの何処でもいいのでドラッグ出来るような方法でやってます。 処理としては単純で、下記の通りです。参考にさせていただいたのはコチラ、感謝です。 画面全体を覆う空Fri, 16 Jan 2015 00:06:29 GMTJavaScripthttps://blog.sus-happy.net/wp-customfield-custom/https://blog.sus-happy.net/wp-customfield-custom/WordPressをブログではなくもう少し大掛かりなCMSとして利用する際には、どうしても必要になってくるカスタムフィールドですが、ただのinput, textarea, selectでは面白くないので使い勝手が悪いので、色々とカスタマイズした内容を残しておきます。 目次 今回カスタマイズしてみた内容は下記の通りです。 プラグイン無しでカスタムフィールドの入力欄を追加する 通常の本文と同じTinySat, 15 Nov 2014 16:38:47 GMTPHPWordPresshttps://blog.sus-happy.net/jetpack-publicize-custom/https://blog.sus-happy.net/jetpack-publicize-custom/様々な追加機能を用意してくれるJetpack for WordPressですが、その中のTwitterやFacebook等のSNSに投稿時に自動的に共有をしてくれるパブリサイズ共有で色々とカスタマイズしたい所があったので、調べたことのメモを残しておきます。 Jetpack インストール方法や設定方法は、丁寧に説明されているページがありますので割愛させていただきます。 パブリサイズ共有 ソースを追っFri, 17 Oct 2014 22:16:43 GMTJetPackPHPWordPresshttps://blog.sus-happy.net/move2linode/https://blog.sus-happy.net/move2linode/何度か 移管を 繰り返してきている当サイトですが、今回はLinodeに移管をしてみました。 t1.microからt2.microという手もあったのですが、AWSを利用する理由も特にないかなぁということでまたVPSに舞い戻っています。 ついでにCentOSも7にしてみたので、色々変更点をメモメモ。 Linodeを契約 メンバー登録して、必要情報を入力、プランは「Linode 1024」を選択、デプロSun, 28 Sep 2014 18:43:33 GMTCentOSMariaDBMySQLnginxPHPサーバhttps://blog.sus-happy.net/ticktack/https://blog.sus-happy.net/ticktack/以前に「setTimeoutの代替関数？requestAnimationFrameを試してみた」という記事を書きましたが、ちょっと実行時間に狂いが激しかったので、色々と試してみてラッパークラスを作ってみたのでメモ。 改善点 ある程度FPSに近づける→FPSの実行回数に近づける 以前のデモだと実はIE8非対応だったのですが解消 使い方 var someFunc = function() { /* 何Tue, 23 Sep 2014 18:55:06 GMTJavaScript