[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO
[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に下記設定をすることでディレクトリ名も表示されるようになりタブを見やすくすることができます。 { "workbench.editor
![[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/611914e4c074abe947efa5c820fc1646e6c60a0a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F06%2Fvscode-2020-eyecatch-1200x630-1.png)
Docusaurusをドキュメントのみのサイトとして構築する | DevelopersIO
こんにちは。サービスグループの武田です。 先日Docusaurusを導入して試してみました。 Facebook製のドキュメント生成ツール Docusaurusを試してみた 標準でドキュメントとブログを管理できる構成で作成されていました。今回はデフォルトの構成からブログ機能を外し、ドキュメントのみのサイトを構築する方法を試してみました。 環境 次の環境で検証をしています。 $ sw_vers ProductName: Mac OS X ProductVersion: 10.15.4 BuildVersion: 19E266 $ node -v v10.19.0 $ grep @docusaurus package.json "@docusaurus/core": "^2.0.0-alpha.48", "@docusaurus/preset-classic": "^2.0.0-alpha.48
React界隈で話題になっている「React Server Components」についてまとめました！ | DevelopersIO
React界隈で話題になっている「React Server Components」についてまとめました！ どうもReact大好きCX事業部の片岡です！ 今回はReact界隈で話題になっている「React Server Components」についての内容を意訳してみました。 元ネタ 話題になっているこちらの記事が元ネタです。 https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html 概要 Fetch APIでデータをやり取りすると、バケツリレーが発生します。例えば、Spotifyのアーティストページにはアーティストの情報と人気の曲とアルバム一覧が並びます。この時、人気の曲とアルバム一覧を取得するには、アーティスト情報を取ってこないといけません。そうすると、アーティスト情報を取得して
第１回 Elastisearch 入門 インデックスを設計する際に知っておくべき事 | DevelopersIO
今回、第1回目の Elasticsearch 入門という事で、今回は「インデックスを設計する際に知っておくべき事」というテーマにしてみました。ここでのインデックスの設計とは RDB のデータベースとかテーブル、ビューの設計に当たるところです。 Elasticsearch は RDB など他のデータベスに比べ、その設計方法も結構独特です。（と言うか同じ事を実現するにしても色々な方法が用意されていて、さらにアプリケーション要件〜システムアーキテクチャ、運用面など広い範囲が関わってくる）RDB との比較も交え解説していきます。 Index で分けるか？ Type で分けるか？ 例えば、商品情報を保存するインデックスの設計を考えてみましょう。いわゆるRDBの設計で言うところのテーブル設計ですね。おそらくRDBではアプリケーション要件のみが、その設計の中心になるはずです。例えば、商品名や説明、価格情
s3fsよりも高速に使えるgoofysを試してみた | DevelopersIO
西澤です。S3バケットを直接マウントしてファイルシステムのように使いたいケースがありますが、s3fsはややパフォーマンスに難があります。Goで書かれていてs3fsよりも高速に動作することを売りにした"goofys"というツールを見つけたので、早速試してみることにしました。 s3fs-fuse/s3fs-fuse · GitHub GitHub - kahing/goofys: a Filey System for Amazon S3 written in Go 前提パッケージのインストール 今回はAmazon Linux(Amazon Linux AMI 2015.09.1 (HVM), SSD Volume Type)環境で検証を行いました。golangとfuseパッケージが前提として必要となりますので、下記のようにインストールします。 $ sudo yum install golang
Amazon EC2を(なるべく)使わずにシステムを構築してみる | DevelopersIO
こんにちは、せーのです。AWSは現在40以上のサービスがあり、なかなか把握しきれないことも多いかと思います。そこで今日は現在のサービスを組み合わせたシステム構築の一例をご紹介致します。 最もコストがかかるのはEC2 そもそもオンプレではなくクラウドサービスを選ぶ理由は安価で簡単にサーバーやストレージを調達でき、障害対策や電源管理等をAWS側が行ってくれるから、という方も多いかと思います。 ではAWSの各サービスでコストを抑える秘訣はなんなのでしょう。それは「EC2を使わないこと」です。例えばDBとしてmySqlを使いたいとします。時間あたりの単価を考えるとEC2の中にmySqlをインストールするよりもRDSでmySqlを立てたほうがお得です。また障害が起きてダウンした際にEC2は自分でフェールオーバー等の対策を打つ必要がありますが、RDSはmulti-AZの設定をしておくだけで後はAWSが
[Android Studio] 快適にコーディングできるように設定をカスタマイズしてみた | DevelopersIO
Android Studio で快適にコーディングしたい Android Studio 事始めということで、快適にコーディングできるように設定をいろいろカスタマイズしてみました。 IntelliJ IDEA の設定が奥が深いらしいので、どこまで自分に合った環境にできるのか興味津々です。 カスタマイズした内容はあくまで個人的な趣向が強いので、ご参考までに。 IDE の基本テーマを変更する まずは基本テーマです。設定画面の Appearance の Theme で変更できます。 白ベースの Default か黒ベースの Darcula のいずれかを選択することができます。 白が見やすいか、黒が見やすいかは好みにも環境にもよると思います。お好きなほうをお選びください！ 行番号やスペースなどを表示する Eclipse でもまずはじめにやるであろう設定ですね。これがないと始まりません。行番号やスペー
![[Android Studio] 快適にコーディングできるように設定をカスタマイズしてみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/f0064231af51df890947c8e4bfe10fda4c9d1a94/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F05%2Fcatch3.png)
[Grunt]Yeomanで開発ワークフローを楽にしよう[bower] | DevelopersIO
※2013/5/14 Yoemanってスペルミスしまくってたのを修正 Yeoman(ヨーマン)とは LESS、Sass、compass、Coffeescript、TypeScript等々、クライアントサイドのWebアプリケーション技術は多様化しています。 Coffee ScriptやLESS等の拡張言語はコンパイルする必要がありますし、jsファイルはconcat/最適化/ミニファイすることも多いです。 ソースを修正するたびにいちいち手動でコンパイルしたり最適化するのは、本来注力すべき事象ではありません。 Yeomanは開発者がアプリケーション開発に注力できるよう、アプリのひな形生成からテストやコンパイル、ファイル最適化といったワークフローを提供してくれます。 Yeomanについてはここでも少しふれていますが、開発を楽に楽しくするためのツールが満載のようですね。 まずはYoemonについての
軽量JSONパーサー『jq』のドキュメント：『jq Manual』をざっくり日本語訳してみました | DevelopersIO
jq Manual jqで簡単JSON加工 ｜ Developers.IO jqコマンドが実は高性能すぎてビビッた話 - beatsync.net JSONを超絶に読みやすくする jq コマンド - WebAPIバリバリ使うor開発する人必須 CLIでJSONの整形をする - ( ꒪⌓꒪) ゆるよろ日記 JSON形式の情報を様々な条件や書式として成形、フィルタリングツール『jq』。上記関連エントリで私もこのツールの存在を知る事になったのですが、ツールの簡易さ・便利さに感動しながら私もちょくちょく利用させてもらっています。 そこでこのエントリでは、jq公式ページに展開されている利用ガイド・リファレンス的な位置付けの『jq Manual』を写経がてらざっくり日本語訳してみました。ざっくり訳なのでこの部分の訳おかしい・間違ってる等ありましたら御指摘頂けると幸いです。例示されているサンプルコードも
【Middleman】でモダンにHTMLファイルを出力してみる。 | DevelopersIO
前回に引き続き、Middlemanで静的なサイトを構築してみたいと思います。 実際に、Middlemanを使用して、ベーシックなhtmlテンプレートを出力してみます。 その際に、Middlemanの特徴の一つとして「Layout機能、Partial機能」を使用して、構築したいと思います。 アジェンダ ディレクトリ構造のおさらい。 レイアウトの考え方 Frontmatter(ページ固有変数) 実際に作成してみる。 まとめ ディレクトリ構造のおさらい。 プロジェクトフォルダを作成 まず、作業するディレクトリに移動後、以下コマンドから 「sample」というプロジェクトフォルダを作成します。 $ middleman init sample ディレクトリ構造を確認 作成した「sample」フォルダ内を確認すると、以下の様な構成になります。 注目して頂きたい箇所として「source/layouts/
Amazon S3のGlacierアーカイブ機能を活用する | DevelopersIO
よく訓練されたアップル信者、都元です。話題は攫えないと分かりつつも、また小ネタいきます。 数ヶ月前のネタですが、Amazon S3において「自動的にGlacierにアーカイブする」という機能がリリースとなりました。Glacier単体では正直利用しづらかったものが、S3を介してGlacierを使えるようになったことで非常に使いやすいものになりました。とは言え、実際にこの機能を使った事がないと、使いどころのイメージも付けづらいと思います。 S3とGlacierのデータ保存コスト 実は、筆者は個人的に、このS3とGlacierの連携機能を利用しています。自宅で利用しているNAS QNAP TS-219P II には、ファイルを1日1回自動的にS3にアップロードしてバックアップを取る機能があります。この機能を利用して、家族の写真等、消えたら精神的打撃が大きなデータを 99.999999999%（イ
Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作） | DevelopersIO
皆さんお久しぶりです。 最近サイトの高速化で忙しく、 ブログの執筆をサボっていました、ごめんなさい。 ブログのテンプレートリニューアルも無事に終わり、そろそろ得た知識をアウトプットしていこうと思います。 最近HTML（5）を利用したWebサイトもレスポンシブやCSS3、Retinaディスプレイ対応でどんどん複雑になってきています。ですが、未だ標準化されていないCSS3でさえ市場の要求に応えるには未熟に思えます。 そこで登場するのがSassやLESSなどのCSS拡張メタ言語です、キリッ（巷で知っている方にとっては今さら感たっぷり）。 今回は第一弾としてSass（SCSS）とCompassについて紹介しつつ、Media Queries（前に書いたMedia Queriesに関する記事）の実装を少し楽にしてくれる自作Mixinを紹介します。なぜSassにしたかは「Sass LESS 比較」と検索
Amazon Route 53のDNSフェイルオーバー機能を利用したリージョンを跨いだバックアップサイトの構築（EC2 to S3編） | DevelopersIO
Amazon Route 53のDNSフェイルオーバー機能を利用したリージョンを跨いだバックアップサイトの構築（EC2 to S3編） [2013/02/15]記事のタイトルを変えました。 プライマリサイト（EC2ベース）からセカンダリサイト（S3ベース）へのDNSフェイルオーバーの記事となります。 Route 53へのフェイルオーバー機能とヘルスチェック機能の追加 先日のAWSよりRoute 53へのフェイルオーバー機能とヘルスチェック機能の追加に関しての発表がありました。 AWSでWebサイトなどをホストする場合、障害発生時に一時的にSorry Pageを表示したり、バックアップのWebサイトに切り替えたりといったことを自動的に行うことはこれまで比較的難しいかったと思います。 今回、Route 53にフェイルオーバー機能が追加されたことにより、プライマリサイトがダウンした際に、自動的に
コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編 | DevelopersIO
はじめに 今回から「すぐに使えるSCSS入門シリーズ」からタイトルを変えてSCSS・Compassを使ったコーダー向け開発効率アップテクニックを紹介していきます（シリーズは続きます）。 今回作成したサンプル このサンプルはgithubで配布しています。ダウンロードしてソースなどご確認ください。 動作するHTMLサンプルはこちらです。 CSS Spriteって？ CSS Spriteについてお復習いです。 簡単に言うと画像をくっつけてCSSのbackgroud-positionで表示を制御するテクニックです。 CSS Spriteのメリット 画像をくっつけることによってHTTPリクエスト数の削減 マウスオーバーなどで表示を切り替えるがスムーズ（個別に画像を読み込んでいる場合、切り替わったときに読み込みが発生します） CSSのみでボタンなどのアフォーダンスを切り替えることができる CSS Sp
iOS6 UICollectionViewのカスタムレイアウトを作成してみる | DevelopersIO
前回、UICollectionViewを構成するクラス群の役割と、その簡単な利用方法について見ていきました。今回は、前回に続いてカスタムレイアウトコンポーネントを作成したいと思います。 UICollectionViewLayoutのサブクラスを作成 カスタムレイアウトコンポーネントを作成する際には、UICollectionViewLayoutクラスを継承したレイアウトクラスを作成します。UICollectionViewLayoutのサブクラスでは、以下のメソッドをオーバーライドして実装する必要があります。 collectionViewContentSize UICollectionView内の要素を配置するコンテンツ部のサイズを返すメソッドです。UIScrollViewのcontentSizeプロパティと同じく、スクロール領域の範囲をコントロールします。 layoutAttributesF
iOS6 Mobile SafariがAjax POSTでキャッシュする問題を回避する方法 | DevelopersIO
iOS6出た！ iOS6が出来ましたね。社内ではiPhone5を入手した社員がLTEの速度に驚いていました。私はまだiPhone4Sですが、iOS6にして新しい機能を楽しんでいるところです。さて、iOS6にしてSafariの仕様が変わって困ったと言った投稿が海外のフォーラムで挙っています。それも、基本的なPOST通信についてです。これは困ったということで、動作を確認して対策方法についてシェアしたいと思います。 どんな時にPOSTをキャッシュする？ まずはどんな状況か確認してみたいと思います。 Cache-ControlもExpiresも無い場合 ： iOS6 Mobile SafariはPOSTをキャッシュする Cache-Control max-age=0指定 と Expires指定 ： iOS6 Mobile SafariはPOSTをキャッシュする Cache-Control: no-
Amazon EC2インスタンスの自身のUserdataを簡単に取得する | DevelopersIO
Amazon EC2のユーザデータを簡単に取得する方法 Amazon EC2はたくさんのメタデータを持っています。SDKやAPIを経由して取得する方法が一般的ですが、自身のインスタンス内で簡単に問い合わせる方法があります。以下のアドレスにアクセスすることです。 http://169.254.169.254/ 実際にどんな情報が取得できるのか試してみたいと思います。 EC2インスタンス起動時にユーザデータを指定する インタンス起動時にユーザデータの指定をすることができます。テキスト形式で入力ができます。base64にする事もできるようです。以下の画面をご覧ください。 改行コードで区切ったり、カンマ(,)で区切ったりできますので、受け取る側で適当に解釈してあげれば良いかと思います。 EC2インスタンス内で自身のユーザデータを確認する メタデータ取得と同じ方法です。 $ wget -q -O -
JavaScriptのMVCフレームワークと仲間たち ｜ Classmethod.dev()
JavaScriptのMVCフレームワークと仲間たち JavaScriptでイイ感じに開発をしたいという欲求が高まってきたため、自分でフレームワークを作らずに世界の賢者たちから学びたいと思います。今回は、JavaScriptでMVCフレームワーク等を実現しているフレームワークや周辺のライブラリ、さらにはツールやユーティリティまで幅広くご紹介します。 (2012/1/17 updated) Backbone.js Spine.js JavaScriptMVC AngularJS SproutCore Ember.js YUI App Framework Broke.js Fidel.js Sammy.js KnockoutJS eyeballs.js The M Project Knockback Batman.js Shipyard.js Agility.js ベース jQuery Doj
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
