[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする どうも！オペレーション部の西村祐二です。 最近、Next.jsなどでフロントエンドの実装も行うことが増えてきました。 実装を進めていくと、page.tsx,layout.tsx,index.tsx,route.tsなど同名のファイルが増えてきて、どのファイルを開いているか分かりづらいなと思う場面がありました。 VS Codeのv1.88で開いているファイルタブのラベルをカスタマイズできるようになったので、その設定方法を紹介したいと思います。 Visual Studio Code March 2024 結論 最初に結論として、settings.jsonに下記設定をすることでディレクトリ名も表示されるようになりタブを見やすくすることができます。 .vscode/settings.js

yamlでテストシナリオを書いたらそのまま実行できる……そんな夢のようなシナリオテストツール"runn"の紹介とやってみた記録です これまでのシナリオテストツールに対する課題感 シナリオテストツールといえば、 Cucumber や Gauge といったツールが有名です。 ですが、これらのツールは「シナリオファイル」とは別に、シナリオを実行するためのコードも書かないといけません。しかも、そのコードではAPIを呼び出す処理を特定のプログラミング言語を使って書かなければなりません。その中には、HTTP Clientを実際に操作するような処理も含まれます。 私は「シナリオテストがしたい」のであって、「シナリオに沿ってAPI呼び出しを行う処理を書きたい」のではありません。こういった課題感を、ここ数年ずっと抱えてきました。 そんなとき、ついに見つけたツールが "runn" でした。 APIのシナリオテ

私は開発寄りのエンジニアであり、テストやQA専門の方と同じチームで頑張る機会が少なかったのですが、「なるほど、こうやって考えて、こういうツールを使っているのか」と非常に勉強になりました。 こんにちは。AWS事業本部モダンアプリケーションコンサルティング部に所属している今泉（@bun76235104）です。 最近ではアジャイル開発やスクラム開発が多く採用され、ビジネスのスピードに負けないようにプロダクト開発・リリースのスピードが求められれている中で、「いかに効率よく、かつ効果的なテストをしていけるか」というのはテスト担当だけでなく、開発メンバー全員で考える必要があると思います。 とはいえ、実際のチームには「専任のQAエンジニアやテストアナリストはいない」ということは非常に多いと思います。 基本的なテスト技法は本で学んできたけど、どういう時にどんな技法でテストを設計すればよいの？ 本職のテスト

こんにちは、森田です。 最近周りの人から Python でアプリ開発のできる Flet について教えてもらい、面白そうなのでチュートリアルをやってみました。 よかったら参考にしてみてください。 Flet とは Flet は、フロントエンド開発の経験がなくても、簡単に Web、デスクトップ、モバイル アプリケーションを開発できるフレームワークです。 開発はPythonで行うことができ、内部的には、Flutter を利用しているようです。 標準でウィジェットが用意されているため、フロントの開発を行うことなく、少ない労力で、アプリとして動作させることができます。 Python で複雑すぎないアプリを作りたい場合にピッタリのフレームワークとなります。 やってみた 本記事では、チュートリアルに従って、電卓アプリを作ってみます。 なお、本記事では、Mac Python 3.8.13にて行います。 ライ

simple-git を使って、TypeScript による自動化事例を記事に致しましたが、TypeScript による cli のフレームワークを主に説明していたり、方向性が微妙なポストだなぁと反省…。 こんにちは、高崎＠アノテーション です。 はじめに 我々が行っている作業におきまして、手動でファイルを更新することや環境を整備することは少なくありません。 以前から手を抜いて少ない工数で効率よく、かつ人為的ミスを削減することを生き甲斐としておりまして、手動でファイル操作をするものがあれば、以前ですと Linux のターミナル上で作業していたこともあり bash シェルで自動化を行う方法はないか、を常に考えていました。 ファイルの変化を見る場合はgitを使ってローカルでリポジトリを組んでみたり、結果の文字列を捏ねて諸々処理する時には、シェルを実装するに当たって欠かすことのできないawkやs

Guten Tag、伊藤です。 何気なく Web 版の Excel でスクリプトを使おうと見てみたら、GAS のようなサンプルスクリプトが出てきて驚きました。 「Office スクリプト」という TypeScript で記述できるスクリプト機能で、今年5月末にGAが開始したばかりなんですね！ しかし、同じエクセルファイルをアプリ版で開いてみると、従来のVBAが表示され、こちらのスクリプトエディタは表示されません。というのも、現時点で Web 版の Excel のみで利用可能な新機能なんですね。まさに Google スプレッドシートのスクリプトのようです。 ということで、今回は簡単に使ってみた内容を紹介します。 Officeスクリプトの始め方 まず、利用には商用ライセンスでウェブ版などの要件を満たしている必要があります。 現時点で要件として記載されているのは以下の通りです。 1. Excel

Google Apps Scriptの環境構築をVSCode上で行う方法について詳しく解説していきます。clasp,asideを使って構築するので、爆速で構築できます。 ことのはじまり 私は最近Google Apps Script(GAS)の学習を始めました。 GASの学習を始めると、まずはAppsScript公式のIDEでスクリプトを書いていくことになると思います。 しかし、普段VSCodeを使い慣れている身からすると、VSCodeの便利機能が使いたくて仕方なくなります。 それじゃあ、使い慣れたVSCodeを使おうじゃないか！！ AppsScript公式のIDEだとGitに差分を残していくこともできないぞ！！（できます） というわけで、GASをVSCodeを使って開発する為の環境構築の手順を書いていきたいと思います。 前提条件 VSCodeがインストールされている Node.jsがインス

最近プレゼン用のスライド資料を作成したのですが、文字だけだと淋しかったので挿絵が欲しいな、と思いました。 資料がAIサービスに関するものだったので、せっかくなのでここは挿絵の生成はmidjourneyにお願いしよう！と考えました。そのうえで、和やかな雰囲気を出したいなーという思いもあり、どうせ生成するならﾈｺﾁｬﾝ画像にするか〜と考えました。結果として大量のﾈｺﾁｬﾝ画像を生成したので、みなさんに共有するとともに、どういうプロンプトで生成したのかなど軽く解説したいと思います。 Midjourneyについて Midjourneyは、入力したプロンプトをもとに画像を生成するAIサービスです。 チャットサービスであるDiscord上で利用する点が特徴的です。 細かい使い方はここでは説明しませんが、Discord上でスラッシュコマンド/imagineを入力し、生成するためのプロンプトを引数として入

もちろん裏取りは必要ですが、エディターの設定ファイルをどう書くのかAIに聞いてみるのも面白かったです。特にエディターは「○○みたいにしたい」というのを言語化して、どう調べれば良いのかわからなかったので今後も助けてくれそうな気がしています。 こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。 今回は超がつくほどのの小ネタなのですが、生成系のAIにVSCodeの設定周りについて聞いたり、作業をお願いしたらとても快適だったので使い方の一旦を紹介します。 やってみたことは以下のとおりです。 独自スニペット用のJSON文字列を書いてもらう キーボードショートカットの設定（keybindings.json）の書き方を教えてもらう 設定ファイル（settings.json）の書き方を教えてもらう 実際にやってみた 今回試している環境は以下のとおりです。 試し

確かに、全部ありはイメージサイズが小さいです。 rm -rf /var/lib/apt/lists/*も同じ値になっています。 apt-get cleanだけを行ったものは両方ない場合と同じになっています。 それぞれのコマンドの意味を見ていきます。 apt-get clean apt-get cleanはaptがダウンロードしてきたDebianパッケージファイルを削除するためのコマンドです。 ダウンロードされてきたファイルは/var/cache/apt以下に一時的に保存され、再度インストールする際はダウンロードせずこちらが使用されます。 ではなぜこのコマンドはイメージサイズに影響を与えなかったのでしょうか？ この秘密は/etc/apt/apt.conf.d/docker-cleanにあります。 ここにはaptの設定が書いてあり、内容は以下のとおりです。 docker-clean DPkg:

dotenvをインストール flutter_dotenvのパッケージをインストールします。 flutter pub add flutter_dotenv .envファイルを作成 環境変数を管理するためのファイルを作成します。 .env VAR_NAME ="dummyValue" ファイルをgitで管理しない場合は.gitignoreに追加しておきます。 .gitignore 〜〜〜 .env .envファイルをアセットに追加 Flutterアプリからファイルを読み込めるようにするために、pubspec.yamlのassetsへ.envファイルを追加します。 pubspec.yaml assets: - .env 環境変数を読み込み .envファイルをFlutterアプリで読み込みます。 lib/main.dart import 'package:flutter_dotenv/flutte

Secret Manager に保存した機密情報を、Cloud Functions の Python コードから取得してみた。 こんにちは、みかみです。 やりたいこと Google Cloud でパスワードなどの機密情報を安全に保管したい Google Cloud のシークレット管理サービス Secret Manager を使ってみたい Cloud Functions 関数の Python コードから Secret Manager にアクセスしたい 前提 Google Cloud SDK（CLI コマンド）の実行環境は準備済みです。 本エントリでは、環境設定不要の Cloud Shell を使用して CLI を実行しました。 Cloud Shell の使用 ｜ Cloud Shell ドキュメント シークレットを作成 Secret Manager のシークレットとバージョンを作成します。

こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 私は普段のローカル開発環境として、Dockerを利用した開発を行っており、このコンテナ環境はsshを利用してVS Codeで接続および開発できるようにしています。 一方で、VS Codeを利用しているので「せっかくVS Codeを利用しているのであれば、Remote Development（のコンテナ機能）を利用して開発したい！」という想いから設定をしてみたので、その設定方法についてまとめておきたいと思います。 前提 まず、元々の環境についてです。 OSなど OSはMacOSで、DockerについてはDocker Desktop for Macを利用しています。 VS Codeの拡張機能 VS Codeの拡張機能に「Remote Development（ms-vscode-remote.vscode-r

はじめに アノテーションの髙嶋です。 Google Apps Script（以降、GAS）を書く際、みなさんはどうやってコードを書いてますか？私はTypeScriptで書いています。 今回はGASをTypeScriptで記述して実行する手順を書いています。 なぜTypeScriptで書くのか 型があるって素敵じゃないですか？ JavaScriptだと変数の宣言時や関数のパラメータや戻り値に対して型は指定せず、実行時に入っている値をもとに決定されます。（動的型付け言語） 言ってしまえば「なんでも入れられます」という状態です。なので、変数に対して誤った値を設定していても気づけず、実行しないと問題なく動作するか確認できません。 一方、TypeScriptは変数の宣言時やメソッドのパラメータや戻り値にstringやnumberなどの型を指定することができます。（静的型付け言語） 型を指定することで

はじめに アノテーションの髙嶋です 今回はGoogle Apps Script（以降、GAS）の開発環境を自端末内に構築した際の手順を書いています。 GASにはGoogleが提供しているWEBエディターがあるので、そちらを使用すればすぐにプログラムを書き始めることができます。 私はVisual Studio Code（以降、VSCode）を使用したいので、今回のような環境を構築しています。 実行環境 今回の実行環境の情報です。 claspというNode.jsのパッケージを使用するため、Node.jsがインストールされている必要があります。 node --version v16.8.0 npm --version 7.22.0 claspの詳細はこちらで確認できます。 https://github.com/google/clasp 環境構築 設定 下記からGoogle Apps Script

VS Code の「スクリーンキャストモード」使ってますか？ スクリーンキャストモードとは 百聞は一見に如かず。 お分かりでしょうか。どのキーを入力したのかが一目瞭然です。マウスもクリック時には赤丸が表示されるのでどこをクリックしたかが分かりやすくなっています。（マウス押下時の黄色はスクリーンキャプチャソフトが付与したものです） スクリーンキャストモードは VS Code 1.31 January 2019 で搭載された機能ですが、意外と知らない人も多く、私自身この機能の名前がパッと出てこないこともあったので今回改めて紹介してみました。 https://code.visualstudio.com/updates/v1_31#_screencast-mode スクリーンキャストモードを有効にする デフォルトではショートカットキーは割り当てられていません。コマンドパレットから Develope

AWSアクセスキーセキュリティ意識向上委員会って何？ 昨今、AWSのアクセスキーを漏洩させてしまうことが原因でアカウントへの侵入を受け、 多額の利用費発生・情報漏洩疑いなど重大なセキュリティ事案が発生するケースが実際に多々起きています。 そこで、アクセスキー運用に関する安全向上の取組みをブログでご紹介する企画をはじめました。 アクセスキーを利用する場合は利用する上でのリスクを正しく理解し、 セキュリティ対策を事前に適用した上で適切にご利用ください。 tl;dr 開発をはじめる前に、次の手順を実行しよう シェルスクリプトの保存 次のシェルスクリプトを ~/.git-template/hooks/pre-commit として保存しよう。 #!/bin/sh FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\

Amazon API Gateway について紹介し、API を作成してデプロイする方法を学習していただける無料デジタルコース Amazon API Gateway for Serverless Applications (Japanese) - 75min をローンチしました? 認定インストラクターが日本語でスタジオ収録していますので是非！https://t.co/emJoRhImIH pic.twitter.com/3zEnTb6WI8 — Wataru Nishimura (@kuwablo) January 27, 2021 上記で紹介されているAPI Gatewayを学べるEラーニングを受講したのでレポートします。 Amazon API Gateway for Serverless Applications (Japanese) 良かったこと 体系的に学べる API Gatewa

はじめに 皆さんはgitコマンドを扱う時にCLIを使っていますか？いちいち「git commit」や「git merge」などのコマンドを打ったりhistoryから探したりするのって面倒ですよね。ただGUIのツールを使っても毎回画面移動が必要になるので、見やすくても面倒は残ります。そんな方に簡単なキー入力だけでgitコマンドの実行が可能になるツールの紹介です。先輩(@shuntaka)からの紹介で入れてみて、開発中に使っていてかなり便利なツールだと感じたので紹介記事書きました。 lazygitとは lazygitとは、git commandのためのシンプルなターミナルUIです。lazygitはすでに存在しているリポジトリに対して、主にコミット・ブランチ操作をCLI上の画面から簡単に実行することができます。画面の操作などは基本vimのキーバインドも使えるのでvimの操作に慣れている人には特に

はじめに おはようございます、加藤です。年末年始は実家の北海道に帰省するつもりだったのですが、見事にインフルエンザB型にかかってしまって、急遽キャンセルしました... 予定が全て吹っ飛んで暇になったので、年末年始は下記の教材を使ってVue.jsを勉強していました。 超Vue JS 2 入門 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む) まだ7割しか終わっていないですが、せっかくなので簡単なゲームをインストール可能な状態で作って公開してみました。 新規プロジェクトの場合 Vue CLIで新規プロジェクトを作成する際に、指定する事でPWAとしてプロジェクトをセットアップできます。 npx -p @vue/cli vue create new-project # Manually select features を選択する Vue CLI v4.1.2