本記事はFIXER Advent Calendar 2020 15日目の記事です。 k8sお勉強中の冨本です。半年間毎日k8sと睨めっこして、kubectlでの操作にも多少慣れてきました。しかし流石に毎日となるとグラフィカルで操作性の良いツールとか無いかなぁと思ってしまったりするものです。そこで調べていたらk8sのIDEなるものが。Lensと言うそうです。本記事ではLensとは何か、Lensを使って便利だったところ、Lensにk8sクラスターを登録するまでを紹介します。 Lensとは Lensとはオープンソースかつ無料のk8sのIDEです。Electronベースのアプリケーションで、Windows、macOS、Linuxをサポートしています。結構人気みたいで、Githubのスター数は11000件を超えています。IDEの見た目はこんなかんじ↓ Lensを使って便利だったこと クラスターの切り
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見たり、社内のデザインシステム整備の仕事をやったりしています。 さて、2021年に開催した弊社カンファレンス #pixivdevmeetup にて発表しましたデザインシステムの Web 版実装が先日 OSS 化されました 🎉 1。GitHub と npm から利用できます。 github.com www.npmjs.com 発表時点では「pixiv-elements」という名称でしたが、公開にあたって「charcoal」という名前になりました。「charcoal(木炭)」とはデッサンの道具であり、線を引く、表現の基礎となる素材の一つです。また創作物を主役とするサービスの基盤として、それ自体は色を持たないモノクロの素材である、というニュアンスも含みます。 (ただし、npm パッケージのスコープは
技術部 Site Reliability (SR) グループの id:itkq です。2020 秋タイトルで一番期待しているのはおちこぼれフルーツタルトです。本エントリでは、Web サービスの負荷試験に対する障壁を下げるために、汎用的な Web コンソール開発に至ったまでの話を書きます。 Web サービスの負荷試験の障壁を下げたい クックパッドでは、マイクロサービスを支える基盤が成熟しており、新規サービス開発や、サービスリニューアルなどの機能開発の場面では、疎結合な新規のマイクロサービスとして実装されることが多いです。このようなサービスをリリースする際は、予想されるトラフィックに対して、実際にそれを捌ききれるかどうかテストする、いわゆる負荷試験をすることは一般的です。これまで、サービスリリース時に、負荷試験をきちんと行うこともあれば、負荷試験を行わないこともありました。負荷試験が行われない
GitHub ActionsからGitHub wikiを更新したいことがたまにあります。たとえば、何かのメトリクスを見やすく整形したものなど、repositoryのデータを何らかの形で加工したドキュメントを作りたいときです。コード生成したmarkdownドキュメントをコミットしてもいいですが、それよりはシンプルで運用が楽です。 今回は、GitHub repoで管理する原稿の文字数(など)を継続的に見れるページを作ると便利かなと思って作りました。自分一人だったらローカルで適当なツールを叩けばいいですが、同repoを見れる編集者にも共有したいとなると独立したページがあるほうが便利ですからね。 リポジトリはこんな感じです。 github.com 基本的には、 actions/checkout を使って "${{ github.repository }}.wiki" をcloneして編集してpus
こんにちは!フロントエンドエキスパートチームの @mugi_uno です。 みなさんは Visual Regression Test は普段活用していますか? 昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。 今回の記事では、通常のプロダクト新規開発とは異なる “脱レガシー” の文脈で Playwright を用いた簡易的な Visual Regression Test を試してみたので、導入に至る経緯と、どのように実施しているかを紹介します。 フロントエンドリアーキテクチャとサイレントリリース 現在サイボウズでは kintone のフロントエンドリアーキテクチャプロジェクトと称して、Closure Tools から React への脱レガシー作業が進行中です。プロジェクトの詳細については @koba04 が書いた次の記事をご覧くださ
We're laying the foundation for the future of Next.js with 12.2: Middleware (Stable): Dynamic routing for your entire application. On-Demand ISR (Stable): Update content without redeploying. Edge API Routes (Experimental): High performance API endpoints. Edge SSR (Experimental): Server-render your app, at the Edge. SWC Plugins (Experimental): Extend compilation with your own plugins. Improvements
転職会議事業部の srkw です。 今期事業部内で利用する eslint および prettier の共通ルールを管理するパッケージを作成したので、その工程と成果物をご紹介したいと思います。 なお、今回紹介するパッケージの内容には多分に要修正箇所があり、今後他のプロジェクトとの優先順位を鑑みて、都度改善される可能性があります。その際はこちらの記事も併せて更新できればと考えています。 TL;DR 最終成果物は以下のリポジトリで公開しています。利用リポジトリ側での設定等は README に記載しております。 https://github.com/livesense-inc/eslint-config-template モチベーション 転職会議は現在ページごと・機能ごとにサーバーを別で管理するマイクロサービス構成で開発を行っています。その中で利用する静的コード分析やコードフォーマッタのルールは
はじめに 新年度が始まり、PCを新調された方も多いかと思います。 Macを買ったらやっておきたいおれのための初期設定をおれのために記事にまとめました(備忘録)。 皆さんのお役に少しでも立てたらと思います! 記事が長いので初期設定の際に必要な部分だけチラ見して頂ければと思います おすすめの設定がございましたら、コメント欄などで教えていただけますと喜びます 更新履歴 2020/04/28 finderの設定の章で、.DS_Store ファイルの作成を抑制について追記しました。 2020/04/19 スクリーンショットのファイル名変更について記載しました 2020/04/15 Homebrewの章で、Homebrew Cask, mascli, Homebrew Bundleについて追記しました。OpenInTerminal-Liteについて記載しました 2020/04/09 キーのリピート、入
家電量販店に行くと今でもボイスレコーダーのコーナーがあり人気だ。またスマートフォンにも必ずボイスメモアプリがある。筆者も一時期アイデアをボイスメモで録り溜めていた。しかし、ボイスメモは聞き直す必要があり管理が面倒という欠点もある。そこで、今回はPythonからMicrosoftのAPIを利用して自動的にボイスメモをテキストに変換する方法を紹介しよう。 WAVファイルを音声認識してテキストに変換したところ 音声認識APIを使ってみよう AI技術の進歩により音声認識の精度が向上している。これまでも音声認識の技術はあったものの精度が今一歩だった。そして個人ユーザーが気軽に活用できる感じではなかった。ところが、最近では、各社が競い合うように音声認識の精度向上に力を入れている。各社から発売されているAIスピーカーを積極的に活用している読者も多いことだろう。 そして、大きな点として、Microsoft
CX事業本部@大阪の岩田です。re:invent2019のセッションで知ったAWS Lambda Power Tuningを試してみたので簡単にご紹介します。 AWS Lambda Power Tuningとは? Lambdaのメモリ割り当てを自動で最適化するためのツールです。Step Functionsを利用して対象のLambdaを様々なメモリ設定で実行し、どの設定値が一番パフォーマンスが良いのか?どの設定値が一番コスト効率が良いのか?といった情報をレポートしてくれます。 なにが嬉しいの? Lambdaのチューニング手法として割り当てるメモリサイズを増やすという手法が広く知られています。メモリサイズを増やすことで、Lambda実行環境のCPUパワーや、利用可能なNW帯域が向上します。また、メモリサイズを増やすことで処理時間が短くなり、結果的にコストが下がるという効果も期待できます。しかし
これはなにか cloudflare スタックを使ったマイクロフロントエンドの提案。 特に service-binding を活用することで異なるサービス(ここでは cloudflare worker)から配信されるフロントエンドを統一的にSSRしつつ、開発単位を分離している。 RTT最適化のために qwik で書かれているが、SSR を意識しなければ他のライブラリを採用しても良い。 $ tree . -I node_modules . ├── README.md ├── body │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── Body.css │ │ ├── entry.ssr.tsx │ │ └── root.tsx │ ├── tsconfig.json │ ├── vite.config.t
こんにちは、のびすけです。Auth0のサンプルはダウンロードすると、結構多くのファイルが入っていて、内容を理解するのが難しい印象です。 今回はAuth0のサンプルとチュートリアルを試してみて、 必要最低限に削ぎ落としたサンプルを作ってみたので紹介します。 たったの3ファイルです。もっと削ぎ落としてindex.htmlだけにすることもできますが、あまり我流になると分かりにくいかもしれないのでなるべく公式のサンプル(auth0-samples/auth0-javascript-samples)の構成を変えないようにしています。 また、 サーバーサイドの実装は思い切って無しでGitHub Pagesを使って公開していきます。 静的サイト(Static Site)でのサンプルは思ったより例が無いですね。 完成コードだけを見たい人はこちらをご参照下さい。 動作イメージ 先に完成の動作イメージです。ア
はじめに 「Flat Config が何かはわかったからサンプルをくれ!」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@
何年後かの自分へ こんにちは、のんピ(@non____97)です。 業務で使用する新しいMacが届きました。 新しいMacを初期セットアップするにあたって「今の設定どうだったっけ...」と調べる時間が結構かかってしまいました ということで何年後かの自分がまた新しいMacに乗り換える際に手間取らないように、設定した内容を書き記しておきます。 移行先のMacの情報は以下の通りです。M1 Max、嬉しい。 # OSのバージョンの確認 > sw_vers ProductName: macOS ProductVersion: 12.4 BuildVersion: 21F79 # カーネルのバージョン確認 > uname -r 21.5.0 # CPUのアーキテクチャの確認 > uname -m arm64 # CPUの詳細確認 > sysctl -a machdep.cpu machdep.cpu.
こんにちは。河内です。 最近はデータ基盤の構築も取り組んでいたりします。 社内では他の DWH が使われている事例がありますが、今回の基盤ではデータソースとの親和性や価格面などを考慮し BigQuery で行くことにしました。 BigQuery 上で多くのデータを順次変換してデータを生成するために何らかのワークフローエンジンが必要でした。 社内の他のシステムではワークフローエンジンとして Digdag を採用している例が多いですが、このシステムでは Kubernetes 上でサービスを運用しているため、当初(2020年12月)は Argo Workflow 上でクエリを順次実行することを構想していました。構想中に Dataform が Google に買収され、無料で使えるようになったというニュースが飛び込んできたため、触って感触が良いことを確かめた後、Dataform を使っていくことに
webpack/lib/config/defaults.js 実際に使うときの設定 結論ですが、webpack.config.js へ以下のように書くことが推奨されます。 module.exports = { cache: { type: "filesystem", buildDependencies: { config: [__filename], }, }, }; あとは、各コードの設定に依存するためversion等の追加が必要になる可能性があります。 ドキュメント Other Options | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ... 仕組み ファイルキャッシュでは以下のようにデフォルトではnode_m
全部キーボードで済ませたいシリーズです。 多忙な現代人の一日はその日の予定チェックから始まるわけです。普段であれば定期的な間隔で組まれたミーティングのリズムに身を委ねればいいわけですが、そこに非定型的なミーティングが紛れ込んでくる。これは採用面接など外部との機会であることが多く、そのぶん重要です。事前に入れてあるものを避けて予定を組もうとすると、参加者の数に応じて困難さが増していくので、ある程度は既存のものに被せて予定に招待してもらうことにしていると、いつの間にかダブルブッキングの嵐になっている。直前になって慌てて一方のミーティングに参加しないことを告げる……みたいなことを繰り返していてはいけませんね。 そういうわけで事前にカレンダーの重複を確認して、必要に応じて辞退したり再調整したりしたい。だけどそれを Google カレンダーのウェブ UI からマウスでポチポチやるのは非常につらい……
Hi fellow devs, For my first post, I'm just documenting my VSCode configurations here for posterity's sake or just for my reference later. Keep in mind that this list is going to be language agnostic and more so utility/aesthetic suggestions (though these are inevitably tied to what languages I work with, so take that as you will). Please feel free to suggest any good extensions that I've missed o
コンバンハ、千葉(幸)です。 2021/4/27 に、JAWS-UG 初心者支部 #36 が しくじり LT というテーマで開催されました。 イベントの概要はこちら。 AWS初心者がやってしまいがちな失敗談を募集します。 過去の失敗事例 初心者が落ち入りそうな事例 初心者が不安に感じそうだけど、XXすれば大丈夫だよ。というセーフティネット的な事例 ハンズオンで高額請求きちゃった事例 失敗は成功のもと!! みなさんの失敗例を、活かして頂ける場になれば幸いです!! 次回以降のハンズオン初心者のアドバイスになるネタがあれば嬉しいです!! ホットなしくじりを持つ AWS 初心者のわたしは、ここぞとばかりに申し込み、登壇することにしました。 プロローグ やぁ、僕はどこにでもいる平凡なエンジニア。ある日 急に、IAM ロールを 1000 個作りたいな、って思ったんだ。みんなもきっとそんなこと、あるよね
機械学習をやっている人なら誰もが遭遇したであろうこの光景 (※写真はPyTorchのLanguage ModelのExampleより) Pythonのargparseでシェルから引数を受け取りPythonスクリプト内でパラメータに設定するパターンは、記述が長くなりがちな上、どのパラメータがmodel/preprocess/optimizerのものなのか区別がつきにくく見通しが悪いといった課題があります。 私は実験用のパラメータ類は全てYAMLに記述して管理しています。 YAMLで記述することでパラメータを階層立てて構造的に記述することができ、パラメータの見通しがぐっとよくなります。 preprocess: min_df: 3 max_df: 1 replace_pattern: \d+ model: hidden_size: 256 dropout: 0.1 optimizer: algo
SELinuxの変更SELinuxに関しては、主な変更点として SELinuxで/etc/selinux/configで「selinux=disabled」が効かなくなる(ハングすることがあります)パフォーマンスの向上が挙げられています。今回は一番最初の「selinux=disabled」が使えなくなる(システムがハングすることがある)というのを見ていきたいと思います。 当たり前ですが、筆者の見解/立場ではSELinuxは無効化するべきでは無いので、無効化する前に「待て、考え直せ」とは言いたいです。 SELinuxを無効にしたときのハングアップまずは事象を見てみたいと思います。/etc/selinux/configで SELINUX=enforcing を SELINUX=disabled に設定し、再起動を行います。すると(タイミングの問題だと思いますが)下記のようにブート中にシステムが
参考 おさらい runc architecture file main.go and command process runc create setupSpec startContainer linuxContainer LinuxFactory createContainer CreateLibcontainerConfig loadFactory factory.Create runner.run newProcess linuxContainer.Start newParentProcess parentProcess.start() runc init nsenter nsexec runc init(After nsexec) linuxStandardInit.Init runc start 低レベルコンテナランタイムruncの内部処理のまとめです。 参考 2021/05現在:
年明けから IAM 周りの整理をいろいろしなければいけなくなったので、佐々木拓郎さんの「AWSの薄い本」シリーズ2冊を読みました。今回はその読書メモです。 booth.pm booth.pm AWS は普段から使っているので、IAM の基本的な機能はもちろん知っているのですが、最近追加された機能(特にマルチアカウント管理に関する機能)については全然追えてなかったので勉強になりました。 以下、勉強になった点をまとめたメモです。AWS の情報は日々変わっていってしまうので、発行日も併せて記載しました。 AWSの薄い本 IAMのマニアックな話(発行日:2019年9月22日) 第1章 AWSとIAM AWS Organizations は本書の対象外 ポリシー記述の文法的な部分は本書では扱わない。詳細は公式のIAM JSON ポリシーのリファレンス を参照 第2章 IAMの機能 IAMの機能のうち
こんにちは。毎年のAppleとGoogleからのお達しのおかげで、開発環境やライブラリのアップデートが大好きな id:ikesyo です。普段はiOS・Androidのモバイルアプリ開発を主にしています。 はてなでは先日、はてな社内で使用しているRenovateの設定プリセットをGitHubで公開しました! はてな社で使用しているRenovateの共通設定をまとめたリポジトリを公開しました!https://t.co/2mgZNQ3pxw RenovateのShareable Config Presetsという機能を活用しています。— Sho Ikeda (@ikesyo) 2020年6月12日 リポジトリはこちらです。 Renovateについて Renovateについて簡単に説明すると、様々なプログラミング言語やツールに対応したライブラリ・依存性の自動アップデートサービス(もしくはツール)
この機能が導入されることにより、{raw/file/url}-loader が不要となります。 webpack@4 でも使えますが、まだ実験的フェーズです。 Documentation Asset Modules | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ... モジュールタイプと以前との対応表 asset/resource -> file-loader asset/inline -> url-loader asset/source -> raw-loader asset -> asset/resourceとasset/inlineを自動選択する(閾値: 8kb) 使い方 実験フラグをオンにする。 // webpa
CLI用のコマンドを作ってみようと思いたったのですが、CLI開発フレームワークoclifを試してみたらとても簡単で環境構築もすんなりできたのでびっくりしたという話。 概要 ある用途で思いたってCLIのコマンド作ろうと思った oclifというCLI用のフレームワークがあったので試してみた 簡単すぎてびっくりした 追加でPrettierとJestも対応してみました 動機 誰しもCLIのコマンドをつくりたくなることがたまにある。僕はある。 今回はGUIを作るまでもなく、コマンドでシュッと実行したい作業があったので勉強と遊びを兼ねてコマンドを作ることにしました。CLIの開発ツールはいろいろありますが、今回はやりたいことを実現するのにすでに知見としてあるものを流用したい背景aからNode.jsでやることにしまた。 Node.jsにもCLI用を作るためのライブラリがさらにいくつかありますが、今回はoc
こんにちは。エンジニアブログ運営の梅津です。 普段はエージェンシー事業部でリードアプリケーションエンジニアとして働いています。 エンジニアブログ運営としてブログの質を向上させるために、これまでのブログの情報を集めたりもするのですが、これを逐一手作業で行うのは大変です。 ある程度の作業は自動化したい。そういったときはブックマークレットを作ると便利ですよね。 今回はそんなブックマークレットの作り方をまとめてみました。 「ブックマークレット?よく知らないな」「聞いたことあるけど作り方とか気にしたことなかった」という人がいれば是非一緒に試してみてください! 筆者の開発環境やこのブログで利用する主な技術のバージョンは次のとおりです。 macOS Node.js 18.12.1 TypeScript 5.0.4 Rollup 3.23.0 Vercel CLI 29.4.0 ブックマークレットとは T
はじめに ESLint v8.21.0のリリースでこれまでとは異なるconfigシステム(flat config)が持ち込まれた。 以下の通り、新しいconfigシステムへの一歩というように言及があり、ESLintを利用する上で無視できない影響を受ける変更となりそうなので、どのようなものか確認しておきたい。 We took a big step toward ESLint’s new config system! The new FlatESLint class is now merged. Its API is not yet stable, and not all features are implemented yet, but it is accessible via the Node.js API for early testing. See RFC9 for the origi
はじめまして、Progateの村山です。 本記事はProgateAdventCalendarの15日目の記事です。 普段はSREチームでProgateの開発や運用を支える仕事をしており、Progateには今年の7月に入社しました。前職はElixirやk8sなどを使ったWebアプリケーションの開発や運用をしていました。 エンジニアであれば日常的に使うGitHubですが、仕事で個人用のアカウントを併用できない場合は仕事用のアカウントに切り替える必要があります。 本稿では作業ディレクトリ毎にGitHubのアカウントを切り替える方法を紹介します。 GitとGitHubのアカウントについて まずはじめにGitとGitHubは別物の概念で、GitHubはGitのリモートリポジトリをホスティングしているWebサービスです。GitはLinuxカーネルの開発者であるリーナスが開発した分散型バージョン管理シス
バックエンドエンジニアの宮澤です。 弊社のANDPADでは多くのWebサービスと同じようにメールでの通知機能を持っています。 今回はRailsと複数のメール配信サービスを組み合わせて、メール配信機能を冗長化した事例を紹介します。 ANDPADで導入しているメール配信サービス ANDPADでは2つのメール配信サービスを利用しています Mailgun(メイン) Sendgrid(サブ) 通常はMailgunを主系として利用し、SendgridはMailgunでの送信失敗時に備えて待機する構成になっていて、Mailgunで障害が発生した場合でも自動的にSendgird経由でメール配信できるようになっています。 また、サブにSendgridを採用している理由にRFCに準拠しないメールアドレスへの対策もあります。 ANDPADでは個人の携帯キャリアメールで登録しているアカウントも多く、キャリアメール
{ "extends": "@tsconfig/strictest/tsconfig.json", } 以上です! tsconfig.json ってどんなふうに書いていますか?? tsconfig.json をこんな感じで書いている人はいないでしょうか { "compilerOptions": { "strict": true, "allowUnusedLabels": false, "allowUnreachableCode": false, "exactOptionalPropertyTypes": true, "noFallthroughCasesInSwitch": true, "noImplicitOverride": true, "noImplicitReturns": true, "noPropertyAccessFromIndexSignature": true, "noU
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マーク) > こ
最近はフロントエンドエンジニア(主にReact)をしているYano (@yuki_ycino) といいます。 この記事では自分が開発に使っているNeovim周りの環境と、その大まかな構成について書いていきます。 追記 後日、自分がNeovimでフロントエンド開発を行っている理由とVSCode という記事を書きました。 合わせて読んでいただけると幸いです。 はじめに 自分は現在フロントエンド開発のほぼ全てをNeovimで行っています。 個人的にはVSCodeと遜色なく(むしろ効率よく)開発できていると思うのですが、VSCodeではシンプルな設定で開発を始められるのに対し、Vimはどうしても設定のハードルが高いです。 具体的には現在5000行弱のVimの設定ファイルと100個前後のプラグインを導入して開発しています。 ただ、それを他の方に勧めるのは無茶なので、この記事ではほぼ最小構成に近いTy
2020.10.05 KaggleOpsを考える ~ MLflow + Colaboratory + Kaggle Notebook ~ こんにちは。次世代システム研究室のY. O.です。 筆者はデータ分析のスキルアップのためにkaggleというデータ分析プラットフォームを活用しています。kaggleを始めてから約2年間を経て、スキルアップの枠を超え、趣味・生活の一部・etc.になってきてしまっているのも認めざるを得ません。。。 今回は、先日kaggleの自然言語処理コンペ(Tweet Sentiment Extraction)で2位になった結果を題材に、振り返りの意味を込めて”こうしておけば良かった”という点をMLOpsの観点でまとめていきたいと思います。 ここで、kaggleを取り巻くMLOpsの構成をKaggleOpsと勝手に呼ぶこととし、少なくとも筆者は今後のコンペでも以下にまとめ
@1000ch (id:hc0001) です。掲題の通り、少し前にドクターズプライムの Frontend プロジェクトで使う lint ツールとして ESLint ではなく XO を使っていく方針に切り替えました。最近その振り返りを行ったので、その備忘録として文字に起こします。 github.com 経緯と課題 これまでは Create React App に付属する ESLint に加えてルールを少しカスタマイズして、それをいくつかのプロジェクトで使っていました。これにはいくつかの課題が存在していました。 ESLint およびその周辺プラグインの依存関係を含めたバージョンアップをケアし続ける必要がある renovate や dependabot などを用いて(半)自動化できるものの、依存の数や大きさに応じて依然としてコストが高い ESLint のルールを中長期的にメンテナンスする必要があ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く