今まで新規ページを作成する際、以下の手順を踏んでいました。 作るページのディレクトリを作成 ローカルにあるディレクトリ(gulpfile.js, package.json置き場)からコピペ 環境構築 これだと今のPCで作業する分にはいいかもしれないけど、別のPCで作業すると…

今までgulp3.8.6を使ってたんですが、いつの間にか3.8.7が出てたんですね。 ローカルのディレクトリにインストールした際に気づきました。 グローバルとローカルでバージョンが違うのは気分的に良くないのでバージョンを上げてみました。 その際のメモをまと…

ImageOptimで最適化した画像をガラケー用ページで使用すると、何故か表示できない現象に遭遇しました。 ことの発端は以下のツイート ImageOptimで最適化したjpgがE10Kで表示されなかったことを報告いたします。もしかたしたらAUのガラケー全部なのかな...？—…

最近話題になっていますね、Web Starter Kit。 タスクランナーにGulpを使っているとのことで、早速中身を確認してみました。 その中で使用されているプラグインについてまとめました。 以下がgulpfile.js内に記述されているプラグイン一覧です。 browser-syn…

Sublime TextにLiveReloadというパッケージを入れた状態で grunt-contrib-watchを実行すると下記のようなエラーが出ます。 Running "watch" task Waiting... Fatal error: Port 35729 is already in use by another process. 調べたところ、LiveReloadパッケ…

先日発売された『Web製作者のためのCSS設計の教科書 モダンWeb設計に欠かせない「修正しやすいCSS」の設計手法』を読みました。 CSSは簡単に書ける分、とても簡単に崩壊しやすい言語であるか。 そういったCSSを「効率よく」、「メンテナンスしやすく」、「拡…

昨日公開したCloseCommentTagをPackage Controlへ登録してもらおうと依頼してみました。 以前から自作したパッケージを登録してみたかったのと、Pull Requestの初挑戦も兼ねてです。 その時の内容をメモします。 Package Control ChannnelリポジトリをForkす…

普段HTMLのコーディングをする際、 コードの見通しを良くするために毎回以下のように閉じタグの前にコメントをいれるようにしています。 <div id="foo" class="bar"> 〜 </div> このコメントはEmmetやZen-codingで"|c"を入力することで入れることが出来るのですが、閉じタグの後にしか出力さ…

渋弁.comというサービスを知っていますか？ 2014年3月に始まったお弁当のサービスです。 Webから注文することが出来、注文してから最短20分で配達してくれます。 「ダイエット中でも食べられる！」というだけあってヘルシーなお弁当が並んでいます。 会社の…

Sublime Text3(以下ST3)ではPackage ControlからLiveReloadをインストールしても使えません。 何故ならそのLiveReloadはST2用のものだからです。 ST3に対応しているLiveReloadはLiveReloadのGithubページから次期バージョンのdev版を手動インストールする必…

Sublime Text3で「Gist」というパッケージの組み合わせの話です。 Sublime Text3の設定で auto_indent: true にした状態で 「Insert Gist」というコマンドを使ってスニペットを挿入するとインデントが崩れるバグがあるみたいです。 Insert Gist + auto_inden…

社内勉強会でSubime Textの発表をやってみました。 その時のメモを載せてみます。 対象は Sublime Textを使ってない人 Sass, Lessなどのメタ言語は使用しない人 プログラミングはあまりしない人 あたり。 初心者の人にDw以外にもいいエディタがあるんだよ、…

今流行ってますね。 僕もiOS版のアプリが出た次の日あたりからはじめました。 毎日コツコツとポータルをハックしてはアイテムを集め、時にはControl Fieldを作ったりしています。 その甲斐あってか昨日やっとLv5まで到達しました。 このLvまでくるとポータル…

前回の記事で、Gulpのインストールまで出来ました。 今回はSassのファイルを監視し、変更されたらCSSにコンパイルするところまで書きます。 ディレクトリ構成 今回、以下の様なディレクトリ構成になっています / ├― gulpfile.js ├― package.json ├― node_mod…

最近gulpという単語をよく目にするようになりました。 gulpとは何ぞや？と思い調べてみると、Gruntと同じようなタスクランナーらしいです。 Gruntよりタスクが書きやすい/見やすいとこと。 とりあえず使ってみようということで導入してみました。 その際のメ…

先日、社内の勉強会でLT大会がありました。 以前からLTに興味があったので、思い切って発表者として登壇してみました。 色々と考えが甘く、ボロボロだったので記念に記録しときます。 スライド作りが大変 これですね。 LTって5分じゃないですか。 だからスラ…

「Package Control: List Package」でインストールしているパッケージの一覧を見ることが出来ますが、一覧をテキストで出力したく、何か方法は無いかと調べました。 調べてみると、同じことを書いている方がいらっしゃいました。 本当にありがたいです...！ …

ソーシャルボタンをオリジナルの画像にしたい、ってことありますよね。 そのときにしなければいけないのが、対象ページのURLやタイトルのURLエンコード。 今までは URLエンコードをしてくれるツールやWebサービスを開いて エンコードしたい文字列をペースト…

ページを見ているとたまにSafariのURLバーの色が白ではないサイトがあり、どうやってるんだろうと思い調べました。 bodyの背景色を変えるだけだった CSSを見たらbodyの色を変更しているだけでした。 これだけで出来るんですね。 ただ指定した色になるわけで…

Sublime Textのプラグイン作りがきっかけで、Pythonの勉強を始めました。 書籍を片手に写経をする日々。 Python面白いよPython 書籍のコードを眺めていると、1行目に必ず #!/usr/bin/env python という記述が。 おまじないだと思ってスルーしていましたが、…

案件が落ち着いてきたので今までちゃんと勉強してこなかったSassを勉強しようと『Web製作者のためのSassの教科書』を読み始めました。 変数の書き方など初歩的なことから案件で使えるようなコードまで載ってて素晴らしいですね。 もっと早く読めばよかった。…

ガラケー用ページを制作している時に、半角カタカナを一々入力するのが面倒で面倒で...。 練習も兼ねて「toggleKatakana」というプラグインを作成しました。 toggleKatakana 使い方 HTMLの文書中でコマンドパレットを開き toggleKatakana: convert to Single…

Sublime Text(以下ST)2で愛用していたプラグインの「Hayaku」がついにST3ネイティブになってしまいました。 それを受け、やっと重い腰を上げてST3に移行してみましたが、タイトルの通りの部分でハマったのでメモ。 因みに、次に説明するのはMacのみです。 Wi…

今更感が凄いのですが、案件で必要そうだったので勉強がてら作りました。 このプラグインを使用すると特定の要素の背景またはページ全体の背景にYoutubeの動画を流すことが可能になります。 デモページを作ったのでご覧ください。 デモページ ページ全体の背…

去年辺りから増えてきてますよね、1ページで完結するサイト。 僕もシングルページの案件を色々と携わっているのですが、ちゃんとした仕組みを調べたことはなく...。 流石にマズイかな...と思い、勉強がてら作りました。 デモページを作成しましたので、まず…

最近重い腰を上げてGitを使い始めました。 「開発効率をUPする Git逆引き入門」を片手にコマンドをポチポチ打っています。 やはりバージョン管理ができるといいですね。 プラグイン作りがとてもやりやすくなりました。 今日はローカルで作成したブランチをリ…

ティッカーっぽく画像が次々に流れるスライダーが案件に必要になり、思い切って作ってみました。 折角なので公開しようかと思います。 コード プラグインは以下の場所においています。 見て頂けますと幸いです。 jquery-imageslider.js デモ デモ用のページ…

前回に続きまたAndroidの問題です。 スマホサイト案件で画面いっぱいの固定配置の要素を敷かなけれいかず、以下のようにコードを書きました。 HTML <div class="mod-posf"></div> <div class="mod-page"> . . . </div> CSS .mod-posf { background: rgba(0, 0, 0, 0.6); height: 100%; position: fixed; width: 100%; …

Android(4.x)端末で position: fixed; した画像がぼやけてしまいます。 百聞は一件に如かずということで、次の画像を御覧ください。 枠線で囲んでいる部分は position: fixed; にした要素です。 比べてみると画像がぼやけて見えるのがわかるかと思います。 …

タイトルのとおりです。 以前からレイアウトが気になっていたので思い切って変えてみました。 人生2度目のデザインですｗ レイアウトを考えるにあたって、以下のツールやスライドには大変お世話になりました。 HUE360 Font Awesome Google Fonts 連休中にな…