コーディング




[Bootstrap3]Navbarのリンククリック時に閉じるJavaScript(MEMO)

Bootstrap3のNavbarのリンククリック時に閉じるJavaScriptをメモします。 前からBootstrap3を使った案件ではこのJSを使っていました。

3なので今更感のある記事ですが自サイトのポートフォリオのメニューにJS追加したついでにメモとして残します。

BootstrapのNavbarのHTMLコードをそのまま記述するとナビのリンククリック時に下記の画像のようにメニューが開きっぱなしの状態になってしまいます。

サイトをアンカークリックで画面スクロールしていると開いた状態なのがよくわかります。

そんな時はcollapseメニューを閉じるJSを次のように書きます。

リンクをクリックすると自動で閉じる処理がされます。

See the Pen Bootstrap3のNavbarのリンククリック時に閉じるJS by Mika (@mikakurimoto) on CodePen.

▼参考になったサイト

http://www.webantena.net/bootstrap/collapse-menu-close-on-click/

[Bootstrap3]Navbarのリンククリック時に閉じるJavaScript(MEMO) Bootstrap3のNavba…




BracketsでSVGをドラッグ&ドロップしてコードを表示する方法

このブログは当初、iconmoonのwebフォントアイコンを使用する予定でした。 しかし、Webブラウザ(Firefox,Chrome)で文字化けしてしまう現象が起こったのでSVGで直接貼り付けることにしました。

BracketsがあるとファイルからSVGをドラッグ&ドロップする事によって下記のようにコードが作成されます。 

image

ちなみに下記のようなIllustratorのイラストをBracketsへ直接貼る事もできます。
(画像はライブプレビューでブラウザでSVGを表示しています)

Dreamweaverでも同じ事ができます。エディタソフトへSVG貼り付けられるのはコーディングする時に便利だと思いました。

image

BracketsでSVGをドラッグ&ドロップしてコードを表示する方法 このブログは当初、iconmoonのwebフォント…




【2017年版】Webデザイナーの私が入れているBracketsのエクステンション紹介(主にHTML、CSS、SCSS)

私が入れているBracketsのエクステンションをまとめてみました。


SFtpUpload

ファイルを保存する毎に自動的にFTPにファイルをアップロードしてくれるエクステンション。

(1)プロジェクトファイル毎にFTPサーバー、アカウント情報を入力してセットアップします。

image

(2)設定後はファイル保存すると自動的にサーバーへアップロードされます。


手動でアップロードするにはファイル選択後に右クリックして「Upload via SFTP」をクリックするアップロードされます。

image

Emmet

ショートカットのスペニットで展開される定番コーディング補助ツール。 HTMLコーディングはほぼこれに頼ってます。


Adobe Edge Web Fonts

Brackets内でAdobe Edge Web Fontsが使えるようになります。

▼過去記事で使い方を説明しています。

簡単にWebフォントが無料で使えるAdobe Edge Web Fontsの使い方


Beautify

Shift + + lでソースコードを綺麗に整形してくれます。

▼自社ガイドラインに沿ったコーディングをするためにBeautifyを利用されているWeb制作会社さんもいるようです。

参考サイト

Brackets拡張機能「Beautify」を設定し、ガイドラインに沿ったコーディングを行う

こちらを参考に「brackets-beautify」ファイルの「default.jsbeautifyrc」を変更するとデフォルトの設定よりも綺麗にソースコードが整形されました。Beautifyで整形後に変な空白が空いてしまうのが気になる人は是非試してみてください。


Brackets Tools

Word To List(文章に

のタグを自動入力)、HTMLエンコード、HTMLデコード、同じ単語をハイライト(Highlight Word Selection)‥等。コーディングで役立つ機能がセットで入っているエクステンションです。

▼Brackets Toolsに関する過去記事

コーディング効率化にBrackets Toolsのエクステンション入れてみた

Brackets Toolsエクステンションのメモ(2)


Brackets Bookmarks

  1. ブックマークしたいソースの段落箇所にF4を押すとブックマークされます。
  2. F4を押すと(1)で指定したブックマーク箇所へジャンプします。(複数ブックマークがある場合は上から順に移動されます)

Brackets CSS Class Code hint

cssのclass名、ID名を入力補完してくれるエクステンション。 BootstrapなどのCSSフレームワークを使ったサイトで入力補完されるので便利です。


Brackets SASS

Bracket内でコンパイルできる。保存しなくてもリアルタイムでSCSS,SASSの変更がライブプレビューで反映されます。

デザイナーの場合はWebブラウザ上でデザイン確認する作業が大半なのでかなり助かります。


Brackets SASS Code Hints

SASS記法にコードの補完追加するエクステンション(SASS)。


CSSFier

HTMLからセレクタを作成(SCSS、CSS)マークアップ時点でHTMLに予めclass、id名を記述した後にCSS、SCSSへ直接コピペするだけで自動的にセレクタが展開されます。CSSをよく使うデザイナーから見れば便利です。


Brackets Snippets (by edc)

Braketsの中で自分でスペニットの作成ができます。HTML、CSS、JS、PHPのコードを予め登録しておくとショートカット入力後にスペニットでコードが展開されます。

Brackets使いのエンジニア・コーダー必携のエクステンションかと思います。



他にも入れてるエクステンションあるけど全部紹介しきれないので割愛します。

最近のTwitterでの反応から見てBrackets人気は徐々に高まってる雰囲気はあります。 DreamweaverからBracketsへ乗り換えをした会社や制作者も多いようです。

Dreamweaverは動作が重いし不要なUIや機能も多い気がするので私は会社からフリーランスと合わせて4年くらい使いましたが最後まで馴染めませんでした。

Bracketsの方がデザイナーから見ても使い易いエディタです。 デザイナーはライブプレビュー、レスポンシブプレビュー、SCSSのエクステンションでデザイン表示確認しやすいし。エンジニアはJS,PHPのエクステンション入れて効率化できるし。

コーディング用途に合わせて簡単にカスタマイズできる所が好きです。

【2017年版】Webデザイナーの私が入れているBracketsのエクステンション紹介(主にHTML、CSS、SCSS) …





Brackets Toolsエクステンションのメモ(2)

BracketsでBrackets Toolsというコーディングが捗りそうな便利なエクステンションを入れています。少しコーディング時に便利そうな機能を少しメモします。

下記のようにToolsをクリックし選択したテキストにWord To Listを選択すると自動的に<ul><li>タグが自動的に入力されます。

emmetだと文章が既に入ってる場合はタグを文章の間に入れなければ展開できなかったと思うので、こちらの方が速いのかなと思いました。


Tools→Word To List

image

他にもHTMLエンコード、HTMLデコード、同じ単語をハイライト(Highlight Word Selection)、便利な機能があります。


表示→Highlight Word Selection

image

■Bracketsに関する過去記事




▼参考になった記事

Bracketsの7つ道具的エクステンション Brackets Tools
http://qiita.com/assialiholic/items/7ee66c7097abae3c32ad

Brackets Toolsエクステンションのメモ(2) BracketsでBrackets…




レスポンシブWebサイトのプロトタイプ作成に便利な「Pingendo」が新しくなったので使ってみた(Bootstrap)

Pingendo4

https://pingendo.com/v4-beta/


PingendoというBootstrapサイトのモックアップ作成ツールがあった事を思い出してサイトへ行ってみたらバージョン4が出ていたので使ってみました。

以前よりもっと簡単な操作でモックアップHTMLが作れるようになりました。
サイトのモックアップツールとしてPingendoがいいと思う点は以下の機能です。

(1)Font-AwesomeのWebフォントが使える

image

(2)ボタンやテキストの色を右のメニューから変更できる($brand-primaryなどブランドカラーを選べる)

image

(3)コンテンツやテキストの上下の隙間(マージン、パディング)の調節が右のメニューから変更できる

image

(4)左のメニューから画像、スライド画像(JS)、地図、テーブル、Bootstrapで使用できるコンポーネントを選んでドラッグ&ドロップで設置できる

image

今受けてる案件のレスポンシブwebデザインのLPに使用しようとしましたが、前に書いたBootstrap3のコードはPingendo4で使えなかったので案件で使用するのは断念しました。

Bootstrap3で書いたコードをBootstrap4向けに変更しようと思ったら無駄にコーディング時間が取られると思いました。


私の場合は下記のPingendo3でHTMLのモックを作った方がいいと思いました。

https://pingendo.com/


案件ごとにゼロからオリジナルCSSを制作しようとするとデバイス表示確認とコーディングに時間がかかるので制作費のことを考えると現実的ではないと感じています。

私はBootstrapにないパーツをオリジナルCSS(SCSS)で追加してWebサイトのコーディングをして時短化を図っています。

Bootstrapでそのまま使えるデザインはそのままにして、変更が必要な部分だけ自分でCSSで作成するカスタマイズ的な手法です。

レスポンシブサイトの場合はPCとスマホで可変するという仕組みがWeb素人であるクライアントに伝わりにくいのでワイヤーフレーム作る段階でなるべくプロトタイプHTMLを見せた方がいいと考えています。

レスポンシブWebサイトのプロトタイプ作成に便利な「Pingendo」が新しくなったので使ってみた(Bootstrap) Pin…




ロリポップサーバーでWordPressを高速化する方法のまとめ

素材サイトをTumblrで作って公開していたのですが、WordPressの方がSEO対策も細かく自分で設定できるし記事のバックアップが簡単に取れるのでWordPressに移行しようと準備中です。

Tumblrに色々機能を求めるのならWordPressへ移行した方がスムーズに運営できると思いましたので。

私の場合は趣味のサイトなので格安ロリポップサーバーでも問題ないのですがPageSpeedInsightsのGoogleのサイトスピードチェックの結果が下記のように真っ赤な状態だったのでサイトの高速化を色々試してみました。 

image

▼私が試したのは以下の3つです

(1)キャッシュ系プラグインを適用する
「WP Super Cache」
「001 Prime Strategy Translate Accelerator」

(2)画像最適化系プラグインを適用する
「EWWW Image Optimizer」

(3).htaccessに画像,CSS,JSのキャッシュを設定する
WordPressサイト用の.htaccess例

https://dogmap.jp/2010/04/20/wordpress-htaccess/


サイト高速化で効果があったプラグインは(2)画像最適化系プラグインを適用する「EWWW Image Optimizer」でした。Webサイトの画像軽量化は忘れないようにしたいですね。

私はこのTumblrブログはあまり画像の軽量化ができていないので(JSとCSSはminify化して軽量化しています)重さが気になっています。
画像を延滞して表示させる「BJ Lazy Load」試してみましたが、逆に少しパフォーマンス落ちた感じだったので外しました。

下記のようにPageSpeedInsightsで真っ赤が黄色になりました。 

image

GTmetrixでもサイトスピードのチェックしてみました。 キャッシュプラグインもそこそこ効いていますが、プラグインより効果があったのは(3).htaccessに画像,CSS,JSのキャッシュを設定するのようでした。 

image

格安サーバーより月1000円以上のサーバーへ契約した方が高速化できるとは思いますが趣味程度のサイトだと格安のロリポサーバーでも大丈夫かなと思います。自分自身でサイトのバックアップできて復旧できる知識があれば‥。

サイトのアドセンス広告の売り上げが軌道に乗ってきたら月1000円以上のサーバーへ引っ越そうとは思っています。



▼参考記事
重いと噂のロリポップで効果があったWordPress高速化プラグイン 6選+α
http://livelognet.com/lolipop-wordpress-plugin/#WP_Hyper_Response

ロリポップサーバーでWordPressを高速化する方法のまとめ 素材サイトをTumblrで作って公開していたのですが、WordP…





コーディング効率化にBrackets Toolsのエクステンション入れてみた

■Brackets Tools
https://github.com/yasinkuyu/brackets-tools

コーディング効率化にBrackets Toolsというエクステンションを入れました。

ブログのpreタグ内の>(黄色い枠で囲った部分)を書きたい時にも便利でした。

コーディング効率化にBrackets Toolsのエクステンション入れてみた HTMLエンコード画像

最近ショートカットの⌘Dで同じ行をコピーできたりすることを今更知りました。

同じ行の削除はshift+⌘Dでした。

コーディング効率化にBrackets Toolsのエクステンション入れてみた 同じ行の削除

基本的なショートカットを覚えてるか覚えてないかでコーディング作業の効率は違ってくると思います。
私のように時々マウスドラッグでコピペや削除なんてやってたら無駄に時間を食うのでエディタ機能を活かせてないのでダメですね。

今日からはブログ(Tumblr)の画面からではHTMLが入力しにくいのでエディタで書いてコピペして更新しようと思います。

EmmetでHTMLコードを後から文章に挟めるのでエディタでブログ文章書く方が楽な感じでした。


▼参考サイト

http://qiita.com/assialiholic/items/7ee66c7097abae3c32ad

コーディング効率化にBrackets Toolsのエクステンション入れてみた ■Brackets…




簡単に背景画像を全画面表示にしてくれるjQueryプラグインBackstretch【MEMO】

Backstretchとはコード数行で背景画像のフルスクリーン表示が手軽にできるjQueryプラグインです。

(1)Backstretchをこちらのサイトからダウンロードします。

http://srobbin.com/jquery-plugins/backstretch/

(2)jQuery本体とBackstretchのJSを読み込みます。


(3)基本的な全画面表示の場合のJSコードは下記のように記述します。


背景写真をフェードさせながらスライドさせたい場合は下記のように記述します。



▼参考サイト

http://blog.nest-online.jp/15521

http://www.webshiki.com/javascript/134.html

簡単に背景画像を全画面表示にしてくれるjQueryプラグインBackstretch【MEMO】Backstretchとはコード数行…




Adobe Animate CCで作成したバナーをHTMLに設置する方法

Animate CCで書き出したJSアニメをHTMLに設置する手順を簡単に紹介します。

(1)Animate CCのHTML5 canvasで書き出されたHTMLのhead内のJavaScriptのコード部分を選択して 設置したいサイトのHTMLへコピペします。

image

(2)body要素のonloadのコードとcanvasのコードをコピーして設置したいHTMLにコピペします。

image

(3)canvasにCSSでmax-width:100%を指定してレスポンシブの幅を調整します。 サイトに応じてcanvasのCSSは調整する必要があります。

image

※フォルダ階層は赤丸のimajesフォルダ、htmlファイル、アニメーションのJPG、Animate CCのJSがないとアニメーションは動きません。 

image

Adobe Animate CCで作成したバナーをHTMLに設置する方法 Animate…





拡張機能「Brackets Snippets」でよく使うコードを登録してコーディングの作業効率アップ!【MEMO】

Brackets Snippets (by edc)を拡張機能マネージャーから検索してインストールします。

image

(1)Brackets Snippets を起動するには豆電球のアイコンをクリックして画面を開き、新規にスペニット登録するためにNew+をクリックします。

image

(2)Triggerに適当にスペニットを呼び出すショートカットキーを登録します。Descriptionはコード内容を記載、Scopeで言語を選びます。


image

(3)Saveして保存した後にスペニットの頭文字を入力すると登録したスペニットが候補として出てきます。候補が出てきたところでEnterを押すと登録したコードが展開されます。

image

使い方によってはEmmetよりコード書くのが速くなりそうな気がします。アルファベット1文字で候補が出てきてコードが展開されるので。

私はせいぜいBootstrapでよく使うコードを入力して保存しようかなと思います。他はレスポンシブのランディングページでよく使うCSS、HTMLの登録を暇なときにやろうと思います。

HTML、Sass、CSS、JS様々な言語に対応しているので幅広いコーディング作業に便利そうです。

▼より詳しく「Brackets Snippets」の使い方について書かれているサイト

http://www.nxworld.net/services-resource/brackets-extension-brackets-snippets-by-edc.html

http://qiita.com/assialiholic/items/c6d12a829f87f8d5fdab

拡張機能「Brackets…





BracketsでSassをコンパイルしてライブプレビューする方法【エクステンション・拡張機能】

最近までBracketsでSASSを使う時にはPrepros(GUIコンパイラー)を使っていました。

Preprosはコンパイルされるまでのタイムラグが数秒かかかる上、Sassを修正するたびに保存(⌘+S)をしないとライブプレビューに反映されません。

結果的にCSSコーディングに無駄な時間がかかっていると気づきました。


そこでコーディングを中断させることなくリアルタイムに近い状態でBrackets内でSassをコンパイルしてくれるエクステンションがないか調べてみました。

  • Brackets SASS ( Bracket内でコンパイルする)
  • Brackets SASS Code Hints ( SASS記法にコードの補完追加(SASS))
  • CSSFier (HTMLからセレクタを作成(SCSS))

Brackets SASSをダウンロード後にSASSを編集すると下記のブルーの四角アイコンがクルクル回りだしてコンパイルが始まります。 ライブプレビューした状態で保存をしなくてもコンパイルされたCSSが反映されます。

image

Brackets内で自動でSASSをコンパイルしてくれる方が時間的に速いし、これでGUIコンパイラーを使う必要がなくなりました。

CSSFierはHTMLのclassをSassファイルにコピペすると自動でセレクタを作ってくれるエクステンションです。 非常に便利で前から使っていました。

image

昨年2015年1月からBrackets使っています。

軽くて使いやすいエディタなので気に入っています。

Dreamweaverだと長時間のコーディングはしんどいですが、Bracketsだと3〜5時間ぶっ通しにコーディングしても苦にならなかったりします。

最近はMacのクリーンインストールを1年以上やっていなかったのでBracketsのライブプレビューも正常に動作しなかったり、動作も非常に遅かったりしました。

クリーンインストール終了後はサクサクと快適に動くようになりました。マメにMacのメンテナンスはした方がいいなと思いました。



★その他、おまけ

バージョン1.7から[control]+[tab]で最近使用したファイルを選択できる新機能が加わりました。 ショートカットでファイル間の行き来がしやすいのは助かります。

image

■BracketsのSASSに関連する参考記事サイト

https://blogs.adobe.com/creativestation/web-practical-sass-01-dev-environment

http://qiita.com/assialiholic/items/86b2b20fa9d789d65d26

BracketsでSassをコンパイルしてライブプレビューする方法【エクステンション・拡張機能】 最近までBracketsでSA…