こんにちは、実は久しぶりの投稿の、どうもしばおです。 さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。 （2023年7月3日更新） 僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーには、僕が使ってるおすすめのプラグインや、僕なりの最強設定を共有しています。 そもそも、VSCode（Visual Studio Code）って？ VSCode（Visual Studio Code）はMicrosoft社が開発したオープンソースのテキストエディタです。 最近様々な高機能テキストエディタが登場していますが、その中でもこのVS Codeはかなり便利な機能がデフォルトで付いていて、かつ軽量なので、インストールするだけでも結構使えます。

「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知

CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。 対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。 参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます

はじめに グロービスではプロトタイピングツールとして主にFigmaを使用しています。 Sketch はもういらない？ デザインツール Figma の紹介 Figmaはコラボレーションツールとして非常に優れており、デザイナーと開発者間の擦り合わせにも便利です。 しかし、開発時に必要なのはプロトタイピングツールだけではありません。 実装時の共有に画面キャプチャにちょっとした注釈をつけてSlack投稿したり、Githubに投稿するエビデンス画像を管理するのに便利な画像編集ソフトが欲しいこともあります。 Adobe XDは本来プロトタイピングツールですが、ちょっとした画像を作成したい時に便利な、ノンデザイナーにもオススメのツールです！ 注意事項 本記事はデザイナー向けの記事ではありません。エンジニアとして私が開発時に便利だと思った機能と、Adobe XDを使うメリットを紹介します。 プロトタイプツ

エディタで作業しながらデバッグをしたい人にぴったりな、VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。 ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可能なので、デバッグがかなり捗ると思います。 Browser Preview for VS Code -GitHub Browser Preview for VS Codeの特徴 Browser Preview for VS Codeのインストール Browser Preview for VS Codeの使い方 Browser Preview for VS Codeの特徴 Browser Previewは、VS Code内に実際のブラウザをプレビューとして表示させることができます。 VS Code内でブラウザのプレビューが可能（Chrome Headlessにより）。 複数の

VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。

拡張機能はできるだけ最小限にしておきたい派です。そんな自分がインストールして使い勝手がよかった拡張機能をいくつか紹介します。 Auto Close Tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag その名の通りClose Tagを自動で入力してくれます。単純にタイピングが減るので肉体的・心理的負担の軽減にもなります。 Auto Rename Tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag タグを修正した際にClose Tagも合わせて修正してくれます。これも手間が減って便利です。 Bracket Pair Colorizer 2 https://ma

VS Codeとは 正式名称はVisual Studio Code。Microsoft社が開発したオープンソースのテキストエディタ。 Vue.jsとの相性が良いためVue.jsの開発者のEvan Youなどが使用している。 VS CodeはEmmetやGitなどコーディングを行う上で必須の拡張機能がいくつか最初からインストールされているので使いやすい。 (Extentionsで@builtinで検索すると一覧が見られる) しかし、Vue.jsを使用する上で必要な拡張機能は最初からインストールされている訳ではないため、インストールしたほうが良い拡張機能と設定(settings.json)をまとめた。 以下にVS Codeおすすめ拡張機能を記載した。 Vue.js Extension Pack Vue.js開発でインストールされていることの多い11の拡張機能パック。 vetur vue-pee

Adobe XD: ツールメニューのショートカット V 選択 R 四角形 E 楕円形 L 線 P ペン T テキスト A アートボード Z ズーム command+3 選択範囲に合わせてズーム XDでは、選択範囲に合わせてのズームもできます。 Adobe XD: パスまたはペンに関するショートカット P ペンツールに切り替える ダブルクリック ポイントを切り替える option 非対称のコントロールポイント shift コントロールポイントの角度をスナップ shift アンカーポイントの角度をスナップ command+option+U 合体 command+option+S 前面オブジェクトで型抜き command+option+I 交差 command+option+X 重なる部分を中マド command+8 パスに変換

VSCodeを使い始めました。とりあえずデフォルトをイケてる感じにしたかったので、4つの拡張機能をインストールしました。せっかくなので共有します。 Before After 私と同じVSCode初心者は、とりあえず下記をインストールしておけばOKだと思います！ Dracula Theme Material Icon Theme Indent Rainbow Bracker Pair Colorizer 1. Dracula Theme まずはこれ。Dracula Themeです。 これを入れればシンタックスハイライトが変わり、かなり雰囲気が良くなります。デフォルトのハイライトだと特別感が少ないので、本当におすすめです。 追記：Dracula以外のおすすめThemeをこちらにまとめています。よかったら見てください。 VSCodeをカッコよくするTheme拡張7つ GitHub https:/

文章の校正チェックを自動で行うVisual Studio Codeの拡張機能「テキスト校正くん」を弊社からリリースしました。無料で利用できます。 テキスト校正くん – Visual Studio Marketplace 短い文章であれば目視でもチェックできますが、長文になるとチェックに時間がかかり見落としも多くなってしまいます。また、いくら内容のいい文章を書いても誤字や脱字が多く体裁が整っていないと、印象が悪く読みづらい文章になってしまいます。 そんなとき、「テキスト校正くん」を利用することで、文章チェックの手間を軽減でき、文章の品質を高めることができます。 ▲VS Codeの拡張機能「テキスト校正くん」 「テキスト校正くん」でできること この拡張機能は、VS CodeでテキストファイルやMarkdownファイル等の日本語の文章をチェックします。編集時に自動で校正のチェックを行い、エディタ

星新一さんのショートショートを解析し、質の高いショートショートの自動生成を目指すプロジェクトが始まった。人工知能研究の第一人者ととして知られる松原仁教授など6人がチームを組み、SF作家の瀬名秀明さんが顧問を務める。 「コンピュータは星新一を超えられるか」――はこだて未来大学は9月6日、星新一さんのショートショートをコンピュータで解析し、新たなショートショートを生み出すプロジェクト「きまぐれ人工知能プロジェクト 作家ですのよ」を開始すると発表した。人工知能研究の第一人者として知られる同大の松原仁教授など6人がプロジェクトチームを結成。5年以内に、星新一作品と同等かそれ以上のクオリティーのショートショートの自動生成を目指す。 プロジェクトの進め方は検討中だが、1つの案として、（1）星さんのショートショート作品すべて（約1000作品）の特徴（使われている単語や文章の長さ、1文の単語の数、作品全体

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは。 Adobeのソフト一個だけあげるよと言われたら、迷わずPhotoshopを選びます。井畑です。 そんなPhotoshopラブの僕ですが、昔は正直苦手でした。 なぜなら、PhotoshopはIllustratorと違って、調整しているうちにデータが劣化(どんどん汚く)なってしまうと思っていたからです。 正しく言うと、データが劣化しない方法を知らなかっただけなんですけどね、当時は大変でした。 画像も一回小さくしてしまうと、次に大きくした時に荒れてまいますし、トーンカーブ等の画像補正も一回かけると二度と修正できませんでした。何回もトーンカーブかけてるとどんどん画像が汚くなっていくし… よく、サイズを間違えてて2,3時間の作業を一からやり直しして

今回は、Firefoxを高速化するためのTips・アドオン・ソフトウェア（スタンドアロンアプリケーション）をまとめて紹介します。当サイトでは今まで多くのFirefox高速化についての記事を書いてきましたが、それらの情報をいったん一つの記事に整理する意味で、このエントリーを書きました。 最近は起動・動作ともに高速なGoogle Chromeに押され気味のFirefoxですが、動作が安定していて拡張機能も豊富なFirefoxの使い勝手を手放せない人も多いはず。でも、Firefoxは相変わらず遅い・重い…やってられない…！そんな人に贈る記事です。 Firefox高速化Tips FirefoxをRAMディスクにインストールして超高速化する方法！ 本記事で紹介しているFirefox高速化方法の中では、最も効果のある方法です。ハードディスクよりも圧倒的にアクセス速度の速いRAMディスクを作成し、その中

画像内に映り込んだ所望のオブジェクトを排除し、違和感の無い画像を生成するシーン補完技術に関しては近年複数の研究成果が発表されている。しかし中でも2007年のSIGGRAPHにて米カーネギメロン大のJames HaysとAlexei A. Efrosが発表した手法*1はブレークスルーとなりうる画期的なものだ。 論より証拠、早速適用例を見てみよう。本エントリで利用する画像はPresentationからの引用である。元画像の中から邪魔なオブジェクト等の隠蔽すべき領域を指定すると、その領域が補完された画像が自動的に生成される。 アルゴリズム 効果は抜群だがアイデア自体は単純なものだ。Web上には莫大な数量の画像がアップされており、今や対象となる画像の類似画像を一瞬にして大量に検索することができる。そこで、検索された類似画像で隠蔽領域を完全に置き換えてしまうことで違和感の無い補完画像を生成するのだ。

なにこれ ニコニコ動画の動画ファイルのキャッシュファイルを皆で共有しあってより快適にニコ動を楽しめるソフトです。 これで一般会員でも回線混雑時に通常画質で動画が見れるかもしれない・・・！って訳です（誰かが以前その動画を通常画質で見ていてくれれば、の話なんだけどね）。 えいさあさんのNicoCacheをベースにP2P技術を用いてキャッシュ情報をGenkidamaを起動しているPC同士で共有する仕組みを追加してあります。 えいさあさん良いプログラムをソース公開してくれて感謝です。 動作環境 Java 6.0が動くシステム(Windows, Linuxで動作確認済み） たぶんMacでもおｋ。 ルータにグローバルIPが振られていて、UPnPでポート解放出来る必要あり。 使い方 Windows ブラウザのプロキシ設定でlocalhost:8080を指定。 Genkidama.batを実行する。 使い