なんで自分の生き方を見直したのか書いてみる
本日は誰もが悩むであろう生き方のお話です。なんかちょうどいいタイミングかなと思い、自分がなぜ今のような生き方に至ったのか書いてみたいと思います。ちとぶっ飛んだ内容も一部ありますがご了承ください。
さらに読む
Notionフォームを無料の範囲でどう活用できるか考えてみた
今回はNotionフォームです。自動返信やメールへの通知はどうやら有料じゃないとできないみたいなので、それ以外の方法で有効活用できないか模索してみた記事になります。
それではみていきましょう。
Notionフォームを作ってみる
公式は下記になります。
これが結構便利で試しに作ってみました。
今回はリンクを知っている全てのユーザーで行なっています。公にして利用することが多いことを想定してですね。
ざっとこんな感じで全部入れてみました。
必須の有無も簡単に設定でき、カレンダーから呼び出したり、チェックも単数・複数で制御できたり、ファイルも5MBまでは無料で対応しているなど、なかなか便利です。
ファイルの拡張子はjpg、png、webp、gif、pdf、mov、mp4は確認してます。まだまだできそうなものはありそうですが、公式を見てみてもそれらしき記述が見当たりませんでした。そのうち出てくるかなと思います。
必須のところは、しっかり赤くなってくれます。これもいいですね！
下記で公開の範囲をコントロールできます。無料では右上の方にMade withのテキストとNotionのロゴがつきます。まあこれは個人的にはそんなに気にならないですね。
実際に回答してsubmitボタンを押すと、下記の画面になりました。
自分のアドレスに回答した内容を送りたい場合は、アドレスを入力してコピーを送信ボタンを押せばOKです。
下記のようにメールが届きます。
View response in Notionボタンを押すと、回答結果が見れます。シンプルでいいですね。
それでは実際にデータにはどのように入ってくるのでしょうか。
一部見切れてはいますが、赤枠の回答者の部分は匿名になっていて、それ以外は回答した内容が反映されるようになっていました。
つまりネットで全てのユーザーが閲覧できるような場合は匿名になるみたいですね。
ここはよくわかっていませんが、匿名じゃない設定にできるんでしょうか。ちょっと様子見したいところです。
改善したいところ
で、ここまで見てきたところで、改善したいところとして、お問い合わせフォームを回答した後に管理者に通知が届くようにしたいですよね。本当は回答した人にも自動返信したいところですが、こちらは今回は無料の範囲だとできないので諦めます。
調べたところ、無料プランをご利用の場合でも、Slack通知オートメーションは作成できるとあったので、フォームと連携できるのかやってみましょう。
SlackインテグレーションでNotion フォームと連携してみる
Slackインテグレーションについては下記に記載がありました。
こちらに従って、Notion側から設定していきます。
※Slackの登録方法などは省略しますが、自分専用のワークスペースを作っておくと便利かもしれません。
お問い合わせのオートメーションの設定
下記のように設定すればOKです。本当はSubmitボタンを押した時のトリガーがあればいいのですが、ここは今後に期待したいところです。もしかしたらできるのかもしれませんがわかりませんでした。
ここは自分の勘違いで、実際にはSubmitボタンを押してデータベースに回答が入った時点で通知される仕組みでした。つまりデータベースが回答に入ってから各項目を編集すると再度Slackに通知される仕組みのようです。後述しています。
ではテストしてみます。実際にSlackから通知されました！
ただ、編集しているタイミングで通知されるのかなと思いきや、どうやらSubmitボタンを押してからのようです。Submitボタンを押さずに待っていたのですが、Slackへは通知されなかったです。
ちょっとこの辺はわかりにくいですね。先ほどの見解は残しておきますが、改善されることを期待してます。
念のため、もしやと思い、回答のデータベースの赤枠を変更して通知されるか試してみることにしました。
案の定通知されました笑。なるほどデータベース側を編集したらってことか。これで理解できた気がします。
これでうまく連携できましたね。
通知できるSlackのチャンネルを指定できるので、無料でも十分使えそうです。個人的にはメールもSlackも変わらないと思ってます。
Google Formsも便利ですが、Notionフォームもなかなかいいですね。
フォームは意外と実装コストがかかるので、手軽にボタンだけ設置して誘導したい場面などではNotionフォームも使えると思いました。
データベースの確認も簡単にできますしね。
以上になります。
引越し時に必要な手続きをまとめてみた
今回は、最近引っ越した時の備忘録をみながら、どのような手続きが必要かまとめてみました。
これでいろいろ調べる手間が少しでも省けたらと思っています。
それではみていきましょう。
引越し前の住所での手続き
どれも基本的には2週間前くらいには済ませておくと安心です。
- マンションやアパートの管理会社へ解約の連絡
駐車場なども契約していれば忘れずに行いましょう。 - 不動産会社とのやりとり
いつでも連絡ができるようにLINEなどがある会社がおすすめです。不明点があればいつでも確認できます。 - 新住所への引っ越しに伴う支払い
不動産会社の指示に従って支払いを済ませておきましょう。 - 引っ越しの見積もりとスケジュール決め
数社へ見積もりをとりましょう。一気に電話がかかってくるので大変です笑。しっかりと比較して決めましょう。元住所の現状確認や新住所での鍵の受け取りのタイミングなどもあるので、スケジュールは慎重に決めたほうがいいです。 - 引っ越し当日の移動手段を確認
車、レンタル、公共交通機関など確認しておきましょう。 - 現状復帰の準備
掃除したり、ゴミを出したり、元々備え付けられていたものがあれば戻しておきましょう。 - 火災保険の解約
解約をするとお金が一部戻ってくる場合もあり - ネットの解約
光回線など契約していれば解約しましょう。もしくは引越し先へ移行手続きをとりましょう。 - ガスの解約
請求書などを参考に連絡して解約します。 - 電気の解約または住所変更
ネットでできるところが多いと思います。できなければ連絡しましょう。 - 水道の解約
検診票などを参考に連絡して解約します。管理会社によっては当日に水落としが必要な場合もありますので確認しておきましょう。 - 転出届
役所へ行って手続きしましょう。 - 国民健康保険の資格喪失手続き
異なる市町村へ引っ越しする場合は必要になります。社会保険の方は不要です。役所へ行って手続きしましょう。 - 印鑑登録の廃止
これも登録している方は対象になります。役所へ行って手続きしましょう。 - 郵便局へ転送手続き
現住所から引っ越し先の住所へ1年間転送できるサービスです。ネットから申し込みできるので使いましょう。 - 職場や学校等での手続き
事前に連絡しておきましょう。 - 新住所のネット契約
使う場合は住所変更または新規契約して、工事の日程まで詰めておくことをおすすめします。工事の日程までルーターのレンタルがあるところが個人的におすすめです。 - 新住所のガス契約
新しいガス会社へ連絡しましょう。不動産会社で教えてくれます。 - 新住所の水道契約
新しい水道局へ連絡しましょう。不動産会社で教えてくれます。 - 新住所の電気契約
契約している電気が引っ越し先でも対応していれば住所変更でOKな場合もあります。なければ新規契約しましょう。不動産会社で教えてくれます。 - 管理会社の立ち会い
現状復帰できて問題なければOKです。問題があれば支払いが発生するかもです。月の途中で引っ越す場合はいくらか戻ってくる場合もあります。
まあざっとこんな感じですかね。
引越し後の住所での手続き
- もののレイアウトをある程度決めておく
引っ越し業者に指示できるよう事前に決めておきましょう。 - 新住所の鍵は引っ越し業者がつく前に受け取れるように
これをしておかないと引っ越し業者の請求金額が跳ね上がることがあります。 - 現状の建物や部屋の状態を確認
現状復帰時にあれこれ言われてお金を取られないために、きちんと記録しておきましょう。だいたいチェックリストの紙が管理会社から渡されているので、それに基づきチェックしましょう。写真も念のため撮っておくことをおすすめします。 - 水道やガス、電気、暖房が使えるか確認
使えなければすぐに連絡しましょう。 - ごみの分別方法や収集日カレンダーを確認
だいたいは引っ越しさきにおかれていますのでチェックしましょう。 - 落ち着いたらネットでできる住所変更手続き
Amazon・楽天・メルカリなどのネットショッピング、クレジットカード、株・仮想通貨、FXなどの投資関連、銀行・ネットバンク関連、スマホの契約業者、電子マネー・公共ICカード、マイナ住所変更など - 転入届
転出届の控えを持参して役所へ行きましょう。 - 国民健康保険の加入手続き
対象の人は役所へ行きましょう。 - 印鑑登録の手続き
必要な人は印鑑を持って役所へ行きましょう。 - 運転免許証の住所変更手続き
管轄の警察署へ向かいましょう。すぐ終わります。あまり行かないような場所であれば、周辺で飲食できる場所を探しておくのもいいですよ。 - 自動車の車庫証明
管轄の警察署へ向かいましょう。 - 開業届の再提出
対象の人はネットからできるみたいですが、うまくいかなかったため手書きで新しい管轄地へ郵送しました。 - 自動車検査証の住所変更
管轄の運輸支局へ向かいましょう。 - 軽自動車の住所変更手続き
管轄の軽自動車検査協会へ向かいましょう。
こちらもざっと挙げてます。
車は持っていないので、どんな感じかは感想は伝えられませんが、概ねまとめられたのではないでしょうか。
以上になります。皆さんの参考になっていると嬉しいです。
無料の範囲で動画生成AIを試してみた
今回は最近いろんな動画生成AIが増えてきているので、有名どころをピックアップした上で試してみました。
詳しい使い方の説明には触れませんので、ご了承ください。
この画像から生成するとこんな感じなのかというイメージを掴んでいただければいいと思います。
ではやっていきましょう。
Runway
公式サイトは下記です。
無料の範囲ではGen-2が対応していたので、添付のように画像を貼り付けてプロンプトを入力するだけです。今回はダンスさせてみたかったので、プロンプトの内容はダンスしてもらうようによせています。
字数制限があるので、少し短くしてやってみると下記のようになりました。生成までは10分前後でしょうか。
いやーひどいですね笑。原型がもうありません。いろいろやってみたのですが、どうやらアニメには弱いようです。
一応背景ありでも試してみましたが、こんな感じになります。
ある意味すごいですね笑。こんな感じで笑わせてくれるにはすごくいいツールかもしれませんw
ただ、思ったように動いてくれませんでした。他にもプロンプトを試行錯誤してやってみましたがご覧の通りです笑。
念のため、背景だけでもやってみました。
おお〜いい感じです。これは結構使えそうです。
対象物がないときは案外使えるかもしれませんね。
続いて車でも試してみました。
やっぱりダメですねｗ
続いてアイドルです。
リアルからリアルだといけそうな感じでしたが、別人になってしまいました笑
ってことでRunway Gen-2では、背景以外はまだまだといった感じです。
Luma ai
公式サイトは下記です。
初めの画像と終わりの画像を添付してプロンプトを入力するようです。
無料で使えるはずだったのですが、なんと使えませんでした…
ということで諦めて他のAIに移ります。
KLING AI
公式サイトは下記です。
結構細かく設定できるんだなーと。こうやって他の動画生成AIとの違いが見えてくるのが面白いです。
いざ生成しようとしたのですが、なんと全然生成されません笑。
1日待っても3日待っても生成されず、ついにはTry againとなってしまいました。
しかし、めげずにTry againして待っていると、一部生成されましたので、下記にアップしています。
いかがでしょうか。Runway Gen-2の時よりは精度が高い気がします。
生成が安定しておらず、時間がかかってしまうのはデメリットですが、クオリティを考えるならこちらを採用してもよさそうです。
Pika
公式サイトは下記です。
こちらもKLING AI同様、生成に時間がかかり、安定していません。一部アップします。
ダンスはしていませんが、素材を活かして自然な動きに仕上がっています。
続いて下記です。
カメラワークのプロンプトの問題なのかうまくいきません。
自然なうごきをつけたい場合にはいいかもしれないですね。他は生成できませんでしたのでこちらで以上です。
Hailuo AI
公式サイトは下記です。
こちらは登録した最初の3日間はいろいろ使えるみたいなので、一旦全てのパターンやってみました。
真ん中の感じ結構いいですね。しっかりダンスしていますし。一方で左端は壊滅してますが笑。
車は別の車になってしまいましたが、しっかり道路の上を走っている様子が伝わりますね。
続いてアイドルです。これは別人になってはいますが、ダンスしてますね。バックダンサーの方も動きがついていてすごいなと。
まだまだ実用では使えませんが。
これで以上になりますが、実際に有料だとどのくらい違うものなのか気になりましたね。
精度や生成時間、どんなジャンルや内容に強いのかとか傾向がわかるといいのですが。
この辺は今後の動きに期待しています。
それでは〜
v0とClaudeで『かぞえてなんぼ』を作った過程をまとめてみる
今回は、v0とClaudeで『かぞえてなんぼ』を作った過程についてまとめていきます。
ちなみに前回のブログでも記載してますが、下記のようなカウンターを作りました。
それではみていきましょう。
まずはv0で命令
v0は下記公式リンクになります。
詳しい使い方はここでは触れませんが、下記のように作りたいイメージを指示してみました。
実際にできあがったものが下記になります。
なかなかいい感じです。もっとできないかと思っていたのですが、期待以上のできでした。
コードを見てみましたが、Reactベースで書かれていました。いくらAIで色々できるようになったからといって、Reactはフロントエンドを学んでいないと敷居が高いですよね。
下記のようにパッケージをインストールする指示もありますが、ここではあえて無視しReactを使わない方法で対応してみます。
問題はこの生成されたコードをどうやってローカル上で動くようにするかです。ではやっていきましょう。
Claudeを活用して変換してもらう
Claudeは下記公式リンクになります。
こちらも詳しい使い方は触れません。別にChatGPTに聞いてみるのでもいいと思います。
今回は下記のように聞いてみました。
Reactで生成されたコードを全て貼って、HTML、CSS、JavaScriptに変換してもらう指示を書きました。
生成結果は下記です。全ては載せていませんが、これでWeb制作でコーディングを学習している方でも読みとれる内容になりましたね。
このコードをサーバー上で表示してみると、下記のようになりました。
若干見た目は変わってしまいましたが、機能面は問題なかったです。
Claudeはthree.jsも意外といけた
ここから少し脱線しますが、交通量調査のカウンターということで、背景に何か数えられるものを入れたいという発想になり、three.jsで作ってもらうことにしました。命令は下記のようにしました。
実際に生成されたのが下記です。1から作るより断然速いですよね。シンプルなものであればAIに頼るのもよさそうです。
ということで話を戻します。
ここから先は動きやデザインの調整
ある程度自分のやりたい仕様が実装できていれば、ここから動きやデザインなどの調整に入っていくといいと思います。
ここは普段のWeb制作フローとは少し違いますね。
AIが絡む場合は、仕様面の可否をAIに実装してもらい確認→デザイン→AIを活用しながらコードの微調整。
こんな手順になると思います。
残念ながらデザインの過程でAIを活用する方法は、なかなか思い浮かびません。自動でFigma等に作ってもらうとかできればいいのですが、現状ではイメージに近いパーツや背景などを作ってもらって、自分の発想になかった可能性を広げるための役割くらいしかないですね。
あれこれ検討して、下記のようになりました。
この見た目にするのに、AIを使ったのは背景の道路と車の動きのみです。他は使いませんでした。イメージからAIがコードを生成してくれるのはまだまだ実用では難しい気がしています。
以上になります。AIを組み合わせてうまく活用すれば、自分の作りたいものが意外と簡単に作れるなと思いました。発想次第ではもっといろんなものが作れそうですね。
【無料】ひらめきトリガーをリリースしました！
何かのひらめきのきっかけになれたらいい。そんな想いで「ひらめきトリガー」を作成しました！
さらに読む
【無料】『かぞえてなんぼ』をリリースしました！
交通量調査の定番カウンター。あれをWeb上で作れないかなーと思い、v0とclaudeを用いて作ってみました！
さらに読む
Figmaで作ったsvgの棒グラフや円グラフを実装時にアニメーションさせたい
本日は朝までFigmaですね！
さらに読む
本日がドラフト会議ってことで、こういうWeb制作のお仕事もあるよって話
さあ、本日はいよいよドラフト会議ですね！
さらに読む
デザインや実装などで役立ちそうなサイトをまとめてみた
ブックマーク整理をしていたら、いっぱい出てきたのでこの機会にジャンル別にアップすることにしました。
さらに読む