web開発素人だけど、Claude 3.7 Sonnetを使ったら半日でアプリ開発&リリースできた記念記事 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは。 今回はClaude 3.7 sonnetの助けを借りて個人用ミニwebアプリを開発してみました。 普段はサービスデザイナーをしている開発素人の私がClaudeとともにアプリづくりを進めた過程や感想をつづります。 プロンプトやClaudeからの応答を抜粋して載せていますので、初心者のAI駆動な開発プロセスを追体験いただけたら嬉しいです！ プロローグ 「Hey Claude, 俺一人でwebアプリ開発できる確率は？」 『…6%です』 「……ま、そんなところか」 『…あなた一人なら』 「？」 『…あなたは一人ではありません』 「
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
Google Apps Script (GAS) で Slack 連携を実装する前に知っておくとよい 5 つのこと - Qiita
Slack 連携、特にちょっとした通知を Google Apps Script (GAS) からやりたいというユースケースは非常によく聞かれます。本格的なアプリケーション動作環境などを用意することなく Google Workspace (旧 G Suite) のアカウントだけでちょっとした自動化をできるので、重宝しますよね。 ちなみに GAS の正式名称は「Google App Script」ではなく「Google Apps Script」です。たまに誤記を見かけます... Slack 連携で知っておくとよい 5 つのこと さて、本題です。 Slack アプリを Google Apps Script (GAS) で実装する場合、特にインタラクティブな機能の利用において知っておくべき制約があります。この記事では、以下の 5 つの留意点について解説します。ログの有効化など Slack アプリ開
macOSでGUIアプリの環境変数を設定する方法探求 - Qiita
はじめに macOSでGUIアプリの環境変数を設定したいこと、ありますよね？（私はないです） ここではそんなニッチな需要に向けた設定方法を説明します。 この記事で説明すること macOSで起動するすべてのGUIアプリの環境変数を設定する方法 FinderやSpotlightなどから起動するアプリが対象です この記事で説明しないこと macOSで起動する特定のGUIアプリの環境変数を設定する方法 環境変数設定した上でそのアプリをopenするシェルスクリプト作るとかすると良いと思います それかアプリのInfo.plistのLSEnvironmentを無理やり書き換えるとか macOSのシェルの環境変数を設定する方法 すべてのユーザに適用したいなら「/etc/paths.d」、特定のユーザに適用したいなら「環境変数 .bash_profile」「環境変数 .zprofile」などで検索するとよい
本のバーコードを読み取ってNotionで読書録を作成するアプリを作ってみた - Qiita
はじめに はじめまして。インディーゲームを作っております、nyorokoと申します。 ゲームづくりの他に読書が好きで、「読書録を簡単に作成・管理することはできないか？」という問題意識があり、タイトルの通りのアプリを作ってみました。 2022/5/23 思ったよりも反響があったため、加筆した第二弾を公開しました！ 完成したもの 以前Notion APIを用いて、 本のバーコードを読み取る →ISBNを取得する →ISBNから本の情報を取得する →Notionのデータベースに追加する という一連の動作を行うアプリを開発しました💪🏾(´･_･`💪🏾) pic.twitter.com/GqPBPV7sin — nyoroko (@nyoroko_nyoro) February 21, 2022 Notionとは？ Notion公式サイト Notionとは、タスク管理やメモ等を一元的に行うこ
Nuxt v3はどうなるのか - Qiita
2020/09/19にめでたくVue.js v3がリリースされました🎉 さて、私の関心は業務でも利用しているNuxt.jsがVue.js v3に対応するとどうなるのか、Nuxt.js v3はどうなっていくのか気になっています。 Vue.js Amsterdamで紹介されたNuxt.js v3のスライドから個人的に気になったところを抜粋して紹介します。 The State of Nuxt by Sébastien Chopin Nuxt 3 Architecture Updates by pooya parsa 詳しくはスライドを参照ください。 TypeScriptのサポート core や vue-appが型付になる @nuxt/typesやnuxt-tsが不要になる VueComponentのTypescriptサポート（SFC？） ランタイムとnuxt.configのサポート 現状はN
Mac を買ったら必ずやっておきたい初期設定 - Qiita
Mac 初期設定 対象読者 知り合いのエンジニアさん向け Mac初めて買った人 Web系エンジニア向け 環境 macOS Catalina 10.15.3 MacBook Pro (13-inch) 前置き 導入ツールについては良く使うものに厳選してます。 CLI ツールや GUI ツールは必要になってから入れた方がいいかも。 zshの設定、tmuxの設定、vimの設定は別記事にする予定です。 古いですがzsh設定の記事です。 https://qiita.com/ucan-lab/items/1794940a64882021dcb1 設定ファイルのインストール自動化は別記事にします。 私とまったく同じ設定にしたい人はいないと思うので今回は個別インストール記事にしてます。 (一通り書き殴っただけなので、追記するかも) 最初にやること ソフトウェア・アップデート (appleマーク) > こ
Google App Script を V8 に切り替えたらものすごい速くなった - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は衝動的な動機によって書かれており、事実を正確に捉えるのに必要な証拠に欠けていることを予め断っておきたい。 また、分かりやすい数字というものは人間の良からぬ想像力を掻き立てる災いのもとになることも思い出して欲しい。この記事にはなるべく事実だけを書くことにして、自分の推測は「〜かも知れない」とか「〜と思う」と書くことにする。この記事を読まれたみなさんが何らかの推論をコメントやツイッターに書き散らしたい衝動にかられた時は、ぜひ同じことを実践して欲しい。 GAS のランタイムで V8 エンジンが使えるようになった ソース https:
macOSでDockerを使ったGoのアプリケーション開発を爆速にするホットリローダを作った - Qiita
はじめに メリークリスマス！！ みなさんは Go のアプリケーション開発をどのような環境で行っていますか？ 弊社ではゲームのアプリケーションサーバに Go を採用しており、開発は macOS で Docker for Mac を利用しています。開発当初はこの構成による不満は特に感じていませんでしたが、1年半ほど経ってプロジェクトの規模が大きくなったことで、無視できないレベルで開発スピードを低下させる要因となってしまいました。 弊社ではアプリケーション開発にソースコードの自動生成を多用しており、その影響もあってかコードベースの Go のコードは 150万行を超える規模になっています。 加えて、ビルドする際は cgo 経由で利用している C++ のコードもそれなりの量絡んでくることもあり、 Docker for Mac を使った Docker コンテナ上でのビルドに要する時間は、 メモリ8GB
フロントエンドでもTrivyを使って脆弱性対策したい！ - Qiita
伝えたいこと フロントエンドもコンテナ経由でアクセスさせよう コンテナならTrivyを使ってヤバそうな脆弱性を知ることができる TrivyならCIに組み込むことも簡単 multi-stage buildの場合は工夫が必要 いまの状況でできる範囲の脆弱性対策からはじめよう 今回の記事でできること CI上で、本番用のフロントエンドのコンテナをmulti-satge buildでつくり、 Trivyを利用して脆弱性を検知するところまでを目指します。 最後に、Trivyを利用したレベル別の運用イメージも提案します。 導入 週末、Trivyというコンテナ向けの脆弱性検知ツールが正式リリースされました。公開が5日目の5/21 12:00時点で 900star以上獲得しています。 Trivyの詳細は原作者である @knqyf263 さんの｢CIで使えるコンテナの脆弱性スキャナ｣という記事を参照ください。
CIで使えるコンテナの脆弱性スキャナ - Qiita
概要 2019/05/22 CIのcron設定について注意事項を追記 コンテナの脆弱性スキャナを作ったので紹介します。ここでの脆弱性はWebサービスの脆弱性診断で見つかるようなタイプのものではなく、セキュリティアップデートが提供されるようなものを指しています。重ねて説明しますが脆弱性診断で見つけるような脆弱性ではなく、CVE-IDなどが付与される脆弱性です。 まず最初に、ツールは以下にあります。 https://github.com/knqyf263/trivy CIで簡単に使えるように1コマンドで実行可能なものにしました。ただイメージ名を指定するだけで利用可能です。 これだけです。イメージ名を指定すれば勝手にレジストリから取得するので手元にイメージがある必要はなく、それもDockerコマンドに依存せず実装してあるので実はDockerのインストールも不要です。 AWS/GCR等のプライベー
なぜいま Heroku なのか - Qiita
開発中のサービスに Heroku を採用した経緯を社内で周知するために書いた文章なんですが、ついでに Qiita にも貼っておきます（ちなみに Heroku の回し者ではないので悪しからず）。 従来、Heroku は日本で使うにはレイテンシの問題で本番環境での利用が避けられることが多かった これは Heroku の Common Runtime には Tokyo region がなく US 等のサーバーと通信するとレイテンシが大きいため1 実際、Wantedly 社なんかもレイテンシを理由に Heroku から AWS に移行している だが、Service Worker の先読みと Fastly（のような instant purge 可能な CDN）の登場により、このレイテンシの影響は極小化された のではないか 多くのリクエストは Fastly のエッジサーバー からレスポンスを返せるはず
npxが結構良さそうな件について - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 追記：2017/07/12 gist連携時の理解が間違ってたので修正 npm 5.2リリース。npmパッケージのダウンロードと実行を一度に行うCLIツールnpxが同梱された / “Release v5.2.0 (2017-07-05) · npm/npm · GitHub” https://t.co/2CXccPBqcq — Teppei Sato (@teppeis) 2017年7月11日 へー、と思って見に行ったら結構面白かったので雑な紹介を書いてみることにする。 v.5.2.0 リリースノート npxの紹介記事 この記事は紹介記事
Code SplittingでどれくらいReactアプリの初回ロード時間を減らせるか試してみる - Qiita
ということで、前々回書いた通りSSR(Server Side Rendering)したくない派ですが、CSRの問題は解決したいので今回は初期ロード時間対策でCode Splittingを試してみます。 基本的なことしか試さないので、一度も試したこと無い人向け程度の内容かと思います。 Code Splitting この記事で言うCode Splittingはこのproposalにあるdynamic importを使ったCode Splittingのことです。react-routerを使った場合にrouteごとにjsファイルを分けることで、初期ロード時に1つの大きなバンドルされたjsファイルを読み込むのではなく、それぞれのrouteごとに必要最小限のjsファイルを読み込むことで初期ロード時間を低下させることを目的としたものです。(Routeは今回のデモのための例で、Route以外の用途にも使う
Electronが作成・保存するlocalStorageなどのキャッシュディレクトリ - Qiita
保存場所(Windows7の場合) C:\Users%USERNAME%\AppData\Roaming\package.jsonのnameフィールド\ 検証環境 Windows7 Professional 64bit electron-prebuilt 0.36.4 node v5.2.0 Electronを触ることは簡単ですが、余計なゴミ1をできるだけ出したくない。 そこで、ローカルに値を保存できるlocalStorageを使うときは場所を調べておこうと思ったが、検索にうまくひっかからなかった。 しかたがないのでファイルモニターを使って書き込みを監視した。 調べると、localStorage以外にもキャッシュやCookieも同ディレクトリに保存していた。 localStorageを使わないから余計なファイルが残らないわけではないようだ。 同じアプリでもpackage.jsonのname
その使い方はもう古いかも？AngularJS老化チェック（ディレクティブ篇） - Qiita
const app = angular.module("app", []); class MyAppCtrl { } app.component("myApp", { template: `<greeting name="'World'"></greeting>`, controller: MyAppCtrl }); class GreetingCtrl { get upperName() { return this.name.toUpperCase(); } } app.component("greeting", { bindings: { name: "=" }, template: `<h1>Hello {{$ctrl.upperName}}!</h1>`, controller: GreetingCtrl }); angular.bootstrap(document.body, [
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AMP で任意の JS を実行できる amp-script を試してみた - Qiita