サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
satoyan419.com
昨年までマークアップするときのエディタとしてAtomを使っていましたが、今年からVisual Studio Codeを使うようになりました。今回は、Visual Studio Codeの魅力を伝えたいと思います。 また、この記事ではVisual Studio Codeのバージョン1.25に合わせて説明していきます。 Visual Studio Codeとは Visual Studio Codeとは、Microsoftによって開発されたソースコードエディタです。Atomと同じくElectronを使用しているため、Windows・Mac・Linuxで利用することができます。 Visual Studio Codeの特長 動作が軽い Atomから乗り換えた一番の理由は、Visual Studio Codeの動作の軽さです。私の知り合いでも「Atomが重くてVisual Studio Codeに乗り
Prettierのメリット コードフォーマッターとしてのメリット コードフォーマッターによって自動的にコードを整形してくれるので、手作業でコードを整形する手間と時間を省くことができ、開発者の負担を減らすことができます。 また、複数人でソースファイルを編集する場合でもコードの記述ルールが統一されるため、コードの可読性が保たれ、メンテナンス性が向上します。 Prettierならではのメリット PrettierはNode.js上で動作するため、WindowsでもMacでも同じ手順で導入することができます。 また、Prettierは以下に列挙した多くの言語をサポートしています。 JavaScript(ES2017, JSX, Flow, TypeScript, Vue, JSON) CSS(CSS, Less, SCSS) Markdown(CommonMark, GitHub Flavored
gulp v4.0.0がプレリリース! 移行方法と変更点まとめ 2018年1月8日 ※この記事は2018年1月8日に公開しましたが、2020年9月14日に内容をメンテナンスしています。 gulp 2018年1月1日に、gulp v4.0.0がプレリリースされました。この記事では、gulp v4への移行方法と、主な変更点をいくつか紹介します。 gulp v4への移行方法 まず、gulp v3からv4への移行方法について説明します。 gulpのグローバルインストール グローバルインストールされているgulp v3を削除して、gulp v4をグローバルインストールします。 $ npm rm -g gulp $ npm install -g gulp-cli 参照:Quick Start | gulp.js gulpのローカルインストール ローカルインストールされているgulp v3を削除して、g
jQueryの特徴 JavaScriptライブラリの中で最もよく使われているがjQueryです。jQueryの最大の特徴は、ブラウザによって異なるJavaScriptの仕様の違いを吸収し、同じコードで同じ動作を実現してくれることです。 バージョンによる違い jQuery 1.x系 ターゲットブラウザにIE8以下が含まれている場合には、jQuery 1.x系を用います。 1.12.0以降は、機能追加などはなく、バグ修正のみが行われます。 jQuery 2.x系 jQueryはブラウザによるJavaScriptの差異を吸収してくれるという大きな利点があります。その一方で、対象となるブラウザが多いほどファイルサイズが大きくなるという問題点もあります。 2013年4月にリリースされたjQuery 2.0では、より軽く・より速いjQueryを実現するために、IE6〜8が対象ブラウザから外されました。
最近のメール事情 メール閲覧環境の多様化 2015年にエクスペリアンジャパンが出した『BtoC市場におけるメールマガジン受信デバイスの利用実態レポート』には、以下のように記されています。 スマートフォンやタブレットなどのモバイル端末の加速度的な普及や高速データ通信LTEの普及は、メールマガジンの受信環境にも劇的な変化をもたらしました。今やモバイル端末でのHTMLメールの受信・閲覧は当たり前になったと言えるでしょう。 このように、HTMLメールはPCだけでなくモバイル端末でも閲覧されるように変化してきています。 メールの閲覧環境は、以下の3つのタイプに分類することができます。 デスクトップ(Outlook, etc.) モバイル(iPhoneのネイティブアプリ, etc.) Webメール(Yahoo!メール, Gmail, etc.) さらに、Yahoo!メールやGmailに関しては、スマー
Webページの表示速度を改善する手段の一つに、ブラウザキャッシュの利用があります。 単にブラウザキャッシュを利用するだけであればhttpd.confまたは.htaccessに記述を加えるだけでいいのですが、ブラウザキャッシュの仕組みをちゃんと理解した上で使いたかったので色々と調べてみました。 今回の記事では、調べた内容を紹介します。 Last-ModifiedヘッダーとETagヘッダー これらのヘッダーでは、ブラウザにキャッシュされたファイルとWebサーバーのファイルとが同じかどうかをブラウザが判断する方法を指定します。ファイルが同一であれば、ブラウザキャッシュが利用され、ファイルの転送量が節約されます。 ブラウザは、前回のアクセスでLast-ModifiedヘッダーまたはETagヘッダーを受け取った場合、条件付きGETリクエストをWebサーバーに送ります。 Last-Modifiedヘッ
はじめに Atomとは、GitHubが開発したソースコードエディタです。Mac・Windows・Linuxに対応しており、無料で使うことができます。 設定画面 Macの場合は「Command + ,」ショートカット、Windowsの場合は「Ctrl + ,」ショートカットで設定画面(Settings)が表示されます。 コアパッケージとコアテーマ Atom本体をインストールすると、77個のパッケージもインストールされます。これらのパッケージを「コアパッケージ(Core Packages)」と呼びます。同様にAtom本体とともにインストールされるテーマを「コアテーマ(Core Themes)」と呼びます。 パッケージとテーマのインストール方法 設定画面で[Install]を選択すると、次の画面が表示されます。 右側のボタンで、パッケージの検索とテーマの検索を切り替えることができます。 自分が使
gulpとは何か Web制作において必要な処理を自動化するツールのことを「タスクランナー」と呼びます。タスクランナーを使うことによって、作業の効率化や手作業によるミスの防止になります。例えば、タスクランナーを用いると、以下のような処理が自動でおこなえるようになります。 SassなどのCSSメタ言語のコンパイル HTML/CSS/JavaScriptの最小化 CSSスプライトの作成 有名なタスクランナーとしてGruntとgulpの2つがありますが、gulpには「処理の流れが分かりやすく、タスクの記述が簡単におこなえる」という大きなメリットがあります。 gulpの導入方法 手順1と2は各PCで一回実施し、手順3~7はプロジェクトごとに実施します。 手順1:Node.jsをインストールする まずはじめに、Node.jsをインストールします。インストール方法については、Macの場合は「nodebr
はじめに Webページのパフォーマンスを測定する「PageSpeed Insights」は、パフォーマンスを改善するための提案をしてくれます。その提案の一つに「圧縮を有効にする」があり、次のように述べられています。 多くのウェブサーバーでは、(中略)ファイルをダウンロード用に送信する前にgzip形式で圧縮できます。圧縮すると、ウェブサイトを表示するのに必要なリソースのダウンロードにかかる時間を削減できます。 今回は、パフォーマンス向上のためのgzip圧縮転送について取り上げます。 gzipとは何か gzipとは「RFC 1952に記述されているファイル圧縮プログラムgzipによって作られるエンコーディングフォーマット」のことです。 gzip圧縮の対象となるのは、HTML、CSS、JavaScriptなどのテキスト形式のファイルです。一方で、圧縮してはいけないファイルもあります。 画像やPD
wp_headで出力されるコードには不要なものがたくさん含まれています。また、使う必要のないファイル(WordPressに入っているjQueryやWordPressプラグインのCSS)がwp_headを通して読み込まれてしまいます。 今回はこれらの問題を解決する方法を紹介します。 wp_headの役割 wp_head関数は、headタグ内に表示するためのさまざまなコードを出力します。これらのコードは、wp-includes/default-filters.phpで設定されています。 また、WordPressプラグインの中には、wp_headアクションを使ってCSSやJavaScriptを出力するものがあります。これらのプラグインはwp_head関数を削除すると正常に動作しなくなります。そのため、テーマを自作する際にはheadタグ内にwp_headを記述する必要があります。 コメントのフィー
hreflangタグとは何か調べてみました 2015年10月1日 ※この記事は2015年10月1日に公開しましたが、2019年8月10日に内容をメンテナンスしています。 多言語対応 hreflangについては、「ページのローカライズ版についてGoogleに知らせる – Search Console ヘルプ」で以下のように記載されています。 ページに言語や地域ごとの複数のバージョンがある場合、こうした別バージョンについて Google にお知らせください。それにより、Google 検索はユーザーの言語や地域に応じた最適なページのバージョンを表示できるようになります。 つまり、hreflangタグは、多言語サイトを運用している場合に、Googleで検索したユーザーに対して適切な言語のバージョンを表示するために必要となる要素です。 多言語サイトの機会損失を防ぐ 例えば、東アジアをターゲットとして
このページを最初にブックマークしてみませんか?
『satoyan419.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く