個人開発

作ったもの 📰💬✨｜購読している記事とか、好きなサイトとか。 気になるURLをosmosfeed.yamlにまとめて、購読するRSS Feed。 情報過多で、時間がない中、常々欲しいと思っていたが、しっくりくるアプリがなく、自分で作ることにした。 書いているブログが個人を象徴するポートフォリオになるように、購読している記事も個人を象徴する気がする。 購読している記事をプロフィールに掲載するサービスもおもしろいかもしれない。 さて、作り方だけれど、 osmosfeed osmosfeedを使えば簡単にできた。 仕組みとしてはGithub Actionで購読しているサイトの新着記事を自動で取得してくれるというもの。 作り方 Readmeに書いてある通りに進めていけば基本的に問題ない。 Github Actionでエラーが出たけど、こちらのリポジトリが参照しているGithub Actionのコアのリポジトリを参照にしたところ解決した。 build error aftermodified osmosfeed.yaml when Deploy to Github pages: Permission to <xxxx/xxx>.git denied to github-actions[bot] Closeしていたけど、一応解決方法をコメントしておいた。

誰も興味ないサイトの紹介をする意義 仕事では主にAngular、Vue、Reactを使っているフロントエンドしかできない30歳が、インフラ～すべてに手を出してみた。 作成したはいいけど、12か月後、awsの無料枠終了を見据え、運用する気はない。 そこで、ひとつ記事にでも残しておこうという思いで筆を取ることにした。 作成したサービス Vote For Name-難読エンジニアワードの読み方を投票で決めよう 簡単なアンケートサイト。 アイデアに関しては、悲しいかな、特筆すべき点はない。 エンジニアリングするうえで、読み方がよくわからない言葉が良くあるので、それを投票で決めようといった魂胆。 競合とかは特に調べていない。 使用した技術 インフラ aws Lambda aws RDB aws API GateWay Vercel バックエンド NestJS TypeORM フロントエンド NextJS インフラ インフラは初めて、awsに手を出してみた。 永久無料枠がない従量課金制は初めてなので、請求に不安を感じる。 柔軟にスケールできていいのだろうけれど、スケールアップしないので、定額の方がうれしい。 まあ、いい勉強にはなった。 無料枠のよくわからないawsの無料枠について真剣に調べてみた CORSでクロスオリジンの設定をする際に、なんでドメインを絞り込む必要があるのか浅く理解した AWSのRDSに接続したいけど踏み台サーバーでうまく接続できなかったので、RDSをパブリックサブネットに置きHeidiSQLで接続を試みる バックエンド バックエンドにはNestJSを採用した。 理由は、フロントと言語を統一することで効率化を図れるという点と、学習コストが低そうだった点。 Angularに似ている言語ということで、普段Angularを業務利用している身としては、非常に手っ取り早く、概要をつかむことができた。 言語としての不満はなく、今後も使っていきたいと思ったが、いかんせん日本語の情報が少なく苦労した。 NestJSのエラーレスポンスをカスタマイズする NestJsで作成したプロジェクトをAWSのLambdaにあげて動かすまでの作業ログを残しておく LambdaにのせたNestJSでapp.enableCors();を指定しているのにCORSエラーがでたので解消するまでを記録した フロント 迷うことなく、NextJSにした。 現在、個人開発をするとなったら、一択の選択肢かなと感じている。 ただ今回、Next13のAppDirにちょっと戸惑う点もあった。 SSRの書き方とかが簡略してていいと思う反面、サーバーコンポーネントとかの概念がいまだにつかみ切れていない。 それでも、引き続きNextJSを採用し続けると思われる。 フロントのサーバーはVercelにアップしたNextJS使うのであれば、第一の選択肢だろうし、実際そうなった。 エックスサーバーで借りたドメインのサブドメイン使用し、Vercelにカスタムドメインを設定する このサービスの今後 awsの無料枠を終えた後も続けるメリットはないので、運用していく気はない。 ただせっかく勉強のために作ったので、無料枠を終えるまでは暇を見つけて、issueを解決していきたいと考えている。 isuue 動けばいいやという思いもありつくったので、細かい箇所を理解しつつ、ブラッシュアップしていきたい。 初回アクセス時Vercelがサーバーレス関数の発火をまたずにタイムアウトする。 CORSの設定をちゃんやる LambdaとGithubの連携をする JWT認証をCSRF認証に変更してみる マイグレーションの設定をちゃんとやる とか🤔🤔

アイキャッチ画像が面倒くさい Wordpressでブログを投稿していると面倒なことがある。 それはアイキャッチ画像の設定である。 画像探すのも面倒だし、それなりの質が担保されていないとサイト全体がチープに見える。 だからこのブログでは統一感を出せるように、同じデザインの画像の上にテキストを載せるようにした。 で、アイキャッチ画像を作成するようページを作成した。 ……、ことは以前ブログで書いた。 何が面倒って、アイキャッチ画像を設定するほど面倒なことはない 効率化したと書いたが、それすら面倒になった。 なってしまったのである。 そこで、タイトルを書いたらそれがそのままアイキャッチ画像になる。 そんな仕組みを作ってみた。 それがこれである。 さて、次はこれをプラグイン化してみようかと思っている。

特にタイトル以上に説明することもないので、進めていく。 Viteを使用しVueをインストールする 下記コマンドでVite（ヴィート）を使用しVueをインストールすることができる。 $ npm create vite@latest Need to install the following packages: create-vite@3.1.0 Ok to proceed? (y) √ Project name: ... VueProjectBase √ Package name: ... vue-project-base √ Select a framework: » Vue √ Select a variant: » TypeScript Scaffolding project in C:\Users\username\Desktop\vite\VueProjectBase... Done. Now run: cd VueProjectBase npm install npm run dev 今回はVueプロジェクなので、frameworkはVueを指定し、もう考えることなくTypeScriptを指定する。 で、上記のように指示に従いlocal serverを立ち上げることができればVueのインストールは完了。 nodeのバージョンを指定する nodeのバージョン管理ツールにVolta使用しているので、Node エンジンの固定をする。 volta pin node volta pin npm 上記を実行するとpackage.jsonに、 "volta": { "node": "16....

アドセンスが支払い上限を超えた 遂に、アドセンスが支払い上限を超えた！ 過去にやっていたブログが、実はまだウェブ世界の片隅で息をしている。 息をしていると言ってもあっぷあっぷで今にも溺れかけている。 それもそのはずで最終更新日が2020年8月15日である。 つまり2年近く制作者である私に放置されていた、だけでなく、存在を忘れていた。 クレジットカードにあるサーバー費を見て存在を思い出した次第で、なんなら使ってないのにお金を払っているといことにむかついたくらいである。 だってそうでしょう。 サーバーを借りたのが、2020年2月15日なので、今日まで計34,100の出費。 怒りとともに久しぶりに訪れたサイトはアドセンスの自動広告に埋もれている。 これはもしやと思い、アドセンスの管理画面に行くとなんと支払い上限を超えている。 単純な私はさっきまでの怒り、そして今まで払った金額を忘れ、8,000円という金額に小躍りした。 アフェリエイトの収入はあったが、アドセンスの収入は初めてである。 万歳三唱し、このお金を何に使うか考えた。 投資する 実はいま、ウェブアプリを作り運営している。 ユーザーは30人いるが、思った以上に伸びない。 思った以上にというより、全く伸びない。 自身が使いたいウェブアプリなのでなんとか、モチベーションを維持しているが、やっぱり多くの人に使って欲しい。 そこで、そのウェブアプリに投資することにした。 Google AdSenseで稼いだお金でGoogle広告を出すというGoogleの手駒になった私は、7,900円という少額の広告を出すことにした。 こんな少額でも 毎月 70～170 回の広告クリック数が見込めます とのこと。 まあ、随分と差があるが…、まあやってみる。 経過 申請後すぐに、１時間くらいで審査がおり、無事広告が表示され始めたらしい。 携帯のアプリで見れるのが便利でよろしい。 3日間経過 インプレッションが1.16万回で、クリックが20回、 期待したほどじゃないけど、普段オーガニックサーチで人が来ないことを考えると嬉しい限り。 Googleからの最適化案で「画像追加」という案が出てきたので、横長と正方形の画像追加した。 ついでに広告の目的という感じで、広告で来たユーザーがどのくらい確率で指定した目的ページに到着したかを測れるので計測することに。 一応、目的のページはサービスの詳細ページに。 そして現時点で、ユーザー登録してくれたのは0人😭 検索ワードを考える アプリでの検索が多いと思い、検索ワードにアプリを入れたが、たぶんアプリというワードで来た人はコンバージョンに結びつかない。 ということで、アプリを除外ワードにした。 さて現時点で、ユーザー登録してくれたのは0人😭 アカウントが強制停止されました というメールが来て、驚愕する。 で、ダッシュボードに行くと確かに配信が停止されている。 どうやら重要なポリシーに違反しているとかなんとか。 良くわからないので、問い合わせてしてみる。 そのあと、支払いが滞っていることを知る。 クレジットを登録しているので、自動支払いだとばっかり思っていたのだが、どうやら支払いをする必要があるらしい。 ということで、支払いを済ませ、配信再開を待つ。 配信が再開された 支払いが滞りなく完了したことで、配信が再開された！ さて現時点で、ユーザー登録してくれたのは0人😭 投資結果 結果発表！ 表示期間：9月26日～10月17日（21日間） 費用：5204円 クリック数：271 インプレッション数：9.52万 平均クリック単価：19円 ――――――――――――――――― 単価が思った以上に安く、低金額なのに多くのひとが来てくれた。 が、結局ユーザー登録は０。 つまり、そもそも需要がない？ そういうことなのかしら。 そう考えると市場調査にも使えそうな気がする。 今回みたいにユーザー数、投稿数増やすのであれば、ココナラで投稿者募るほうが効率いいかもしれない。