2014-01-01から1年間の記事一覧
会社のパソコンでOS X Mavericksを使うことになったけど、Photoshop CS6を立ち上げるとショートカットキーが使えないという事件が(´･Д･)」 調べて、解決方法を見つけた。 1. Photoshopを初期化する command + option + shiftを押しながらPhotoshopを立ち上げ…
1. function 命令で定義する 関数を直接定義する。 2. Functionコンストラクタ経由で定義する 「Functionコンストラクタでは、引数や関数本体を文字列として定義できる」というメリットがあるが、それ以外で特にFunctionコンストラクタ経由で定義するメリッ…
イベントハンドラの代わりにイベントリスナーを使うでも書いた通り、イベントリスナはIEとIE以外のブラウザで書き方が異なる。 IE 要素ノード.attachEvent(イベント名, イベントハンドラ) IE以外 要素ノード.addEventListner(イベント名, イベントハンドラ, …
イベントハンドラをHTMLから分離して記述するという記事で書いた通り、 イベントハンドラの問題点として、同一の要素、同一のイベントに対して、複数のイベントハンドラをセットすることができないことが挙げられる。 そこでイベントリスナーを使う。 イベン…
イベントハンドラとは？ PC上で「ボタンをクリックした」、「フォームを送信した」などのイベントが起きた時に、JavaScriptでそのイベントに対して行う処理のこと。 HTML内にイベントハンドラを記述するとなると、以下の様な記述の仕方がある。 HTMLから分離…
Gruntを使ってcompassの自動ビルドのやり方をまとめてみた。 Gruntのインストールの仕方はこちら 1. compassの初期設定をする compass createする srcというフォルダを作成して、src配下でcompass createする。 $ mkdir src $ cd src $ compass create direc…
Gruntをインストールして、使ってみたので手順をメモしておきます。 1. Node.jsをインストールする 本サイトからインストールする。 http://nodejs.org/ $ node -v v0.10.29 これでnmpコマンドが使えるようになったので、NPMに登録されているモジュールをイ…
jQuery UIを使って要素をドラッグ移動させることはよくあったけど、 jQuery UIを使わないで実装する機会があったので、まとめてみた。
また更新をさぼっていた... 「ページネーション」ってできるようになればなんてことはないけど、初めてつくるなら、調べてしまうかも！ というわけで2パターンサンプルを作りました。 誰かのお役に立てれば嬉しいです(・∀・) 1. borderあり 2. borderなし
ローカル環境では表示されるのに、ちゃんとprecompileしているのに、デプロイするとbackground-imageが出ない！というので困った。 （※imageはapp/assets/images/配下に入れている。） 原因は以下のように書いていたから。 以下のように書き換えると、本番環…
SassコマンドにStyleオプションを指定して、アウトプットスタイルを適宜変更する。 Nested Style $ sass --watch --style nested sass:css Sassの階層をインデントを使って残すため、ネストされているような見た目になる。 Styleオプションを指定しないと、…
「HTML5飯〜Webフロントエンジニア交流会@横浜〜」に行ってきた！ 間に交流会を挟みながら、カヤックのHTMLファイ部の人たちが順にLTをしていくという形で進んで行った。 「みんなすごいものつくってるな...自分も頑張らなければ！」と思った。 色んなところ…
読んだ。 年始に読んだGitHub実践入門 GitHub実践入門 ~Pull Requestによる開発の変革 (WEB+DB PRESS plus)よりも脱初心者向けぽくて面白かった。 本の名の通り、GithubについてではなくてGitについて解説されているので、そもそも比べるのはおかしいけれど.…
読んだ。 よくあるスライドショーのコードを解説していく中で、オブジェクト、変数、配列、関数、型、演算子などJavaScriptを使う上で基本となる知識について丁寧に説明してくれている。 プログラミングの考え方を、わかりやすい例を使って解説してくれてい…
「新規登録して、New Relicを導入するとTシャツがもらえる」という広告がよく出てくるので、作ったアプリケーションにNew Rlelicを導入してみた！ 2ヶ月経ってようやく届いた！ポストに投函されてた実物はこちら↓↓ 開けてみると、ちゃんとTシャツが入ってま…
appディレクトリ配下で以下のコマンドをたたく。 coffee coffee -wco js/ coffee/ sass sass --watch sass:css ディレクトリの構造はいたって普通。
半角英字のみの文字列がずらっと並ぶと、ボックスの幅をしていしていても折り返すことなく、すごいことになることがある。 cssで以下を指定するだけで解決する。 word-break:break-all; word-wrap:break-word; サンプルコードは以下。
モーダルウィンドウを実装するために「leanModal.js」を使ってみた。 シンプルで使いやすいので、単純にモーダルウィンドウを出すだけだったらオススメ！ ダウンロードはこちらから 「leanModal.js」の使い方 1. html 2. js 3. css 注意点：画像は特に用意さ…
フォントサイズを指定する単位「rem」をIE8でも使用するスクリプトが紹介されていたので、追加！ 「rem」については以前紹介しました。 フォントサイズをCSS3の「rem」で指定する REM unit polyfill 「REM unit polyfill」を使うとIE8でも「rem」が使える。 …
読んだ！年末年始に:( 会社の先輩にすすめられて、発売されてからすぐに買って読んで、 すっかり忘れていたけど、最近結構話題になっているらしい。 JQueryを使ってできることがたくさん載っていて、色んなサイトで使われているような動きのあるものを「実際…
select要素をカスタマイズ！CSS3でやってみる。 デフォルトのselectタグはダサい... 1. CSS3「appearance」を使って矢印を消す 注意：Firefox用に別途2行書く必要がある。書かないとFirefoxでは消えてくれない。 消すとこんな感じに。 2.cssでカスタマイズす…
どんなサイトにも使えそうなので、メモ！ 外部ファイル「smoothScroll.js」を作成 もちろんhtml内に記述しても良い。 htmlを編集 ポイント： リンク元 <a href="#section1">クリックするとリンク先にスクロールする</a> リンク先 <div id="section1">ここまでスクロールされる</div> とするぐらい。 smoothScro…
CoffeeScriptを利用するためには Node.jsとnpmというパッケージマネージャが必須なので、インストールする。 1. Node.jsのインストール Homebrewを使っている人は簡単。 $ brew install node $ node -v v0.10.21 2. npmのインストール $ curl http://npmjs.o…
今まで「colorbox」しか使ったことなかったけど、今回は「Shadowbox.js」を使ってみた。 複数の画像をスライドさせたり、YouTubeの動画を表示させたり、簡単にできるのが良い！ ダウンロードはこちらから そんなに重くないようなので、全部にチェックして、…
仕事でモックアップ作った。
読んだ！ 初心者には良いかも。私はド初心者ではないので、物足りなかった.. 次は中級者向けのものを読みたい！もっとも使って覚えるものだけど。 目次 第1章:GitHubの世界へようこそ 第2章:Gitの導入 第3章:GitHubを利用するための準備 第4章:Gitを操作しな…
Dropboxのアカウントをプライベート用、仕事用に分けているので、 （今更）1台のMacで2つとも同期させることにした。 現在はプライベート用のアカウントしか同期していないので、 仕事用のアカウント用にDropboxアプリを作成して、専用フォルダとリンクさせ…
もうmergeされちゃっているcommitを取り消したい時に便利。 今回はリリースされたある施策が一旦取取り下げになったので、使ってみた。 1. ログを確認する $ git log 戻したいmerge commit のハッシュ値をメモ。 commit 0eb809182efc0096af2be80124482fe1238…
rebaseというコマンドが便利。 コミットした後だけど、コミット名を変更したい時がたまにある... 1.コミットログを確認する $ git log commit 57c9567e61742a1d009b57ac22583fc6a2eb044c Author: myname <myemail@myemail.com> Date: Mon Apr 11 15:58:48 2014 +0900 画像アップロ</myemail@myemail.com>…
1. まずはアプリケーションを作る 今回はデスクトップ配下に作ることに。 $ cd Desktop $ rails new MyApp 移動する。 $ cd MyApp 2. Github上でリポジトリを作る 手順は簡単。 Reporitories上に行き、New をクリック。 リポジトリ名ははさきほど作ったアプ…
