bata's log

フロントエンド系のTipsとかメモ

EmmetでHTML5の閉じタグが削除されてしまう問題

SublimeTextでHTMLコーディングをする場合、(個人的な見解として)Emmetは必須パッケージですが、HTML5で(control + e)した場合に<img />や<br />の閉じタグのスラッシュを削除してしまいます。 <img src="" alt="" /> <img src="" alt=""> html5は閉じタグを入れなくてもOKなのですが、閉じタグを入れる派の…

nodebrewでバージョン管理してる場合にSublimeText3でCSScombが動かない問題

SublimeTextにCSScombというめちゃくちゃ便利なパッケージがあります。CSScombはNode.jsで動いているので、使うときはNode.jsをインストールする必要があります。 CSScomb JS を Sublime Text 3 で使ってみる | Web Design Leaves ※記事では「CSScomb js」と…

スクロールすると表示されるナビゲーション

スクロール型のナビゲーションがあるサイトで、一定の位置までスクロールするとナビゲーションが固定で出てくるサイトがあります。 こういうの↓ http://gion-renge.jp/ これが結構よく使う演出なので使いまわせるように書いてみました。 function NavControl…

ユーザーエージェントを判定する

ユーザーエージェントを判定する簡単なユーティリティを作ってみた。 function DecideUA(){ this.name = window.navigator.userAgent.toLowerCase(); } DecideUA.prototype = { match: function(str){ return (this.name.indexOf(str) !== -1); } } 使い方 m…

JavaScriptでクラス継承みたいなものをやってみる

JavaScriptにはそもそもクラスなんてないし~(ry、とかプロトタイプチェーンが~(ryとかの話はひとまずスルーして、実際に使用出来そうなクラス継承を考えてみた。 クラスを継承する クラスの継承は.call()関数や.apply関数を使用します。 function A(n){ …

gitでよく使うけどよく忘れる便利なコマンド

git

ローカルブランチを作成しリモートをクローンする $ git checkout -b ローカルブランチ名 origin/リモートブランチ名 ローカルブランチの作成、リモートブランチのクローン、ブランチへの切り替えを一度にできます。 ブランチを削除 # ローカルブランチを削…

gitを使うときに便利なconfigファイル設定

git

よく使うコマンドをショートカットにする どのコマンドをショートカットにするかは好みもありますが、よく使うコマンドを設定すると作業効率がアップします。 ホームディレクトリの.gitconfigファイルを編集するか、git config --globalコマンドで設定できま…

要素の位置を取得する

縦長スクロール型のページでナビゲーションに現在位置を表示したり、ある特定の位置までスクロールしたらイベントが発火したりするコンテンツを作る場合、該当の要素の位置を取得するという工程が必要になります。 この部分だけを切り出してユーティリティ的…

JavaScriptの設計 ~ ModelとViewを考えながら書いてみる

フォームにテキストを入力すると配列にデータをプッシュするというWEBアプリでよくありそうな処理です。 色々やると難しいので、Modelはデータを管理してViewはDOMの操作を管理するという単純なルールのみ。 さらにデータをDOMに書き出すViewを作ると簡単なM…

画像ロールオーバーをオブジェクト指向的な書き方で・・・その2

基本的な機能を使いまわして、通常のロールオーバーとフェード付きを作ってみた。 クローン画像の生成のあたりはもう少し改善できそうな気がする。 kawabataryo/imgRollover kawabataryo/imgRollover · GitHub

画像ロールオーバーをオブジェクト指向的な書き方で実装すると…

大昔のこの記事のURL元がなくなってて、どんなコードだったのか興味があったので書いてみた。 cl.pocari.org - ロールオーバーのオブジェクト指向的実装 まあこの時代なので「<img onMouseOver=''>とかでやってて、それをJSのみで実装して使いやすくしよう」、みたいな内容だった…

GruntでCSSファイルを結合・圧縮する

いろんな理由でSassが使えない案件があった場合でも、機能毎にファイルを分割管理したいので書いてみた。 ググったけどCSSファイルの結合に関してはあまり該当する記事がなかったけど需要ないの? まあ、JSファイルを結合する時と同じ要領なので誰もわざわざ…

CSS3で立体を作る

CSS3のtransformをひと通りやりたかったので作ってみた。 表示例 文章でかなり説明しづらいので、最初に動いているものを… 止まっているとよくわからないので回してみました。 立体を表示する画面に設定するプロパティ perspective 奥行きを設定するプロパテ…

Jekyllの記事リストの表示件数を設定する方法

Jekyllでポスト記事をリスト表示をする場合はこのように書きます。 <ul> {% for post in site.posts %} <li> <a href="/blog_jekyll/_site{{ post.url }}">{{ post.title }}</a> </li> {% endfor %} </ul> ただこれだと記事があるだけ表示してしまうので表示件数をを制限したいのですが、これに関する記事がどれもTOPページの表…

Jekyllで「前の記事」「次の記事」を簡単に表示する方法

ブログとかによくある記事送りのページネーションを簡単に実装する方法。 page.previous ,page.nextでそれぞれ前の記事、次の記事に関する情報を取得できます。 {% if page.previous %} #前の記事がある場合この中身が表示される {% endif %} そしてページネ…

GruntでSassのビルドとjsファイルの結合・圧縮を自動化

JSファイルの結合と圧縮を自動化したくて色々調べていたのですが、やはりGruntが一番便利だということで導入してみたました。 結論からいうと、もっと早く導入すればよかった。 Gruntの導入 導入部分は下記を参考に。 Windowsの場合 http://webdrawer.net/ja…

CSS3でパラパラアニメ

スプライト画像を利用したCSS3を使ったパラパラアニメの作り方。 HTML <div class="anime"><img src="[画像のURL]" alt=""></div> SCSS .anime{ width: 160px; height: 300px; overflow: hidden; margin: 100px; img{ margin-top: 0; -webkit-animation-name: anime; -webkit-animation-duration: 1.0s; -webkit-anim…

オブジェクトリテラルを入れ子にした場合のthisの扱いについて

下記のような書き方は機能を切り分けたりする時によくやると思いますが、オブジェクトリテラルが入れ子になった場合、入れ子のなかでthisの扱いが変わってしまいます。 var MyApp = { init: function(){ this.getFugafuga(); //fugafuga! }, util: { init: f…

JavaScript(jQuery)で画像のサイズを取得する際のエラー

ドはまりしたのでメモ。 .appendとかで生成した<img />の場合、widthやheightを指定していない事がありますが、これが画像の幅や高さを取得する際にハマる原因になったりします。 高さが取得できない!

JSONからデータを取得して配列にフィルターをかける

WEBアプリ開発でJSONデータを扱うことになったのでメモ。 実際に作り始めると色々な機能追加がありそうなので、対応出来るような書き方を目指してみた。 JavaScript (function(window,namespace,$){ function _Item(dataFilter,i,$_list){ this.member_id = …

CSS3 アニメーションで要素を表示・非表示

iOS用のWEBアプリ制作のためのメモ。 iOS専用でCSS3アニメーションが使用できるので、アニメーション部分をCSS3で作ってJavaScriptでトリガーを制御します。 HTML .onが使いたいのでjQueryを読み込んでおく。 <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="description" content="" /> <meta name="keywords" content="" /> </meta></meta></meta></head></html>

PHPでRSSを取得しJavaScriptで表示する

RSSを取得してサイト内に表示する時、普通のリスト表示くらいなら全部PHPでやってしまえば良いのですが、インタラクティブな表現とかをする時はJavaScriptで書き出したほうが利用しやすいです。 PHP RSSを取得して、json_encode を使ってPHPの配列をJSON形…

jQueryなしで要素を取得してイベントを加える

普通に仕事してると、jQueryなしの環境ってほとんど無いし、そもそも効率がわるい。 しかも、自分のスタートがJavaScript == jQueryみたいな環境だったので、実際にjQueryなしでJavaScriptを書く機会が殆どなかった。 その後一から勉強しなおしたので、一応…

Sassのビルドにバッチファイルを利用する

Sassをビルドする時に、コマンドラインのSass --watchで監視してますが、最初にいちいちコマンドを打つのが面倒なので、バッチファイルで実行します。 Windowsの場合は簡単だったのですが、MACではまった事があったので詳細をメモ。 Windowsの場合 build.bat…

XAMPP for Mac の VirtualHost設定で403エラー

Apache2.4以降でバーチャルホストを設定するときにハマりまくったのでメモ。 解決方法は下記を参考に <VirtualHost *:80> DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/" ServerName localhost ErrorLog "logs/error_log" CustomLog "logs/access_log" common <Directory "/Applications/XAMPP/xamppfiles/htdocs/" > AddDef</directory></virtualhost>…

アニメーション用のタイムライン管理

Javascriptで何場面もあるようアニメーションを実装する場合に、シーンごとにアクションと発火点をタイムラインのように管理できたらよいのかなと思って書いてみた。 (function(window,namespace,$){ window[namespace] = { play: function(){ var len = thi…

フェード付きの画像ロールオーバーを作ってみた

画像のロールオーバーでフェードエフェクトがついたものを書いてみた。 ロールオーバー用のクローン画像を生成して元画像の後ろに配置して、元画像をフェードすることで効果を出します。 汎用性が出るように画像と親要素に直接CSSが付加されるようにしていま…

オブジェクト指向の書き方

オブジェクト指向の書き方を練習するために前に作ったやつ。 HTML <div id="wrap"></div> JavaScript (function($){ var n = 99; var wrap = $('#wrap'); var Box = function(i,selector, x, time){ this.i = i; this.x = i*10; this.selector = selector; this.time = time; this…

画像を使わずに矢印を作る

スマートフォンサイトでよくある、右側に矢印があるリストを画像を使わずに作った。 HTML <ul class="list"> <li><a href="">リスト01</a></li> <li><a href="">リスト02</a></li> <li><a href="">リスト03</a></li> <li><a href="">リスト04</a></li> <li><a href="">リスト05</a></li> </ul> SCSS .list{ li{ list-style: none; font-size: 12px; a{ position: relative; display…

即時関数の引数を使って名前空間を作る

即時関数の引数を使った名前空間の作り方を教えてもらったのでメモ。 (function(window, namespace){ window[namespace] = { fuga : function(){ document.write('Hello!'); } }; })(this, 'Hoge'); Hoge.fuga(); グローバルオブジェクトにHogeを追加して名…

イベント内でのthisについて

画像のロールオーバー var Rollover = (function(){ var _func = { init: function(el,suffix){ this.event(el,suffix); }, event: function(el,suffix){ var that = this; $(el).on({ mouseover: function(){ var self = this; self.setAttribute('src',tha…

デザインパターン:The Module Pattern

即時関数を使ってプライベートなスコープを実現するモジュールパターン。 var Sample = (function(){ var _name = 'Ryo Kawabata'; var _age = 37; function _sayHello(){ console.log('Hello, my name is ' + _name); } return{ sayHello: _sayHello }; })(…

jQueryプラグインのテンプレート

jQueryプラグインを作成する時の基本的な形をメモ。 ;(function($){ //option var option = { option01: 'value01', option02: 'value02' } $.fn.pluginName = function(params){ params = $.extend(option,params); //core return this.each(function(){ })…

Markdown記法のテスト

はてなブログをMarkdown記法で試してみた。 結構使いやすい。 段落と改行がなれるまではよく間違えそう。 見出し1 見出し2 見出し3 リスト リスト リスト 引用 サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテ…