はてなブックマーク

SFTP拡張機能の概要 拡張機能のSFTPを使って、Visual Studio Code（以下VSC）で保存したファイルを自動的にサーバにアップロードする方法を説明します。拡張機能のインストール方法は下記ページを参考にしてください。 拡張機能・マーケットプレイス SFTP拡張機能はマーケットプレイスの検索ボックスで「SFTP」で検索するか、以下のサイトからダウンロードしてインストールしてください。 VSCマーケットプレイス：SFTP拡張機能 SFTP接続の設定例 インストールしたら、SFTPの接続設定を行います。Windows/Linux では［Ctrl］+［Shift］+［P］、Mac では［Cmd］+［Shift］+［P］でコマンドパレットを開き、SFTP: config コマンドを実行します。 SFTP: configを実行すると、sftp.jsonファイルが開かれます。このファイル

PCファーストでサイトをコーディングした場合、スマートフォン端末は画面サイズを自動計算して縮小表示します。このままだと可読性や操作性に問題があるため、普通はメディアクエリを使ってスマートフォン用に調整します。 タブレットもブレイクポイントを設定してレスポンシブ対応を行えば問題ありませんが、タブレット対応の工数を省きたいときがあります。タブレットはスマートフォンのように縮小表示してくれないため、ページの右端が見切れ、横スクロールが表示されます。 これを避ける比較的簡単な方法としては、iPadサイズの際はPC、もしくはスマートフォン表示に強制します。 JavaScriptを使う方法もありますが、viewportとCSSの組み合わせで実装することができます。まずはviewportの設定です。 <meta name="viewport" content="width=device-width">

EditorConfigの概要 EditorConfigはインデントや改行コードなど、コーディングスタイルを統一するための仕組みです。EditorConfigを導入すると、様々なエディタやIDE間で共通のルールを設定したり、プロジェクトごとに設定を変更・統一することができます。EditorConfigの導入で得られるメリットを下記に記載しました。 チームで共通のコーディングスタイルを設定できる様々なエディタで共通のコーディングスタイルを設定できるプロジェクト毎に異なるコーディングスタイルを設定できるJavaScriptやCSSなどファイルタイプ毎に異なるコーディングスタイルを設定できる EditorConfigの正体は、.editorconfigという非常にシンプルな設定ファイルです。この設定に対応したエディタは、その設定を読み込んで保存時に自動的にフォーマットしてくれます。Visual

スニペットの使い方 Visual Studio Codeにはスニペットという便利な機能が用意されています。スニペットとは入力補完候補のことで、この機能を使うと頻繁に使うコードなどをショートカットキーで簡単に呼び出せます。 スニペットの機能を試してみましょう。試すファイルはHTMLでもCSSでも良いですが、ここではJavaScriptファイルを使います。JavaScriptファイルをVS Codeで開き、「fun」と入力すると次のようにコードヒントが表示されます。 上記画像であれば、2番目の項を選んでクリックか［Enter］を押すとFunction構文がコードに出力されます。 スニペットのフォーマット VS Codeにはデフォルトで様々なスニペットが登録されていますが、拡張して新しいスニペットを追加したり、既存のスニペットを変更することができます。 メニューから［ファイル］-［ユーザ設定］-

インストール時のアプリの言語は英語に設定されているので、メニューなどすべて英語です。Visual Studio Codeは拡張機能があり、言語パックをインストールすることでメニューなどの表記を任意の言語にすることができます。 言語パックをインストールして日本語対応にするには次のようにします。 Visual Studio Codeを開くメニューから［View］-［Command Palette］を選択。 もしくはショートカットの［Ctrl］+［Shift］+［P］（Macは［⌘］+［Shift］+［P］）を押します。［Configure Display Language］を選択［Install Additional Laugage］を選択 サイドバーに拡張言語パックが表示されます。サイドバーから［Japanese Language Pack for Visual Studio Code］を探

設定画面の表示 VS Codeの設定画面はツールバーから［ファイル］-［ユーザ設定］-［設定］、もしくは［Ctrl］+［,］で表示します。 設定項目の検索 VS Codeはユーザが設定できる項目が非常に多いですが、設定を検索して素早くアクセスすることができます。検索ワードは項目名や、設定項目で使われている説明文の一部が使えます。たとえば［Font Family］項目を設定したい場合、［設定の検索］に項目名の「Font Family」と入力するとマッチした項目が表示されます。検索は部分一致なので、「font」と入力すると、フォントに関連する設定が表示されます。検索ワードは説明文の一部でも良いので、「フォント」と入力しても多くの設定項目がマッチします。 フォントの設定は設定画面に表示されるメニューから［テキスト エディター］-［フォント］でもアクセスできます。そこでフォントファミリやフォントサ

Visual Studio Codeの概要 Visual Studio Code（以降VS Code）はMicrosoftが開発したソースコードエディタです。C#やVisualBasicといったMicrosoft社の開発言語はもちろん、HTML、CSS、JavaScriptといったフロントエンドの言語や、JavaやPython、SQLといった多くの言語をサポートしています。動作環境もWindows、Linux、macOSに対応しており、無料で利用できます。開発者の人気が高く、Stack Overflow 2019 Developer Surveyでは、VS Codeが最も人気のある開発者環境ツールとしてランクインしました。 VS Codeの人気の要因として、コードの自動補完、Emmet、ユーザスニペット、デバッグ、Gitサポートといった豊富な機能や、テーマやキーボードショートカットのカスタ

RSCSSの概要 RSCSS（Reasonable System for CSS）は、厳選したルールセットのCSSアーキテクチャです。BEMのコンポーネントを参考にComponents、Elements、Variantsの分類が用意されていますが、BEMのとっつきにくいクラス名のルールは使っていません。 CSSアーキテクチャで個性がでるのがクラス名の定義です。RSCSSはすべてにおいてシンプルを目指しているので、クラス名もかなりシンプルなルールになっています。RSCSSのクラスはマルチクラス前提として、クラス名が長くなるのを避けるためにCSSのネストと子セレクタ（>）の利用を推奨しています。 RSCSSの公式ドキュメントにて、RSCSSはフレームワークではなく、保守性の高いCSSを構築するためのアイディアセットと紹介しているだけあって、規則はミニマムです。規定されていない部分を補う必要があ

複数ファイルを対象にしたファイル内容の検索方法を紹介します。 比較的簡単な方法は、ファイルを探し出すことができるfindコマンドと、ファイル内から指定した文字列を検索するgrepコマンドを組み合わせます。 find . -name "*" | xargs grep 検索文字 例えば、現在のディレクトリ以下にあるPHPファイルを対象に、「Auth」が記述されたファイルと行を出力するには以下のようになります。 find . -name "*.php" | xargs grep Auth findでマッチした.phpファイル一式をxargsコマンドが受け取り、それをgrepの引数に渡し、Auth という文字列を検索しています。 それそれのコマンドに多くのオプションがあるので、調べればいろいろと便利で柔軟な検索ができると思います。

animate.jsを使ってテキストアニメーションを使ったのでその備忘録。元ネタはtobiasahlin.comのMOVING LETTERSというスクリプトで、jQueryを使わないように変更した。 MOVING LETTERS CodePen: https://codepen.io/zionboogie/pen/RqQmVE See the Pen anime.js テキストのレターリングアニメーション by jun (@zionboogie) on CodePen. HTML <h1 class="title">JavaScript講座</h1> CSS .title { font-weight: 900; font-size: 3.5em; } .title .char-animation { display: inline-block; line-height: 1em; } J

以降の説明はすべてすべての機能が揃っているTweenMax、TimelineMaxが対象です。Max版とLite版の使い方は同じなので、Lite版にも同じ機能が用意されていれば名前を変えるだけでそのまま使えます。 GreenSockはMITやGPLのライセンスではなく、独自のライセンスを採用しています。GreenSockのライセンスを要約すると、無料で公開されているサイトであれば無料ですが、有料なコンテンツがある場合は有料のライセンス登録が必要です。 TweenMaxを使ったアニメーション TweenMaxはトゥイーン・アニメーションを実現するためのライブラリです。利用するには、オフィシャルサイトからダウンロードするか、CDNサイトでも提供されているので、そのURLを読み込みます。 GSAPを提供するCDNサイト -cdnjs CDNを利用する場合は、下記のようなSCRIPTタグになります

JavaScriptで注目を集めているフレームワークとライブラリを紹介します。初心者向けではありませんが、このような選択肢があるということを簡単に紹介したいと思います。 フレームワークの概要 平均的なWebデザイナーやコーダーが扱うJavaScriptはページ内で完結する簡易なスクリプトであり、そのほとんどがアニメーションや操作性に関わるレベルのものです。一方、フロントエンドエンジニアやプログラマの場合、サーバとの連携が必要なケースが多くあり、開発ボリュームも大きくなるためフレームワークの導入が一般的です。 フレームワークは英語で「枠組み」を意味するように、機能の雛形（テンプレート）を提供し、どのように利用するかのルール化がされているものです。ライブラリとの大きな相違点として、フレームワークは設計レベルでの再利用を想定し、アプリケーションの開発方針を定めています。ライブラリは機能の提供に特

Web Storageに対応していないブラウザを考慮する場合、sessionStorageやlocalStorageが実装されているか確認する方法があります。下記コードでは、typeofを使ってオブジェクトの型を参照し、Web Storageが実装されているかを確認しています。 if ( typeof sessionStorage !== 'undefined' ) { // Web Storageを使う処理を記述 } Web Storageの書き込みと読み込み 次のコードはWeb StorageのsetItem()メソッドでデータを記録し、そのデータをgetItem()メソッドで取得しています。ストレージはsessionStorageを使っていますが、sessionStorageとlocalStorageの使い方は全く同じなので、sessionStorageをlocalStorageに書

RSS（RDF Site Summary）概要 RSSは、ニュースやブログサイトなどのヘッドライン情報（タイトルや要約）を効率的に配信するために開発された文書フォーマットです。ドキュメントの見出しやリンクなどのリストを共通の書式で記述するために特化されているので、サイトの目次や更新情報などを効率的に配信することができます。既にニュースやウェブログのヘッドライン配信で多く利用され、標準的配信方法としての地位を確立しています。RSSは書式の規格なので、扱うコンテンツは何でもよく、個人的なブログやレビューなどもなんの問題もなくRSSとして扱えます。 RSSの活用方法 RSSはXMLで記述します。例えば、WordPressが自動出力するブログのRSSは下記のようなものになります。 SMARTで配信しているRSSの一部抜粋 <?xml version="1.0" encoding="UTF-8"?>

Google Code Prettifyの概要 Google Code Prettify（以下Prettify）はソースコードを読みやすく色分けします。 Google Code Prettifyの読み込み PrettifyはCDNを使って読み込むことができます。次のコードで関連するスクリプトとスタイルシートを一括して読み込みます。 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> コードの指定 修飾したいコードをPREタグやCODEタグで囲い、そのクラスにprettyprintを追加します。 console.log('Hello World') 実行例は次の通りです。 See the Pen Google code-prettifyでソースコード

JavaScriptのコード内からほかのJavaScriptを読み込む方法を紹介します。 特定の条件によりJavaScriptを読み込みたいときなどに有用です。 処理の流れとしては、まずDOMのcreateElement()メソッドでSCRIPT要素を生成し、読み込みたいファイルを指定します。あとは生成された要素をappendChilde()メソッドを使ってBODY要素の最後に追加します。 // SCRIPTタグの生成 var el = document.createElement("script"); // SCRIPTタグのSRC属性に読み込みたいファイルを指定 el.src = "parts.js"; // BODY要素の最後に追加 document.body.appendChild(el); これで次のようなHTMLコードが閉じBODYタグの上の行に追加されます。 <script

1章 【01-01-01】ボタンクリックでアラートを表示 See the Pen 【01-01-01】ボタンクリックでアラートを表示 by jun (@zionboogie) on CodePen. 【01-01-02】getElementById()でIDを指定して要素を取得 See the Pen 【01-01-02】getElementById()でIDを指定して要素を取得 by jun (@zionboogie) on CodePen. 【01-01-03】getElementsByClassName()でクラス名を指定して要素を取得 See the Pen 【01-01-03】getElementsByClassName()でクラス名を指定して要素を取得 by jun (@zionboogie) on CodePen. 【01-02-01】データ容量変換 See the Pen

JavaScriptを動的に読み込みたいケースなどがありますが、jQueryのgetScript()メソッドで簡単に実現できます。 $.getScript("./script.js"); これで外部JSファイルを動的に読み込めます。IF文などを使って、スマートフォンのときだけ特定スクリプトを読み込む、などに便利です。 読み込んだ後に処理を行いたい場合は、getScriptの第2引数にコールバック関数を設定できます。 $.getScript("./script.js", function(){ ... });

マウスオーバーで背景画像をズームアップする方法を紹介します。 背景画像の拡大・縮小を実現する方法はいくつかありますが、ここではtransformのmatrix3dを使うタイプを紹介します。 ※transformのscaleを使うタイプやbackground-sizeを使うタイプがありますが、この2つは background-size: cover と併用して使うとうまくいきません。 demo HTMLとCSSは次のようになります。 HTML <div class="box-main-photo"> <div class="background-image"></div> </div> 次にCSSです。widthやheightなどは好きなように変更してください。 CSS .box-main-photo { position: relative; width: 100%; height: 50

Cookieの概要 Cookieとは、ブラウザを通して訪問者のコンピュータに情報を記録するための機構です。情報は指定した期間保存され、必要になった際にその情報を取得することができます。これは、ユーザごとにパーソナライズして提供するようなサービスや、セッション管理する場合などに有用です。 Cookieの書き込みと読み込み Cookieはdocument.cookieプロパティを使って情報を記録・取得します。 document.cookie = "data=A"; 上記のように名前と値のペアを指定すると、document.cookieプロパティにdataとAのペアを記録します。 記録した値はdocument.cookieプロパティを使ってアクセスできます。CookieはHTTPヘッダの情報として扱われ、記録した情報はその後のHTTPヘッダに含まれることになります。Cookieを発行した時点のH

サーバの用意 このページでは WordPress のインストール方法を説明します。 前提として、ウェブサーバは Apache、DBMS を MySQL とします。 サーバソフトウエア構成 ウェブサーバ Apache DBMS MySQL ウェブサーバの用意は次の手順になります。 ウェブサーバの設定手順 ドキュメントルートを作成します。 ドキュメントルートのオーナー権限、パーミッションの設定を行います。 Apacheの設定ファイルに新しいドキュメントルートとURLを指定します。 設定を有効にするためにApacheを再起動します。 MySQLに新しいデータベースを作成し、アクセス権限を設定します。 DNSでウェブサーバとドメイン名の設定をします。 これからドキュメントルート、オーナー名を下記とした場合のApacheの設定を紹介します。 ドメイン名 www.rfs.jp ドキュメントルート名 r

テーマの概要 WordPressのテーマのほとんどは予めデザインがされており、ロゴや色などをカスタマイズできるような機能が提供されています。素早くブログを立ち上げたいときは楽ですが、オリジナルのデザインを使うとなると色々な機能やデザインがじゃまになりとても作業が大変になります。 そこで、デザインありきでWordPressを構築する際に使いやすい、必要最小限の構成のsmart-wp-minimumというテーマを用意しました。CSSやJavaScriptは必要最低限に押さえていますが、テンプレートはカテゴリ、アーカイブ、エラーページなどそれぞれ用意しています。必要なければindex.phpだけにすることもできます。 テーマを最初から作る際のひな形として使ってください。 テーマの特徴 リセットCSSを読み込んでいる以外はレイアウトのための最低限のスタイルのみ設定しているSCSSでCSSを出力CS

Bourbon（バーボン）の概要 公式サイト http://bourbon.io/ BourbonはSass(SCSS)用としてMixin、Functions、Add-on機能を提供するフレームワークです。 Bootstrapのようにあらかじめ定義したクラスを提供するのではなく、CSSの記述を楽にするための機能を提供します。 例えば、transitionのcubic-bezierは数値でアニメーション処理を設定しますが、 Bourbonはアニメーション名で設定することができます。 CSSで通常通りに指定 -webkit-transition: all 5s cubic-bezier(0.6, 0.04, 0.98, 0.335); -moz-transition: all 5s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: all 5s

ゼロパディング(zero padding)とは、書式の桁数に満たない数値の場合に、足りない桁数だけ 0 を追加して桁数を合わせることです。 たとえば3桁で1を表す場合、足りない2桁をゼロで埋めて 001 と表記します。 JavaScriptでは、String.slice() を使って桁数を合わせます。 たとえば変数 num の値の書式を3桁にしたい場合、下記のようになります。 var num = 1; var ret = ( '000' + num ).slice( -3 ); console.log(ret); 出力結果 001 希望の桁数だけ '000' の0を増やし、その桁数を solice( -3 ) として指定します。 2桁にしたい場合は下記になります。 var ret = ( '00' + num ).slice( -2 ); 値が想定する桁数を超えたときは上記の桁が失われるの

HTMLコーディングがメインのブランチ管理 Github Flowは十分シンプルですが、静的ページのみのサイトや、1人で運用しているサイトではもう少しスリムにできる猶予があります。たとえば、静的ページのみの小規模なサイトの場合、プルリクエストを使ってHTMLやCSSを他人にレビューしてもらう利点はそれほどありません。なぜなら、HTMLやCSSのほとんどが見た目に関するもので、プログラムのようなコードの妥当性のチェックはそれほど重要ではないからです。 ※読み込み速度やバリデーションチェックは重要ですが、検査、計測ツールを使って作業者本人が行えます。 Github Flowからプルリクエストを省略するとその思想から離れてしまいますが、0からルールを作成するよりはGithub Flowをカスタマイズするほうが良いでしょう。 ここでは1人、もしくは少人数で、コードビューがそれほど重要ではないケース

概要 Preprosは、Sass、Pug、Haml、Slim、CoffeeScript、TypeScriptなどをコンパイルするGUIコンパイラです（macOS/Windows/Linux対応）。コンパイル以外にもPreprosには開発に便利な機能が用意されており、HTMLやCSSを更新すると自動でブラウザがリロードされたり、スマートフォンからも確認できるようにローカルサーバが内蔵されています。 他のコンパイラと比較してインストール、設定が簡単なのもポイントです。 Preprosの主な機能・特徴 ウォッチ対象（HTMLやCSS）のファイルを更新するとブラウザが自動でリロードするSassやLessなど豊富な対応言語HTML/CSS/JSの圧縮画像最適化ローカルサーバーを内蔵しており、スマホやタブレット端末なども同期して確認が出来るFTP/SFTP転送も可能npmを使って機能の追加が可能 Ja