【index.ts】そのVSCodeタブ名、わかりづらくない？【page.tsx】
はじめに VSCodeで、index.tsやpage.tsxなど、同名のファイルを複数同時に開いてしまい、わからなくなってしまったことはありませんか？ 実はよく見ると同一名称のファイルを開いているときには右側にディレクトリ名も表示されているのですが、薄い文字かつ、目線移動が必要で分かりづらいです。 この記事では、VSCodeの設定を変更することで、タブ表示名にディレクトリ名を含めて表示する方法を紹介します。 設定方法 VSCodeの設定ファイルsettings.jsonに以下の設定を追加します。 "workbench.editor.customLabels.patterns": { "**/index.*": "${dirname} .../${dirname(1)}", "**/{page,layout,template,route,actions,hooks,components,ut
Chromeで「新規タブ」を開くのが楽しくなる！おすすめ拡張機能17選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ Webディレクターのきくりんです！ みなさん、「Google Chrome Extension」はご存知でしょうか？ 「Extension = 拡張」、要するに、Google Chromeの拡張機能のことです。 Google Chrome Extensionを使うと、ブラウザに様々な機能を追加したり、デザインを自分好みにカスタマイズしたりすることができます。いろいろできる拡張機能ですが、今回は「新規タブ」に注目！ 「新規タブはデフォルトのままでも困らないじゃない？」と思っているそこのあなた！ 新規タブをカスタマイズすると、とても良いことがあるんです。 それは、新しいタブを開くのが楽しくなること！ 1日に何回も開く新規タブ、どうせ開くのなら少しでも楽しめたほうがいいですよね？ あと、ほかの人とちょっと違うというのは、それだけでもうなんだかカッコイイ気がします。 というわけで、今
新規タブを開いた時の表示をカスタマイズできるChrome拡張いろいろ
2019年8月14日 便利ツール Chromeのデフォルトだと、新規タブを開くとよくアクセスするWebサイトが表示されますね。以前はSpeed Dial 2を使っていましたが、無駄にそれらのWebサイトをチェックしてしまったりと作業効率が下がっていたので、「シンプルなToDoリストが表示したい！」と思いあれこれ調べてみました。ついでに面白そうな拡張もあったので記事にしましたよ。みなさんのお気に入りが見つかりますように！ ↑私が10年以上利用している会計ソフト！ 機能的なのとか New Tab Redirect New Tab Redirectは新規タブを開いた時に、任意のWebサイトを表示してくれます。デフォルトだとホームボタンをクリックした時のWebサイトは指定できるのですが、タブを開く時は決められないんですよね。いつもチェックしたいWebサイトがある時はこの拡張が便利です。 Speed
ブラウザの新規タブに時計を表示して見た目もカスタマイズできるChrome・Firefox用拡張機能「CaretTab」
ウェブブラウザで新しくタブを開いたとき、過去に閲覧したサイトが表示されたり検索画面が表示されたりしますが、人に見られるのを気にして空白画面にしてしまうと、殺風景な画面になってしまい、機能性もなく不便に感じてしまうことは間違いなし。そんな時にChrome・Firefox用の拡張機能である「CaretTab」を使うと、新しく開いたタブに時計を表示することが可能です。 CaretTab, a simple New Tab replacement for Google Chrome | BlueCaret http://bluecaret.com/project/carettab ◆Chromeに「CaretTab」をインストール Google ChromeでChromeウェブストアの「CaretTab」にアクセスし、「CHROMEに追加」をクリック。 「『CaretTab - New Tab C
無料で開いたタブのメモリ消費量が確認できるFirefoxアドオン「Tab Data (+Memory usage)」
どのタブがメモリをどれだけ消費しているか一目で分かる無料のFirefoxアドオンが「Tab Data (+Memory usage)」です。メモリ消費量上位5位までのタブの表示や、不要になったメモリ領域を解放するガベージコレクションを実行する機能も付いています。 Tab Data (+Memory usage) https://addons.mozilla.org/ja/firefox/addon/tab-data/ 上記サイトの「＋ Add to Firefox」をクリック。 「今すぐインストール」をクリック。 「Tab Data がインストールされました。」と表示されたらインストールの完了です。 Firefoxのタブにメモリ消費量が表示されます。なお、20MB以上のメモリ消費量のタブは赤色で表示されます。 開いているタブの中で、メモリを多く消費しているタブを確認する場合、ブラウザ右上の
Chromeで開いている全てのタブを一瞬で隠せる拡張機能「PanicButton」 : 二十歳街道まっしぐら
PanicButtonは瞬時にタブを隠せる拡張機能です。 仕事をサボって趣味のサイトを閲覧してたら、突然上司が現れた！！ やばい、ページを閉じないと・・・！ たとえばこういった場面で活用できます。 便利な点は、ワンクリックでタブを全部閉じれるのはもちろんのこと、 閉じたタブをもう一度開き直す機能があるところです。 閉じたタブを記憶してくれて、ワンクリックで復元できるのは便利。 以下に使ってみた様子を載せておきます。 まず「PanicButton」にアクセスしましょう。 Chromeに拡張機能をインストールしましょう。 インストールすると、このようにPanicButtonが拡張機能一覧に並びます。 試しに複数個のタブを開いてみましょう。 そして、PanicButtonをポチッ。瞬く間にすべてのタブが閉じられます。 そして閉じると新しいタブが1つ開いた状態に。 PanicButtonは緑色にな
CSS だけで作るタブ切替ユーザインタフェース （float 使用版）
1つ前のエントリーで、:target 疑似クラスを利用した CSS だけで作るタブ切替 UI を実装してみるテストしてみました。詳しいことは下記のエントリーをご覧ください。 CSS だけで作るタブ切替ユーザインタフェース 先のエントリーで作ったサンプルは、position: absolute; を使って、各タブの内容を重ねちゃった上で表示を切り替えるっていう方法を使ったのですが今回は、float プロパティを使ったサンプルを紹介してみます。 実際のサンプルは下記に。 CSS だけで作るタブ切替ユーザインタフェース サンプル 最新の Firefox、Google Chrome、Safari、Opera など、:target 疑似クラスに対応したブラウザであれば問題なく動作するはず。IE は IE9 以降のみ。その他、スマートフォンなどでは動作に問題ないと思います。 HTML はほぼ変更なし
CSS だけで作るタブ切替ユーザインタフェース
:target 疑似クラスを使って、JavaScript は一切使用せず CSS だけでタブ切替のユーザインタフェースを実装してみます。 タブ切替の UI は、よく使われますが、JavaScript で実装するケースが多いので、今回は全部 CSS のみで実装してみるテスト。目新しいことをやっているわけではありませんので、すでにやられている方もいるかもしれませんが気にせずいきます。 使うのは :target 疑似クラスで、IE9 以降は対応していますので、比較的動作環境も広いし、フラグメント識別子つきのリンク （要するに #hoge がついたリンクです） で、各タブを直接指定したリンクが簡単に張れるので、JavaScript でやるより楽に使い勝手のよいタブ切替が実装できる場合もあります。 実際のサンプルは下記に。 CSS だけで作るタブ切替ユーザインタフェース サンプル 最新の Firef
Firefoxでタブを縦に表示できるアドオン「Tree Style Tab」
Firefoxでタブを縦に表示できるアドオン「Tree Style Tab」を紹介します。 以前、Google Chromeの「Sidewise Tree Style Tabs」を紹介しましたので、それとの比較も踏まえながら解説します。 １．概要 本エントリーで紹介する「Tree Style Tab」は、タブを縦に表示し、名前の通り、タブをツリー化することが可能です。 ２．インストール メニューバーの「ツール」→「アドオン」をクリック。 「Tree Style Tab」で検索。 表示された「ツリー型タブ（Tree Style Tab）」の右側にある「インストール」をクリック。 「今すぐ再起動する」をクリック。 これでタブが縦に表示されます。 「Sidewise Tree Style Tabs」とのもっとも大きな違いは、既存のタブが表示されなくなる点です。 ３．使い方 通常のタブと同じように
Google Chromeでタブを縦に表示できるChrome拡張「Sidewise Tree Style Tabs」
Google Chromeでタブを縦に表示できる「Sidewise Tree Style Tabs」を紹介します。 １．概要 本エントリーで紹介する「Sidewise Tree Style Tabs」は、ブラウザと別ウィンドウでタブを縦に表示し、名前の通りタブのツリー表示などが可能です。 先日の「10個以上ブラウザタブを開いてはいけない理由 : ライフハッカー」を読んで、仕事で調べ物をしているときに10で収めるというのは基本的に困難で、多分40～50タブは当たり前に開いていると思うのでがすが、たくさんのタブを開いていると探すのがちょっと面倒だなと思い、調べたところ、この拡張機能がみつかりました。 タブを横に並べると、タブ数やタブに表示されるタイトルに制限があります。 数年前は開くタブ数もそれほど多くなかったのかもしれませんが、数十～数百のタブを開くのが当たり前になってきた現在、むしろ縦タブ
Facebookページのiframeタブにタブメニューを表示する
Facebookページのiframeタブのコンテンツに、jQuery UI Tabsを利用してタブメニューを表示するカスタマイズです。ここではMovable Typeと連携させる例で紹介します。 １．サンプル 「小粋空間」Facebookページにiframeタブを使った「テーマ・プラグイン・書籍」というメニューを作りました。 このメニューをクリックすると、「テーマ・テンプレート」「WordPressプラグイン」「Movable Typeプラグイン」「書籍」という4つのタブでコンテンツを切り替えられるようになっています。 タブをクリックすればコンテンツがいい感じに切り替わります。 ２．Movable Typeのテンプレート構成 このページでは、Movable Typeのテンプレート構成を下の図のようにしています。 iframeタブで読み込むページをインデックステンプレートに対応させ、ifra
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA