Quantcast
Channel: 69log » tec
Browsing all 45 articles
Browse latest View live

CSP(content security policy)をためしてみる

CSP(Content Security Policy)を設定することでXSSやクリックジャッキング、パケットキャプチャなどの攻撃を軽減できるということなので、 どんなものなのか試してみた。 CSPを有効にすると、コンテンツの提供元を制限することで、制作者がリストに登録していない提供元からのコンテンツを読込ませないようにできます。 このため悪意のあるコードを実行させないなどの対策がきます。...

View Article



Rails3.2.xのAssets precompile を最適化してスピードアップする

Rails3.2.x で開発時にassets precompileに時間を要していたので、なんとか早くすべく調べていたら、stackoverflowに以下の記述があったので実際に試してみたらスピードアップしたので忘れないうちまとめてみた。 Capistranoを利用している場合は、Capistranoのビルトインタスクである ‘deploy/assets’ を使用する。...

View Article

Rails3.x開発時にIEで困らないためのメモ

Railsで開発するときにUIの実装時にIE8あたりで困ることないように備忘録としてまとめておく。 IE9まではファイルの読み込み限界値に気をつける。 IEだけなぜかCSSが適用されないとき、IEの以下の仕様が原因。 IE9までは 1スタイルシートにルールは4095まで 1スタイルシートに @importは31個まで @importの入れ子は4階層まで ちなみにIE10からは、...

View Article

fontcustomで、アイコンフォントを作ってみる

fontcustomを使って、サクッとアイコンフォントができました。 これは簡単でいいですね、サービス開発するときにどうしてもアイコンフォンとがしっくりないときにカスタムで作成できますね。 手順は、fontcustomのページ見ればわかる感じなんですが、 とりあえずアイコンのsvgデータが必要です。 brew install fontforge eot-utils ttfautohint gem...

View Article

Image may be NSFW.
Clik here to view.

StyleDoccoでstyleguideを作成

フロントエンドの開発で業務を引き継ぐと面倒なのがスタイルシートの仕様の把握です。 スタイルガイドがあるとメンテナンスやアップデートも非常に行いやすいのですが、スタイルガイドを作成するのは結構面倒。 そんなこんなでcssのコメントで対応してたが、そろそろキチンとしよう思い、styleguide document generatorを検討してみた。 styleguide document...

View Article


Image may be NSFW.
Clik here to view.

KSS(Knyle Style Sheets)でstyleguideを作成

前回はStyleDoccoを試したので、もう一つのKSS(Knyle Style Sheets)も試してみた。 KSSについて KSSはTomDocをモデルに開発された stlyeguide generatorらしい。 A better future with KSS をみればどんなものか把握できそう。...

View Article

Image may be NSFW.
Clik here to view.

GruntでJasmineを使ったHeadlessなユニットテスト

GruntではHeadlessなユニットテストを行うための Qunit があります。しかし、個人的にはRSpec風に記述できる Jasmine の方が読みやすいので、Jasmineでのユニットテスト環境を構築してみました。 まず、Grunt Jasmine runner をインストール $ cd /your-project $ npm install grunt $ npm install...

View Article

phpenv + php-build + composer で開発環境作ってみた

以前、php勉強会で最近のphpの開発環境も簡単に構築できるとかという話を聞いていたので、調べながらちょっと開発環境を作ってみた。 Apache install 自分のmac(Mac10.8)ではあらかじめApacheは入っているのですが、せっかくなのでApache installから。 $ brew tap Homebrew/dupes $ brew install httpd...

View Article


sublime text2 でBuild(コンパイル)環境に関するメモ

個人的メモ。エディターの設定ファイルを誤操作してしまって。 再度構築していたんですが、どうやるんだっけってのをメモしておく。 Sublime Text2でcoffeeスクリプトとかをコンパイルできるんですが、パッケージインストーラーで入れただけだとエラーになっていたので調べてみた。 ちなみに今回はsublime-coffee-compileを使いたかったんです。 たとえばcoffee...

View Article


Backbone.jsのイベントを管理してゾンビviewを回避する

Backbone.jsのイベントの管理についての個人的なメモ。 イベントの管理 画面遷移しないアプリなどでは、Backbone.jsではviewオブジェクトにbindしたイベントを自前管理することが重要になる。 viewオブジェクトはそれぞれが独立しつつも、相互バインドしあう関係であることが理想的。...

View Article

Sass v3.3, v4.0 での変更点についてメモ

Sass3.3 がそろそろリリースっぽいので、追加機能・変更点についてうまくまとまった記事があったので、学んでみた。 ちなみに、変更点はこちら 実際に動作を確認するにはpreバージョンのsassをインストールします。 gem install sass --pre sass --watch source_dir:output_dir で確認できます。 &セレクタに関連する構文の改善...

View Article

WordPressのマルチサイト全体で検索できるようにする

WordPressでマルチサイト化した場合、マルチサイト全体から該当文字列を含む投稿を取得する機能がなかった用なので関数を作成した。 まずは、検索キーワードを取得するためにsearch.phpに // 検索クエリを取得 $search_result = get_search_query(); // マルチサイト内を検索 $search_results =...

View Article

Sublime Text 3 でPackage Controlを使えるようにする

Sublime Text 3に乗り換えたけど、Pacakge Controlが使えなかったので、調べてみた。 どうも、Sublime Text 3では Pacakge ControlにはSSL認証が必要になったらしく、そのままでは.sublime-packageを展開できないらしい。 そこでgitリポジトリから直接cloneしてpython3ブランチを使用するみたい。 cd Packages/...

View Article


homebrewでMysql5.6をインストール

個人てきなメモ。 おかしいなぁとおもったら、 $ unset TMPDIR を実行してなかったらしい。

View Article

RailsでのJavaScriptのテストにteaspoonを使ってみた

Rails + BackboneのプロジェクトでのJavaScriptのテストに、今まではjasminericeなどを試したことはあるけど、もっと便利なツールがないか探してみた。 候補として出てきたのが jasmine-rails (Ruby Gem) konacha (Ruby Gem) teaspoon (Ruby Gem) karma (Node Npm) bunyip (Node Npm)...

View Article


grunt-watchで監視対象ファイルの中で変更があったファイルを取得する

grunt-contrib-watchで監視しているファイルのなかで変更があったファイルのみを取得して、別の処理を行いたかったのでgrunt-contrib-watchをちょっと参考にしてやってみたときのメモ。 CoffeeScriptsを監視して、変更されたファイルをgrunt.logに吐いてみた。 grunt.event.on(‘watch’, callback)...

View Article

JavaScriptベースのCSS preprocessorであるAbsurdJS を試してみる

JavaScriptやJSONでCSSを書ける、というよりもCSS Preprocessorに近い感じのJSライブラリ AbsurdJS を試してみた。 AbsurdJSはサーバー、クライアントの両方で使用できる。 ビルドツールとしてGrunt-absurdが提供されているのでこれを使って試してみる。 Gruntの設定する。以下のようにした。...

View Article


Image may be NSFW.
Clik here to view.

Chrome DevToolsとSourcemapを使ってSassやCoffeeScriptをブラウザで編集

いままで普通に使っていたけど、知らないという方から質問を受けたので、再確認も含めてざっくりまとめ。 ChromeのDevToolsを活用してブラウザでの開発環境が整ってきている。SassやCoffeeScriptの様なPreprocessorもブラウザで編集、変換、再読込みを自動でできる。 まず、SassはSorcemap対応の3.3系を利用。 $ gem install sass --pre...

View Article

browser-syncを使ったクロスブラウザ同期を試してみた

フロントエンド開発時にファイルの変更と同時にブラウザをリロードするlivereloadは便利ですが、Browser ExtensionsにIEがサポートされてなかったりするので残念。 そこでbrowser-syncを使って、livereloadと同じようにブラウザ同期を行えるっぽいので試した。 browser-syncは スクロールをブラウザ間で同期 フォームの入力をブラウザ間で同期...

View Article

Sass3.3 追加されたデータ型: Map を見てみた

Sass3.3 changelog #SassScript Maps にあるようにすでに追加されている。 Mapsという新しいデータ型は、Hashや連想配列のようにデータを扱えます。これまではlist形式でなんとか対応することなどもしていたので、便利になりました。 Mapのデータは $map: ( key1: value1, key2: value2, key3: value3, child: (...

View Article
Browsing all 45 articles
Browse latest View live




Latest Images