web制作に関するhapilakiのブックマーク (1,210)

  • 無料のチャットAIをブラウザで開きまくってコーディング補助をさせる方法、提案者はCursorなどのAIエージェントより便利と語る

    ChatGPTやGeminiなどのAIサービスには無料のもののあれば有料のものもあります。コンテキストエンジニアリングツールを開発するDetroitTommy(Tom)氏は、ブラウザで大量のタブを開きっぱなしにして各種AIサービスを用途に応じて使い分けているとのことで、普段使いしている無料AIサービスの一覧をブログ記事で公開しています。 My AI Code Prep & Cline Workflow for Budget Coding/Debugging (Part 1) https://wuu73.org/blog/aiguide1.html プログラミングを効率的に実行できるツールとして、AIエージェント搭載エディタのCursorや、AIエージェント拡張機能のClineなどが人気を集めています。しかし、これらのAIエージェントはファイルの内容やフォルダ構成など多様な情報をプロンプトと

    無料のチャットAIをブラウザで開きまくってコーディング補助をさせる方法、提案者はCursorなどのAIエージェントより便利と語る
    hapilaki
    hapilaki 2025/08/13
    各AIの回答をまとめて表示してくれるAIの登場が待たれるね。
  • メールアドレスやURLの例に使えるサンプル用ドメイン [ホームページ作成] All About

    メールアドレスやURLの例に使えるサンプル用ドメインメールアドレスやURLの例を書きたいとき、誰かに所有されているドメイン名を使ってサンプル文字列を作ると問題があります。URLやメールアドレスなどの例示に使えるドメイン名としてexample.comなどいくつかのドメイン名が用意されていますので、それらを使ってサンプルを書きましょう。危険なサイトに繋がる可能性もある紛らわしいドメイン名にも注意して下さい。 例示用に使えるドメインには example.com などがある 説明用のサンプルとして、適当なURLやメールアドレスを書きたい場合があります。しかし、誰かが所有しているドメイン名を使ったURLやメールアドレスをサンプルとして書くのは望ましくありません。また、今は誰にも所有されていなくても、将来的には誰かに使われる可能性のあるドメイン名を使ってURLやメールアドレスを書くことも望ましくありま

    メールアドレスやURLの例に使えるサンプル用ドメイン [ホームページ作成] All About
    hapilaki
    hapilaki 2025/08/09
    “2ndレベルドメインとしては下記の3つのドメイン名が例示用として予約されています。example.com example.net example.org これらのドメイン名は、例示用ドメインであって誰も取得できないことが決まっている”
  • グローバルIPを確認するサイトで安心できるのはどこ? - Qiita

    経緯 業務でCircleCIを導入することになりました。 ただ、EC2にIPアドレス制限をかけていたため、 ホワイトリストにIPアドレスを追加する必要があります。 1.サーバーから現在のグローバルIPを確認 2.CircleCIからEC2のセキュリティグループにグローバルIPを追加 3.SSHで接続 一連の動作の実装が完了したところで再度実行。 なぜかグローバルIPが取得できず動かない... グローバルIPの取得方法 確認したところ、ifconfig.meのサーバーが落ちていました。 グローバルIPはサーバーが持っていない情報です。 そのため、サーバーが自分のグローバルIPを確認するには、他のウェブサイトから確認してもらい、その値を返してもらう必要があります。 今回は、ifconfig.meというサイトに確認してもらうようプログラムを組んでいましたが、ifconfig.meのサーバー自体が

    グローバルIPを確認するサイトで安心できるのはどこ? - Qiita
  • box-shadowを一方向のみに出す

    box-shadowを一方向のみに出したいことがよくあるので、指定方法をメモしておきます。 サンプルコード 各方向に出すパターンを作って試してみます。 HTML <div class="box top"></div> <div class="box right"></div> <div class="box bottom"></div> <div class="box left"></div> まずは普通に設定してみます。 box-shadowの設定は「box-shadow: X方向の距離 Y方向の距離 ぼかし 広がり 色 内側表示(inset);」のようになります。 CSS .top { box-shadow: 0 -5px 3px #000000; } .right { box-shadow: 5px 0 3px #000000; } .bottom { box-shadow: 0 5

    box-shadowを一方向のみに出す
  • AIで『架空のYouTuber』を作る方法と、今とるべき戦略について。|AI FREAK - 最新のAIツールをご紹介

    架空のYouTuberが、現実では不可能な”ぶっ飛んだ企画”に挑戦するような動画ですね。 もちろんAIを使って生成しているのですが、上手に企画を考えている人は『YouTubeでも100万再生するくらい』に注目を浴びていたりします。 人気YouTuberですら100万再生はなかなかこの難しい時代に、かなり可能性を感じるコンテンツですよね。 この流行りに伴って、 この手の動画ってどうやって作るんですか? という質問が増えてきたので、作り方などをご紹介していこうかと。 しっかり読んで実践して頂ければ、作り方自体は結構簡単です。 ちなみに個人的な意見ですが、多分来年以降は 「この手のAI YouTuberや、もっと作り込んだAIインフルエンサーがめちゃくちゃ増えるんじゃないかな?」 と思っています。 興味がある方は今のうちに着手して"先行者利益"を狙うのがベターかと思います。 では早速、詳細を見て

    AIで『架空のYouTuber』を作る方法と、今とるべき戦略について。|AI FREAK - 最新のAIツールをご紹介
  • 個人開発 完全ガイド | izanami

    私(@commte)は、この izanami を、個人開発しました。 このページでは、その知見をもとにアイデア創出や技術選定など 個人開発を成功させるための情報全てを共有します 個人開発の完全ガイドが凄い! → Claude Code・リソース集・設計ミス集・マネタイズ・注意すべき法律・技術選定コストの落とし穴・技術スタック選定例・大成功したプロダクト共通点・要件定義ガイド・ロードマップ・AI駆動開発 https://izanami.dev/kojin-kaihatsu

    個人開発 完全ガイド | izanami
  • Hugo 静的サイトジェネレーターによるサイト構築と公開 | パソコン工房 NEXMAG

    「静的サイトジェネレーター」を使用すると、WordPressなどのように動的にページを生成することなく、表示が高速で安定したサイトを運用することができます。また、最近増えてきている静的サイト用のホスティングサービスを利用すれば、別途Webサーバーを準備しなくてもサイトを公開することが可能です。 今回は「Hugo」というオープンソースの静的サイトジェネレーターを用いて、サイトの作成と公開を行う手順についてご紹介します。 静的サイトジェネレーターによるサイト運用のメリット・デメリット まず、静的サイトジェネレーターでWebサイトを運用する場合のメリットとデメリットについて整理してみました。 静的サイトジェネレーターによるサイト運用のメリット 表示速度が早い いわゆる動的サイトでは、アクセスの都度サーバー側でページ生成をするため、ページの表示に時間がかかる場合がありますが、静的サイトではあらかじ

    Hugo 静的サイトジェネレーターによるサイト構築と公開 | パソコン工房 NEXMAG
  • Cloudflare Pagesの利点および導入手順 - 点と接線。

    こうして比較してみると、やはり後続なだけあってCloudflare Pagesの優秀さが目立つ。Netlifyに関してはフォームの設置を検討しないのであれば、Cloudflare Pagesより優先して採用すべき理由は特に見当たらない。ヘッドレスCMSとの連携はNetlifyの大きな利点だったが、つい昨日、Deploy Hooksなる新機能が発表され、Cloudflare Pagesでもじきに同様の運用が行えるようになった。 Firebase Hostingもかつては速度面での優位性があったが、既に関連のWebサービスがFirebase上で構築されていて、部分的に静的サイトを要する案件でもなければあえて使うメリットはなさそうだ。Firebaseの機能はあまりにも膨大すぎるせいか、ブログ用途ではかえって煩雑さを招いている節が否めない。その点、Cloudflare Pagesの設定項目は上手く

    Cloudflare Pagesの利点および導入手順 - 点と接線。
  • 素人が参院議員の議案賛否検索サイトを作ってみた

    参議院議員がこの6年間の議案に対し、どのような投票をしたのかが分かるサイトを作りました。 WEBに関しては点で素人ですが、以下で紹介するDBやツールに頼って1週間で取り敢えず形にしてみました。 投票日直前の公開になってしまいました。 もう少し早く取り掛かって早く公開できれば良かったですね。 ごめんなさい。 背景 ボートマッチの問題点として「未来のことはいくらでも言える」という構造的な限界があります。実現する気のない公約が含まれている可能性もあり、実際に守られるかどうかも不透明です。 一方、過去の行動は隠せません。とりわけ現職議員においては、「これまでの議案にどのように投票したか」を見ることで、主張と行動の整合性を判断できます。 (「議案」とは、法律、予算、条約承認、人事、決議などの国会で話し合う案件のことです。) 参議院のWebサイトでは、過去の議案の投票結果を見ることができます。議員がそ

    素人が参院議員の議案賛否検索サイトを作ってみた
  • JavaScriptでオブジェクトをマージ(結合)する方法、JSONのマージをする方法 - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

    JavaScriptでオブジェクトをマージ(結合)する方法、JSONのマージをする方法 - Qiita
    hapilaki
    hapilaki 2025/07/19
    “const result1 = Object.assign(a, b); スプレッド構文をつかうと、短い記述で書ける スプレッド構文をつかった例 const result1= { ...a, ...b };”
  • i18nを正しく実装する方法 - Qiita

    i18nは「国際化 (internationalization)」の略で、ソフトウェアアプリケーションを設計する際に、エンジニアリングの変更なしにさまざまな言語や地域に適応できるようにするプロセスを指します。 記事では、i18nの基を紹介し、その際に注意すべき一般的な課題について議論し、最後にGNU Artanisにおけるi18nの実装方法をお見せします。 i18nの基 i18nの基的な考え方は、テキストをコードから分離することです。これを行うには、テキストをキーにマッピングする辞書を使用します。このキーをコード内で使用することで、コードを変更することなくテキストを簡単に翻訳に置き換えることができます。 最も簡単な例を見てみましょう。 例えば、ウェブサイトのタイトルが「Hello」で、これを複数の言語で利用可能にしたい場合を考えます。仮に次のような辞書を作成するとします。 そして、

    i18nを正しく実装する方法 - Qiita
    hapilaki
    hapilaki 2025/07/19
    “単純にJSONベースの辞書に全てを保存するだけでは不十分で、以下の点も考慮する必要があります。 日付と時間のフォーマット 数字のフォーマット 通貨のフォーマット 複数形対応”
  • 【JSの全文検索エンジン】elasticlunr.jsを触ってみた~インストールからパイプライン、日本語対応など~ - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

    【JSの全文検索エンジン】elasticlunr.jsを触ってみた~インストールからパイプライン、日本語対応など~ - Qiita
  • 「NotebookLM」は業務でどう活用できる? 社内活用シナリオを考えてみた - Qiita

    はじめに この記事はQiita Tech Festa 2025参加記事です。 突然ですが、皆様はNotebookLMを普段活用されていますか? 私は、約1年前に営業職から同社内バックエンドエンジニアに転向した背景があり、AIツールに触れていると、「これ、自分たちの開発業務だけでなく、営業サイドの◯◯業務をもっと効率化できるかも?」と考えることが多々あります。 この記事では、数あるAIツールの中でもGoogleNotebookLMを使い、自組織だけでなく営業やバックオフィスなど社内他組織への業務効率化にどう寄与できるか、その具体的な活用シナリオをご紹介します。特にビジネス部門へのAIツール導入を企画・推進する際の1事例として参考にしていただければ嬉しいです! そもそも「NotebookLM」って何? GoogleJapan公式 解説記事 NotebookLMは、Googleが提供するAI

  • ChatGPTをヤバい「コンテンツ制作チーム」に変える裏技が、想像以上にエグかった|テツメモ|tetumemo|Newsletter

    個人的に私はClaude 4の書く記事の方が好きですが、一般的にはChatGPTを利用している方の方が圧倒的に多く、「ChatGPTもほしい!」という声を多数いただいていました。 そんな中、絶妙なタイミングでChatGPTのProjects機能がアップデート。Projects内でDeep Researchもできるようになり、画像も生成できてしまうので、試行錯誤を繰り返して仕上げました。 これなら1の記事を書き、投稿まで丸一日かかっていた人も「Deep Research→記事執筆→画像生成SNS文→音声台を生成する9段階プロンプト」を使えば、すべて20分程度で完了すると思えたので、急ぎニュースレターで配信を決めました。 ※出力した音声台は、Gemini 2.5 Pro Preview TTSを使って、誰でも無料でAI音声化できます 👇️ というわけで、早速どのように「Deep Re

    ChatGPTをヤバい「コンテンツ制作チーム」に変える裏技が、想像以上にエグかった|テツメモ|tetumemo|Newsletter
  • プログラミング1ミリも分からない人がGemini CLI始めるまでの全手順(Win篇)|ミヤマ|営業部にいるデザイナー

    【無料】で全員、Gemini CLIを動かすまで読めます! 会員さんは、ボーナス記事までお読みいただけますよ😊 GoogleのGemini CLIが無料ですごい! なんかよく分からんが、MCPにも対応?とかなんとか……。 とにかく、すごく便利そうなのは分かった! そしてAIで自然言語で処理できるっぽいのも分かった! 「でもインストール分からない~🤤」 「プログラミング1ミリも分からない~🤤」 というド素人、プログラミング全然分からないわたし「ミヤマ」と、サポーターの「Gemini(WEB)くん」との戦いの記録を共有します。 ターミナルを「黒い画面」と言う、気で1ミリも分からない人間がインストールして使えるようにセットアップするまでの全記録です。 ちなみにAIじゃなくて、人間ががんばって書きました! 💡オススメなポイント💡 プログラミング分からない人特有の「つまずきポイント」も、

    プログラミング1ミリも分からない人がGemini CLI始めるまでの全手順(Win篇)|ミヤマ|営業部にいるデザイナー
  • API Key 無しで Gemini をセキュアに Google Apps Script から利用する - エムスリーテックブログ

    文に関係ないドッグランに行ったときの犬たち こんにちは、AI機械学習チームの山(@hiro_o918)です。 このブログは AI機械学習チームブログリレー 5 日目の記事です。 これまでのリレー記事でも出てきたように、弊社でも AI を活用したプロダクト開発が進んでいます。 それに加えてビジネスサイドでも AI 活用が進んでおり、OSS 版 Dify を導入・運用したり、Google Workspace に付帯する Gemini を活用したりしています。 このような状況から、AI 機能の実装に関してビジネスサイドから相談を受ける機会が多いのですが、その際には利便性だけでなくセキュリティ面も充分考慮した上で導入する必要があります。 そこで、今回は Google Apps Script (GAS) を使って、Google の生成 AI モデルである Gemini を API キー無しで

    API Key 無しで Gemini をセキュアに Google Apps Script から利用する - エムスリーテックブログ
  • 国民の祝日について - 内閣府

    「国民の祝日」は、国民の祝日に関する法律(昭和23年法律第178号)により、美しい風習を育てつつ、よりよき社会、より豊かな生活を築きあげるために定められた「国民こぞって祝い、感謝し、又は記念する日」です。 国民の祝日に関する法律では、年間に計16の日が「国民の祝日」とされ、それぞれの日の趣旨が定められています。また、「国民の祝日」は、休日とされています。

    国民の祝日について - 内閣府
    hapilaki
    hapilaki 2025/07/02
    このCSVファイルはShift-JISなので注意。CSVを読み込む方の文字コードがUTF-8(BOMなし)などなら、自分でCSVファイルの文字コードを変換する必要がある。変換しないと文字化けする。
  • フルスタックエンジニアの終焉?生成AI後の未来を産業史から考える - arclamp

    生成AIによって、エンジニアがどう変わっていくのか?という、さまざまな論考が生まれているので参戦してみます。 98年からエンジニアをしている僕からすれば「開発生産性の向上」というのは常に提示されきたテーマで、生成AIは大きなジャンプではあったものの、産業の進化としては正常な流れなのかな、と思います。 というわけで、よくある「一般的な産業の進化はこうだったから、IT業界もこうなるはず」という感じの論考をChatGPTにまとめてもらいました。 以下の第2章から4章までは、ChatGTPに文章を生成させてます。 第2章:産業の進化は、「作業」から「判断」への流れだった 生成AIエンジニア仕事を奪うのではないか──そんな議論を耳にするたびに、どこか既視感を覚える。 この風景は、過去にも何度も繰り返されてきたものだ。労働の現場が新しい技術に置き換えられ、役割が変わり、職種の名前が変わり、やがて産

    フルスタックエンジニアの終焉?生成AI後の未来を産業史から考える - arclamp
  • 【無料】グーグル神AIツール5選 「Google AI Studio」はこれがやばい (1/7)

    Google AI Studio」は、グーグルが提供する生成AI開発プラットフォームだが、実は隠れた「無料の神ツール集」とも言える存在である。 ただし重要な点として、このサービスは「実験的な技術」を含んでおり、完全に保証されたプロダクションレベルのサービスではない。Googleの利用規約にも「実験的技術が含まれており、不正確または不快なコンテンツを提供することがある」と明記されている。つまり、無料で高機能な反面、「お試し・実験環境」的な位置づけなのだ。 最大の魅力は、有料級の機能が完全無料で使い放題になることだ。リアルタイム音声対話、テキストから動画生成、1000ページ級PDF一括解析など、他社なら月額数千円~数万円クラスの機能が、Googleアカウントひとつで全て0円。まさに「こんなのタダでいいの?」レベルの神仕様である。「AIお金をかけたくないけど、格的に活用したい」という人に

    【無料】グーグル神AIツール5選 「Google AI Studio」はこれがやばい (1/7)
    hapilaki
    hapilaki 2025/06/28
    神AIツール5選→リアルタイム音声対話、自然な日本語音声合成、動画生成Veo、1000ページPDF一括解析、コードなしアプリ作成
  • Gitアレルギーが治っちゃう!キャラで覚えるGitローカル編(Cursor対応)【1/4】ローカル編 GPTs付き!|コタ

    Gitはじめての方向け、大雑把 把握 ファイル履歴というよりもディレクトリ履歴の方が把握しやすい気がします ●Githubとの違い Github リモートにある履歴機能がある共有Dropbox Git 現在のディレクトリ配下の変更を好きな時点にいつでも戻せる仕組み(ver1…ver1000) ●1 初回 開始時にすること… — kk@study (@kk_design_dev) June 20, 2025 kk@studyさんのこのスレッド、大まかにつかむのにとても分かりやすい! 是非こちらも目を通してみてください。1分かからず読めます。 (kkさん、掲載許諾ありがとうございましたー!) 最初はこのキャラクターだけでやってみよー。GitHubが主役だと思っていたアナタへ実は、Gitの主役は「GitHub」じゃなくて「ローカルのGit」なんです。 GitHubはただの“クラウド上の置き場”。

    Gitアレルギーが治っちゃう!キャラで覚えるGitローカル編(Cursor対応)【1/4】ローカル編 GPTs付き!|コタ