タグ

ブックマーク / atmarkit.itmedia.co.jp (21)

  • VS Codeでソースコード管理:GitLens拡張機能を使ってみよう

    連載目次 前回はGitHub Pull Requests and Issues拡張機能を使って、Visual Studio Code(以下、VS Code)の中からissueを作成してみました。今回はVS Codeでソース管理をしていく上でインストールしていると便利なもう一つの拡張機能「GitLens」を紹介します。 GitLensとは GitLensを使うと、誰がこのコードを書いたのか、このコミットは誰により行われたのか、コードはどのように変わっていったのかなどを、VS Codeの内部で簡単に参照できるようになります。

    VS Codeでソースコード管理:GitLens拡張機能を使ってみよう
  • Bashを学べる全20回の入門動画 MicrosoftがYouTubeで無料公開

    Microsoft2023年2月21日(米国時間)、初学者向けにBashを解説する全20回の動画シリーズ「Bash for Beginners」をYouTubeで公開した。 開発者向けQ&Aサイト「Stack Overflow」が2022年に実施した開発者調査でも、Bashは最も人気のある技術の7位に選ばれている。Bashは汎用(はんよう)性の高い強力なスクリプト言語であり、タスクの自動化、ファイルの管理、クラウド環境での作業などさまざまな領域で利用されている。 なぜBashの学習が他のスキルに役立つのか 関連記事 未経験者に「プログラミング言語」は求めない 調査で分かった企業が期待するスキルとは パーソルキャリアは、「doda ビジネスパーソンと企業の転職意識ギャップ調査」の結果を発表した。それによるとITエンジニア職「未経験歓迎」求人の割合は2年前(2021年1月)に比べて約3.0倍

    Bashを学べる全20回の入門動画 MicrosoftがYouTubeで無料公開
  • とにかく速いWordPress

    WordPressの表示遅延やサーバの負荷上昇の原因になり得るボトルネックは、どのように見つけて、改善すればいいのか、その方法を紹介します。

    とにかく速いWordPress
  • Visual Studio Codeの設定「虎の巻」:IDE編

    Visual Studio Code(以下、VS Code)ではさまざまな部分をユーザーが自由に設定できるようになっている。画面の配色テーマもそうだし、エディタの表示方法も細かく調整できる。今回はそのうち、IDEを中心にVS Codeの基設定のカスタマイズについて見てみよう。ただし、個々の設定項目について話を進める前に、VS Codeの設定について簡単にまとめておこう。なお、稿ではWindows/64bit版のVS Code 1.22で動作を確認している(他の環境では異なる部分があるかもしれない)。 VS Codeの設定、基の「キ」 VS Codeの設定には「ユーザー設定」と「ワークスペース設定」の2つがある(加えて、キーバインドの設定もあるが、これについては稿では取り上げない。また、配色テーマとアイコンテーマは設定ファイルに記述されるので、以降で取り上げる)。 ユーザー設定はその

    Visual Studio Codeの設定「虎の巻」:IDE編
  • PHPプログラミングも快適に! VS Codeの二大拡張機能

    PHPプログラミングも快適に! VS Codeの二大拡張機能:Visual Studio Code+PHPの可能性を探る(1/3 ページ) VS CodeとPHPでWebアプリ開発はどこまで簡単になるのかを探る新連載。今回はVS Codeを利用したPHPによるアプリ開発に必須の拡張機能を2つ紹介する。 連載「Visual Studio Code+PHPの可能性を探る」 連載では、Visual Studio Code(以下、VS Code)を使ってPHPプログラミングする際の基事項を紹介していく。ただし、PHPの構文や文法については取り上げない予定だ。これらについては、@IT内の連載「Web業界で働くためのPHP入門」やPHP公式サイトの「PHP マニュアル」などを参考にしてほしい。また、VS CodeのGUI構成や、基的な使い方については「Visual Studio Codeの使い方

    PHPプログラミングも快適に! VS Codeの二大拡張機能
  • Windows 10のエクスプローラを便利に使うTIPS 10本

    Windows 10のエクスプローラは、単にフォルダやファイルを閲覧するだけではなく、開いたフォルダ内のプログラムを実行したり、新たなフォルダやファイルを作成したりすることなどができる。さらに、作業を効率化するちょっとしたテクニックが幾つかある。その中から10のTIPSを紹介する。 エクスプローラで拡張子や隠しファイルを表示する Windows 10のデフォルト設定では、エクスプローラでファイルの拡張子や隠しファイルが表示されないようになっている。同じファイル名で設定ファイルと実行ファイル(プログラム)があるような場合、どちらをクリックすればアプリケーションが起動するのか分からないような場合もある。また、場合によっては隠しファイルになっている設定ファイルなどを編集する必要に迫られることもあるだろう。 このような場合、エクスプローラで拡張子や隠しファイルが表示されるようにしておくと便利だ。

    Windows 10のエクスプローラを便利に使うTIPS 10本
  • VS Codeでかっこの対応を分かりやすくするには

    これにより、かっこの対応付けが色分けされて表示されるようになる。以下は、例としてASP.NET Coreプロジェクトを作成して、そのファイルを開いたところだ。かっこ(())、波かっこ({})、角かっこ([])が色分け表示されていることが分かる。 また、上の画像では12行目にカーソルがあるが、ここからカーソルを囲む直近のかっこ(スコープ)の終了位置までかっこと同じ色で縦線が引かれていることにも注目しよう。これにより、かっこの対応付け、その範囲がどこまでかが一目で分かる。 Bracket Pair Colorizer拡張機能には多くの設定項目があり、自分の好みに合わせた表示方法に設定できるようになっている。以下では幾つかの設定項目を紹介しよう。これらは「bracketPairColorizer.XXX」という名前だが、以下では「bracketPairColorizer.」は省略する。 forc

    VS Codeでかっこの対応を分かりやすくするには
  • VS Codeを持ち運ぶには(ポータブルモード)

    連載「Visual Studio Code TIPS」 Visual Studio Code(以下、VS Code)はバージョン1.25から「ポータブルモード」をサポートするようになった。この機能を利用して、自分が普段使っている設定のまま、VS CodeをUSBメモリやファイル共有を利用して、他のマシンでも実行する方法を説明する。 VS Codeのダウンロードページから、WindowsではZIP形式、Linuxでは.tar.gz形式で配布されているVS Codeを入手する。macOSではZIP形式で配布されている通常のパッケージを入手する ZIPファイル/.tar.gzファイルを(任意のフォルダに)展開する 設定ファイルや拡張機能を保存する「dataフォルダ」を作成する dataフォルダに、自分の環境を復元するのに必要なファイルをコピーする ポータブルモードのVS Codeが入ったフォルダ

    VS Codeを持ち運ぶには(ポータブルモード)
  • VS CodeのCSSサポート

    Sass/Less.jsのCSSへのトランスパイルを自動化しよう Sass/Less.jsはCSSを拡張した言語であり、最終的にはCSSへとトランスパイル(コンパイル)される。VS Codeの統合ターミナルを使えば、そんな作業も簡単に行えるが、tasks.jsonファイルを作成することでワンタッチでトランスパイルを行うことも可能だ。 ここでは、次に示す簡単な.scssファイルのトランスパイルを例に取る。また、ここでは「npm install -g sass」コマンドを実行して、Sassをインストール済みとなっている。 $bgc: lightgray; $h1bgc: darkgray; $fgc: lightblue; body { background: $bgc; } h1 { background: $h1bgc; color: $fgc; }

    VS CodeのCSSサポート
  • VS CodeでHTMLを楽々コーディング!

    Emmetを活用しよう! Emmetを使用すると、「要素型セレクタ、クラスセレクタ、IDセレクタなど、CSSを適用するHTML要素を選択する際に使用する構文とよく似た構文を用いて、HTMLドキュメントの構造を一気に記述」できる。VS Codeはデフォルトで、Emmet構文をサポートしており、使い方によってはIntelliSenseを利用するよりもはるかに高速にHTMLを記述できる。 例えば、「ul>li*3{item $}」というのは、以下のコードを記述するのと同値だ。

    VS CodeでHTMLを楽々コーディング!
  • Visual Studio Code TIPS - @IT

    VS Codeをコマンドラインから起動する場合にはコマンドラインオプションを指定可能だ。その中から拡張機能に関連するものを幾つか紹介する。

    Visual Studio Code TIPS - @IT
  • VS Codeでファイルを比較し、差分(diff)を表示するには

    VS Codeでファイルを比較し、差分(diff)を表示するには:Visual Studio Code TIPS VS Codeが持つファイルの差分(diff)を表示してくれる機能を使って、ファイル間またはファイルとクリップボードの差分を表示する方法を解説。

    VS Codeでファイルを比較し、差分(diff)を表示するには
  • いますぐ使えるCSS3テクニック集! コピペ用サンプル付き!

    マウスオーバーでクルッとするボタン 画像もJavaScriptも使わずに、HTMLCSSのみでクルッと回転するようなエフェクトの発生するボタンの作成方法を紹介します。(使用例: ニュースページ、地図ページ) ニュースページのカテゴリナビゲーションです。もともと英語で表示しているテキストを、マウスオーバーでくるっと日語に入れ替えています。CSSを工夫して用いれば、このように要素内のテキストを動かすことも可能になります! 実際につくってみよう! 上述のスライドアウトインする画像と同様で「transition」というCSS3プロパティを用い、マウスオーバーでのCSSプロパティの変化にアニメーションを加えています。サンプルコードを以下に用意しました。 CSSでクルっとするボタン - jsdo.it - share JavaScript, HTML5 and CSS CSS3を用いて作成したマウ

    いますぐ使えるCSS3テクニック集! コピペ用サンプル付き!
  • これでGitも怖くない! GUIでのバージョン管理が無料でできるSourceTreeの7つの特徴とは

    これでGitも怖くない! GUIでのバージョン管理が無料でできるSourceTreeの7つの特徴とは:ユカイ、ツーカイ、カイハツ環境!(31)(1/3 ページ) SourceTreeは直観的なGUIで使いやすい、今話題の無料のリポジトリ管理ツールです。稿では、Windows版のSourceTreeをGitサポート機能を中心に紹介します。 Gitも使える大人気のバージョン管理ツール「SourceTree」 SourceTreeは、もともとMac OS X用に開発されていた無料のGit/Mercurialのクライアントアプリケーションで、GUI(Graphical User Interface)による直観的なバージョン管理の操作ができます。 SourceTreeは、2011年10月に「JIRA」「Bitbucket」で有名なアトラシアンに買収され、Windows用の正式版が2013年6月に公

    これでGitも怖くない! GUIでのバージョン管理が無料でできるSourceTreeの7つの特徴とは
  • CSSコーディングで泣かないためのSassの基礎知識と10の利点

    CSSコーディングで泣かないためのSassの基礎知識と10の利点:爆捗! WordPressテーマ作成ショートカット(3)(1/3 ページ) 連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗(はかど)らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。 連載「爆捗! WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」(以下、Dreamweaver)でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr

    CSSコーディングで泣かないためのSassの基礎知識と10の利点
  • 勉強会主催者・参加者が知らないと泣きを見る48のサービス&テクニック (1/2) - @IT

    勉強会主催者・参加者が知らないと泣きを見る48のサービス&テクニック:安藤幸央のランダウン(64)(1/2 ページ) イベント参加者も必見! 開催の裏側も分かる 皆さんは、各地で開催されている勉強会(ミートアップ)やセミナーなどに参加したことはあるでしょうか? 無料で開催される、ごく小じんまりとした内輪の勉強会から、都内企業の大きな会場を使った大規模セミナーまで、さまざまな形態があります。また、企業が商品やサービスの告知や求人を主目的としたものから、仲間内での純粋な技術やデザイン関連に特化した勉強会まで、さまざまなスタンスのものがあります。仕事場や自宅の場所や、仕事の時間が自由になる/ならないといった仕事の形態や、興味の対象などによって勉強会参加の自由度は変わります。 特に首都圏にお住まいで、@ITの読者であれば、何かしらのイベントに参加したことのある人が多いのではないでしょうか? そして

    勉強会主催者・参加者が知らないと泣きを見る48のサービス&テクニック (1/2) - @IT
  • パララックスエフェクトの基本

    jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基から。 Webサイトの55%で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTMLCSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ

    パララックスエフェクトの基本
  • スマホ向けサイト制作の実装&使えるTips10選

    スマホ向けサイト制作の実装&使えるTips10選:jQuery Mobileでスマホ向け企業サイト構築(3)(1/4 ページ) まだjQuery Mobileを触ったことのないWeb制作者向けに、基的な利用方法を学びながら、jQuery Mobileを使った簡単な企業サイトの構築の仕方を解説していきます。今回は、画面遷移の制御、アイコン表示、ナビゲーションバー、検索フィルタ、基的なHTMLスタイル、固定ポジションモードなどを紹介します jQuery Mobileでスマホ向けサイト制作は、こんなに簡単にできる 前回の第2回「触りながら覚えるスマホ向け企業サイト設計の基礎知識」では、サイトの基構造についての説明と、トップページのコーディングに合わせてヘッダ、フッタなどのツールバー、リストビューコンポーネントを紹介しました。 新年1発目となる連載の第3回はお知らせページの作成を進めつつ、

    スマホ向けサイト制作の実装&使えるTips10選
  • Microsoft WordでWordPressを更新する方法 - @IT

    カテゴリについても、「分類の挿入」からプルダウンで選択でき、「発行」ボタンを押せば、公開完了というわけだ。さらに、後から記事を修正したいときにも、元のWordファイルを修正して発行を行えば上書きされる。ただし、画像だけはそのままのサイズで投稿されるため、注意が必要とのことだ。 これを実現しているのが、XML-RPCという仕組み。この仕組みは、WordPress独自のものではなく、主要なブログサービスなどで幅広く活用されているという。この仕組みを使うことで、ローカルにあるCSVファイルから一括投稿できたり、外部サービスのAPIcronと組み合わせて毎日決まった時間に自動でコンテンツを投下できたりするという。 野村氏のテンポのいいプレゼンに、会場からは「おぉー!」「ほぉー!」などという歓声がスライドごとに湧き起こっていた。 プラグイン無料配布戦略 続いて印象に残ったのは、石川栄和氏のセッショ

  • フォーム関連要素(2) HTML5でinput要素に追加された新しいタイプ13連発

    フォーム関連要素(2) HTML5でinput要素に追加された新しいタイプ13連発:HTML5“とか”アプリ開発入門(7)(1/3 ページ) HTML5の新しい入力タイプを、日時関連や数値、検索、電話番号、URL、メールアドレス、色など用途別にサンプルコードとともに紹介。iPhoneで見るとキーボードまで変化するタイプも!?

    フォーム関連要素(2) HTML5でinput要素に追加された新しいタイプ13連発