すべてのカテゴリ

先日、Sublime text4というテキストエディタを知りました。Ubuntuで使うことが出来る起動が早く、使いやすいテキストエディタです。このSublime text4でEmmetが、使えることを知りました。Emmet（エメット）は、HTMLやCSSのタグを書く時に、早く書くことが出来る機能です。短縮で書いたものを展開することで、意図したタグを書くことが出来ます。このEmmet（エメット）をVSCODEで使えることを知り、VSCODEの設定を見直しました。この見直しをきっかけにして、VSCODEを使った作業のスピードが早くできる拡張機能を調べました。その中で、SFTPを見つけました。このSFTPという拡張機能を使えば、ファイル転送ソフトを使わなくても、VSCODEだけで、サーバーにファイルをアップロードできます。また、簡単にサーバーとローカルのディレクトリの同期を行うことが出来るので、すごいと思いました。今、Movable Type（ムーバブル・タイプ）略してMTの3.6という古いバージョンから記事を取り出して、WordPress化する仕事をココナラを通じて請け負っています。本当は、MTの記事の書き出し機能を使えば簡単な話なのですが、データベースで何故か日本語部分が消えてしまっているため、生成されたHTMLファイルから記事を取り出してWordPressのファイルとする作業を手動で行っています。複数のファイルをサーバーにアップロードするなど、色々とFTPソフトを使う機会があります。でも、私のパソコンのスペックのこともあり、複数のソフトを立ち上げるとフリーズしてしまうため、でき

今日はポートフォリオ制作を進めながら、CSSとJavaScriptを使ってサイトの見た目や使いやすさを改善しました。「デザインカンプをそのまま再現するにはどうすればいいのか？」を考えながら、一つひとつ調整を行いました。NEWSセクションのレイアウト調整まず取り組んだのは、お知らせ一覧のデザイン調整です。デザインカンプでは、各ニュースの区切り線が左右の枠線に少し余白を残したデザインになっていました。最初は border-top を使っていましたが、線が横いっぱいに表示されてしまうため、CSSの擬似要素（::before）を使って長さを調整しました。これにより、デザインカンプに近い上品な仕上がりになりました。枠線を二重にする方法を学習ABOUTセクションでは、外側の金色の枠だけでは少しシンプルに感じたため、内側にも細い金色のラインを追加しました。この時に使用したのがCSSの擬似要素です。position: relative; と position: absolute; を組み合わせることで、HTMLを書き換えずに内側の線を追加できることを学びました。CSSだけでデザインの幅が大きく広がることを実感しました。Googleマップのレスポンシブ対応ACCESSセクションでは、画面幅を小さくするとGoogleマップの高さまで小さくなってしまう問題がありました。原因を調べながら、heightaspect-ratiomin-heightなどの違いについて理解を深めました。レスポンシブデザインでは、幅だけでなく高さの指定も重要であることを学ぶ良い機会になりました。ファーストビューをスマホ向けに最

Web 開発のための Windows PC の設定Windows の PC は、製造しているメーカーも多く、Mac に比べると比較的安価でハードウエアを購入できるために予算などが限られている場合などには有利です。この記事では、Windows の PC で Web 開発を行うのに最低限必要な設定について紹介します。  Web 開発に必要な性能は？既に、紹介していますが、一般的な Web 開発を行うのに高性能で高価な PC は特に必要はありません。多少古い PC でも十分に対応できます。従って、現在手持ちの PC がある場合にはその活用をお勧めします。私の場合、ノート型の PC は昨年末までは、古い PC を活用していました。４〜５年くらい前の PC でも多少遅く感じることはありますが、大きな問題なく利用できていました。目安としては、他に利用するアプリにもよりますが、Web 開発のみならば、メモリ容量は標準的な８ GB で十分ですし、ディスクドライブ（HDD/SSD）の容量は１００ GB もあれば OS とアプリを入れても十分な作業エリアが確保できます。古い PC でディスクドライブが HDD の場合、SSD に取り替えるだけで、実用上の体感性能が上がります。ただし、この作業は、OS の再インストールかコピーが必要なので、自分で OS のインストールができない場合はちょっと難しくなります。CPU は過去４〜５年以内のものであれば性能的にはとりあえず問題はありません。実際に、手持ちの PC で開発してみて問題になった時に買い替えを検討すれば良いかと思います。新規に購入するならば、ノー

はじめにPython＋VSCodeで開発を進める上で、入れた方がいい拡張機能や、やった方がいい設定を紹介します。※私が実際に行っている設定です注意事項このブログでは以下のことについては説明しません。　・Pythonの導入方法　・VSCodeのインストール方法導入する拡張機能　・Python　　→Pythonを使用する上での基本的なことを手伝ってくれます　　　例）仮想環境の設定、デバッグ　・Pylance　　→Pythonの入力補完などPythonでコーディンする際の作業を楽にしてくれます　・Flake8　　→PEP8（※）のルールに則ってコードのチェックを行ってくれます　・autopep8　　→コードをPEP8のルールに則って自動で修正してくれます　・indent-rainbow　　→インデントに色を付けてくれます※PEP8とは、Python標準のコーディング規約です。　Pythonで開発する際は、基本的にこのコーディング規約に則ってコードを書いていく事が多いです。導入手順■基本編　拡張機能を導入する上での基本操作を説明します。　　○拡張機能のインストール方法１．拡張機能タブを開く2.拡張機能を検索する3.インストールする■インストールのみで完了するもの　以下の４つの拡張機能はインストールした時点で使用できます。　カッコ内の拡張機能IDで検索してインストールしてください。　・Python（ms-python.python）　・Pylance（ms-python.vscode-pylance）　・indent-rainbow（oderwat.indent-rainbow）　・Fl

私は、glTF2.0のJSONを編集できるVSCODEの拡張機能でglTF TOOLというものを知りました。この拡張機能は、GLB形式のファイルをインポートして、glTFの拡張子のファイルに書き出すことが出来ます。書き出したら、ファイルの編集ができます。そして、ビューアーを使って確認も出来ます。予めインポートしたいGLB形式のファイルがあるフォルダを指定してください。インポートしたいGLBファイルを選択して、右クリックすると、メニューの下から2つ目にインポートの項目が出ると思います。これを選択すると、バイナリーのファイルを読み込んで、テキストに変換して書き出してくれます。ファイル保存の画面が表示れますので、それに従って進めて下さい。そして編集したテキストファイルをGLB形式でエクスポートしたいときは、glTFのファイルを選択して右クリックすると、下から2つ目にエクスポートの項目があります。これを選択すると、GLB形式で書き出すことが出来ます。とても簡単ですが、glTF TOOLでGLB形式のファイルのインポートとエクスポートの方法をご紹介しました。

今回はよく使われているテキストエディタ「Visual Studio Code」でのスニペット登録を説明したいと思います。スニペットとはコード群を予めスニペットに登録することで短いコードで簡単に呼び出せる機能です。普段からよく使うコードや、長いコードを毎回 1 からコードを入力するのは大変なので、そういったコードを短縮して出せるようになるとコーディングスピードの向上に繋がります。よく使うネーミングでいえば、PCやスマホでいう「ユーザー辞書」のようなものです。スニペット登録の方法実はこのスニペット登録は、すでに色んな人がやり方を書いています。僕も最初にやる時は色々な登録方法を探していくつも目にしています。なのになぜこのテーマで書こうとしたかといえば！この機能、初心者の内から使いたい機能だと思います。ですが、初心者あるあるでここで詰まってしまう方が一定数いると思っています。僕もその一人。。。そして身近な人からも相談を受け、同じ方法で解決出来たことを知って、これは時間の無駄だ！と思い、ある1箇所を特に強調してお伝えしたいと思います。それではいってみましょう！１. 　「Code」→　(歯車マーク)　→「ユーザー スニペット」を選択。2. 　検索欄で登録したいスニペットの言語を入力し、選択します。　　（今回はHTMLの登録と仮定して「html.json」を選択）さて、ここで問題の場所がやってまいりました。みなさん説明の中で少しずつ違いはあるものの概ね同じような説明をされています。上の画像の部分にサンプルコードが入っていますが、これは実はあってもなくても変わりません。人によっては全部消してか

この数日仮想化の鬼のように、仮想化に没頭していました。MacOSで動いているVirtualBoxのゲストOSのUbuntu10.04でmultipassが使えることが分かり、dockerを使い、WordPressの開発環境作りをしていました。今回multipassで使えるUbuntu20.04を日本化することに、挑戦しました。また、dockerにVSCODEをSSH接続することも、できるようになりました。このスキルで、サーバーにリモートで接続して、ファイルの更新などを行うことができます。この画像のように、WordPressを使ってウェブサイトを作ることができます。こうして仮想化などに没頭している時が、私の至福の時間です。私は、このように自分でテーマを見つけて、スキルアップに努めています。

結論から言うと、iPadでは通常のパソコン版Visual Studio Code（VS Code）をそのままインストールして使うことはできません。AppleのiPadOSは、MacやWindowsのようなデスクトップ向けアプリを直接動かす仕組みではないため、Microsoft公式のVS Codeアプリは現時点で提供されていません。しかし、完全に使えないわけではなく、いくつか代替手段があります。iPadでVS Codeを使う主な方法1. vscode.dev（ブラウザ版）を使うもっとも手軽なのが、SafariやChromeで「vscode.dev」にアクセスする方法です。これにより、HTMLCSSJavaScriptJSONMarkdownなどの軽い編集作業は可能です。メリット無料インストール不要外出先でもすぐ使えるGitHub連携がしやすいデメリット拡張機能に制限があるローカル環境構築不可Node.jsやPHPなどの実行は難しい本格開発には不向き2. GitHub CodespacesやRemote環境を使うより本格的に使いたい場合は、クラウド開発環境を活用します。例えば、GitHub CodespacesReplitCodeSandboxなどを利用すれば、iPadでもブラウザ経由でかなり高度な開発が可能です。メリット実行環境ありターミナル利用可拡張性が高いPCに近い開発体験デメリット通信環境必須一部有料操作性はPCに劣る3. SSHやリモートデスクトップでPCに接続自宅PCやVPSに接続して、実質的にiPadを開発端末化する方法です。代表例：TailscaleChrome R

こんにちは。たつやです。作業ログです。味の素さんの料理レシピを写経するために、下記記事ではオフィス系アプリを使ってポチポチ文字色を変えていたので、かなり面倒でした。そこで、VScode用にシンタックスハイライトの拡張を作ってみました。記述ルールをいくつか設けることで自動で文字色を変更してくれます。こんな感じです。いろいろ荒いところもあるので、使いつつ、シンタックスハイライトの機能も洗練したいと思っています。そのうち、Githubに公開します。

近年、AIを活用した開発支援ツールが注目を集めています。その中でも「Cursor」は、エンジニアの作業効率を大きく向上させる革新的なコードエディタです。ここでは、Cursorの主な特徴について解説します。1. AIによる強力なコード補完Cursorは、ChatGPTをベースとしたAIを搭載しており、従来の補完機能に比べて圧倒的に自然で文脈に沿ったコード提案を行います。変数名や関数の流れを理解したうえで候補を提示するため、コーディングスピードを大幅に向上させます。2. 既存コードの理解とリファクタリング単なる補完だけでなく、既存のコードを解析して説明したり、リファクタリング案を提示することが可能です。複雑なコードや他人が書いたコードの理解をサポートしてくれる点は、特にチーム開発で役立ちます。3. 対話型の開発体験Cursorはエディタ内でAIと対話できる仕組みを持っています。質問を投げかけると、その場で回答や修正案を提示してくれるため、調べ物に時間を取られることが少なくなります。4. 幅広い言語とフレームワークに対応JavaScriptやPython、TypeScript、Goなど、多くのプログラミング言語に対応しています。また、ReactやNext.jsなど人気のフレームワークにも最適化されているため、Web開発において特に力を発揮します。5. 開発環境との高い親和性Visual Studio Codeに似た操作感を持ちつつ、AI機能を強化した形になっているため、VS Codeユーザーにとって違和感なく移行できます。拡張機能やショートカットも活用できるため、既存のワークフローに

AIを使いながらWebサイトが完成したとき、「あ、これならいけるかもしれない」と思った。その感覚が、フリーランスへの一歩を踏み出すきっかけになった。まず、基礎からコツコツ最初は手探りだった。毎日少しずつ、以下のことを学んでいった。 Webデザインの基礎知識 Figmaの操作 Photoshopの操作 HTML / CSSの書き方 VSCode（エディタ）の使い方 オンラインスクールに通って、毎日ちょっとずつ手を動かすうちに、だんだんと形になっていった。 Claudeと一緒にWebサイトを作ってみた 01 ClaudeにWebサイトのコードを生成してもらう 02 出力されたコードをVSCodeにコピペ 03 ブラウザで確認 → いい感じ！ 気づいたこと Claudeを使えば、ポートフォリオサイトも思ったより簡単に作れそう。「デザインを考える」ことに集中して、コーディングはAIと一緒に進める——そんなスタイルが見えてきた。 AIとの3年間が、武器になった 実はWebデザインを学び始めるずっと前から、AIとの付き合いは続いていた。この3年間でやってきたこと： 画像生成AIの活用 YouTube企画・台本をAIで作成 ナレーション原稿の生成 CapCutで動画編集・制作 クリエイティブな作業のほぼ全域に、AIを組み込んできた。最初は「試してみる」感覚だったが、気づけば自分なりのワークフローができていた。 ✦ ✦ ✦ フリーランス案件、はじめの一歩 自己PR文には、この3年分の実績を素直に書いた。画像生成、動画制作、AI活用の経験——すべてが「実績」として並んだとき、思ったよりずっと伝わ

VS Codeを使っていると、ファイルをたくさん開きすぎて「どこに目的のファイルがあるかわからない…」となりがちです。この記事では、タブを素早く移動する方法と、目的のファイルへ一瞬で移動する方法をまとめます。タブ移動が必要になる場面VS Codeでは、作業中にこうなりやすいです。ファイルを開きすぎてタブが横に長くなる同じような名前のファイルが並んで見失う「さっき編集してたファイルどこ？」となるサイドバーから探すのも面倒そんな時に便利なのが、ショートカットでのタブ移動です。1つ前・1つ次のタブに移動するタブを順番に移動したい場合は、これが一番よく使います。次のタブへ移動Mac：Control + TabWindows：Ctrl + Tab前のタブへ移動Mac：Control + Shift + TabWindows：Ctrl + Shift + Tabタブを「左から右へ」「右から左へ」移動するイメージです。直前に開いていたファイルに戻る（超便利）「今のファイルを一旦確認して、元のファイルに戻る」という動きが多い人はこれが最強です。Mac：Command + Option + ←（戻る）Windows：Alt + ←（戻る）さらに、進む操作もあります。Mac：Command + Option + →（進む）Windows：Alt + →（進む）これはブラウザの「戻る」「進む」感覚で、編集していたファイル間を行き来できます。タブ一覧から探して移動する（検索で一発）タブが多すぎて、順番移動では追いつかない時は検索で一瞬で飛ぶ方法が便利です。「開いているファイル」一覧から選ぶMac：Co

Firebaseを使ったWeb開発に便利なエディタFirebase を使って Web 開発する場合、どんなソフトウエア（アプリ）が必要か迷う場合あると思います。 皆さんはどのようなアプリをお使いですか？今日は、Firebase とは直接関係ありませんが、Firebase を使って Web 開発をする場合にお勧めのエディタについての記事です。開発内容によって変わるアプリ今回、敢えて「Firebase を使った Web 開発」と書いたのには理由があります。 単にプログラミング（ソフトウエア開発）と言っても色々な開発があるからです。例えば、あくまで個人的ですが、Java などの開発の場合は、IDE(Integrated Development Environment)と呼ばれるツールの方が便利なことが多いからです。私は、Java の開発の場合は Netbeans／Eclipse を中心に利用しています。一方で、Web 開発になると少し事情が変わってきます。Netbeans などでも、Javascript の開発ができますが、色々試した結果、現在はエディタはマイクロソフトの Vscode に落ち着いています。他には利用者が多いエディタは Atom かなと思います。好みにもよると思いますが、Web 開発の場合はこの２つが２０２０年１２月時点ではお勧めのエディタです。この記事では、Vscode を中心に記事を書いて行きます。Vscode をお勧めする理由いくつかありますが、主なものは以下の通りです。＊　無料（良いものならばお金を払うのは問題ないのですが、無料で高機能です）＊　プラグインが豊

最近ふと、「IT業界ってめっちゃ進んでるように見えるけど…逆にどこで困ってんの？」って気になって、のんびりネットを彷徨ってみたんです。そしたらね……わりとみんな同じところで悩んでて、まるで同じクラスのテスト前みたいな雰囲気でした。そんな “ゆるレポート” をお届けします。---🥇 第1位：人が足りない（ほんとに）いや、知ってはいたけど……想像以上に足りてない。プログラマーも、インフラエンジニアも、セキュリティ系も、UI/UXも。全部いない。コンビニ感覚で「エンジニアください」って言っても補充されない世界。そしている人たちはというと、タスク山積み気づくとGitHubに脳内ログインスタバの椅子に魂置いて帰宅みたいな状態だそうで。もはや業界全体で “分身の術” が待たれてる気がする。---🥈 第2位：技術が変わるのが速すぎる気づいたら新しいフレームワークが産まれ、気づいたら前のフレームワークは寿命を迎え、気づいたら謎の新用語が流行り、気づいたらAIが全部ひっくり返してる……。IT業界の時間軸って、おそらく地球より5倍速くらい。しかも勉強しても勉強しても、気づけば Twitter のタイムラインでもう次の話題が始まってるし、追いついたと思っても別の方向で新技術が爆誕。これはもう「追う」のではなく「仲良くやっていく」しかない気がする。---🥉 第3位：セキュリティ問題がエグいこれはもう、イタチごっこの極み。誰かが穴を直す → 別の誰かが新しい穴を見つける → また塞ぐ → また探すまるでモグラ叩きの無限ループ。パスワード流出なぞの海外アクセス「やばいメール来たんだけどコレ…」API キー

Visual Studio Code（VS Code）は、今後本体にAI関連機能を組み込むことで、「オープンソースのAIエディタ」としての方向性を明らかにしました。 これは、開発チームがAIを活用してコードを書くツールの中核を成すという大きな一歩です。 特に、GitHub CopilotやChatのような代表的な拡張機能がクローズドソースである中、VS CodeがオープンソースとしてAI機能を統合することは注目に値します。 AI機能の組み込みにより、ユーザーはリファクタリングやコーディングの効率を大幅に向上させることが可能になります。 また、VS Codeのコントリビュート機能により、開発者自身がAI関連の機能を容易に追加できる点も魅力です。 これは、特に好奇心旺盛なプログラマーにとって、拡張性が高い環境を提供することになるでしょう。 AIエディタの進化が期待される中、セキュリティ面でもどういった対策が講じられるかが気になります。 AIツールによる攻撃に対して、コミュニティ全体が迅速に発見・修正できることが求められます。 このような環境が整えば、より安心してプロジェクトに取り組むことができるでしょう。 VS Codeが今後どのように進化していくのか、特にCursor Windsurfなどの競合とどのように差別化するのか、引き続き注目していきたいと思います。 AI機能の拡張は、プログラミング作業に新たな可能性をもたらすとともに、開発者の生産性を一層引き上げる要因となりそうです。