jQuery.Deferred を使ってみる。 | バシャログ。
カーテンのない家には住めない事に気がついたminamiです。 jQueryにはjQuery.Deferred というオブジェクトがあります。jQuery 1.5 のころから実装されてだいぶ経っているのですが、今までなんとなくよくわからなくて苦手意識があったので改めて使ってみました。 jQuery.Deferred ってなに？ "deferred" の意味を調べると「延期された」「遅延された」などの意味があります。乱暴にまとめてしまうと、様々な処理が終わった後に呼ばれる（遅延された）処理を監視してくれるオブジェクトと言えます。 何を言っているのかわからん 文章で書くとまどろっこしいのでサンプルを作りました。1～4の処理が全て終わったら完了の表示を出します。 jQuery.Deferred を使った処理の管理 window.setTimeout() などのタイマー処理 jQuery.ajax
そろそろ確認！Google Map API V3 への移行は済んでますか？ | バシャログ。
寒い！最近の状況を説明するにはひと言で十分。 寒い！！kimoto です。 Google Map を自分のサイトに埋め込めることができる Google Maps API。 現在の最新バージョンは v3 なのですが、一つ前の v2 のサポートが今年の5月に切れます。 （v2 のマニュアルにも注意書きがあります） ※ 2/26追記：正確にはサポートが切れたのは2010年の5月で、2013年の5月までは動作を保証する、という事だそうです。つまり、それ以降は動作の保証が無くなるということですね。 もし API を利用している方はバージョンが幾つか確認し、v2 であれば早急に v3 に移行することをおすすめします。 てことで、v3 の設置の仕方を簡単に説明しようとおもいます。 読み込み 読み込むコードはこちら。 <script type="text/javascript" src="http://m
[Sublime Text2]SublimeLinter+jshintでJavaScriptコードを自動チェック | バシャログ。
最近、JavaScriptの新刊が本当に増えててうれしいなーと思うtanakaです。Web+DB PRESS vol.73 の連載で、JavaScriptのユニットテストについて書かれていたのを読みました。主に3つのツール・ライブラリが紹介されていましたが、中でも複数のブラウザに対して一斉にテスト実行させるtestemがすごい便利そうです。以前、同様のツールであるjsTestDriverをバシャログで紹介しましたが、testemはnpmコマンドでインストールしたらすぐテストを書き始められるし、設定を書けば、自動でブラウザを起動してくれるので楽でした。(Windows,Macともに導入できました)テスト書きたいと思っている方がいましたら是非読んでみてください。 さて、testemはまだあんまりいじってないので、今日は JavaScript のコードをjshintというツールでチェックする方法
Google Map を簡単お洒落にカスタマイズ！「Styled Map Wizard」使ってみた。 | バシャログ。
今月発売予定の「メタルギアライジング」をそわそわ楽しみにしているアクションゲー好き seki です。 今回もWebサービスのご紹介です！ 最近よくよく見かける、「Google map」のデザインをお洒落にカスタマイズして載せているサイト。皆さんも一度は目にしたことがあるかと思いますが、こちら、どうやって作っているか気になりますよね。 今回は、js無知な私でも簡単に作れる Google Maps API 「Styled Map Wizard」の使い方を、ざっくりと例を挙げてご紹介します。 【参考サイト】 今回はこちらの記事より、参考・引用して解説します。こちら、とても丁寧に解説されているので、jsが分らなくても出来るかと。 今回作成したもの 画像ですみませんがこちら。 アイコンは seki になっていますが場所はバシャログ。本陣です。 色をモノクロにして、交差点やコンビニ、銀行などのアイコン
[WebStorm]JavaScriptファイルをMinifyする(Source Maps対応) | バシャログ。
日頃から愛用してるIDEのPhpStorm 6 がリリースされました。JavaScriptにコンパイルされる系の言語のサポートが強化されたのが目立ちますね。 今日は、6の新機能というわけではないですが、WebStormを使ってJavaScriptファイルをMinifyする方法について紹介します。 概要 WebStormでjsファイルを編集したら自動的にMinifyされるようにします。JavaScriptにおいてMinifyとは余計な空白をとったり変数名を短くしたりして、機能的動作を変えずにJavaScriptのファイルサイズだけ小さくすることをいいます。今回はClosure Compilerを使います。 インストール まず、Minifyを実行するプログラムをダウンロードします。Getting Started with the Closure Compiler Applicationからリン
水色が美しいシンプルなWebサイト10選！ | バシャログ。
全く何の障害物も無いただの道路でコケて足を捻挫した seki です。皆さんも野生の小人さんには気をつけてください。 最近Webデザインのまとめサイトなどを巡回していて、シンプルで美しいデザインに加え、メインもしくは、アクセントカラーなどに「水色」を取り入れるサイトをよく見かけるようになりました。着々とわたしのブックマークがいいスピードで増えてきたので、今回は、そういった「水色」カラーのwebサイトの中でも、割と新しめのWebサイトを、ピックアップしていくつかご紹介したいと思います。 水色の美しいWebデザイン10個 シンプルなもの以外にも、色々な表現方法が楽しめる水色デザイン、個性豊かで見ているだけでも面白いので、参考にしてみてください。 click5interactive 海外のWebやアプリ開発を行う企業のWebサイトです。ロゴにさりげなく使われている水色をバランス良く使って、サイト全
[PhpStorm/WebStorm]CDNで読み込むJavaScriptライブラリのコード補完させるQuickfix | バシャログ。
最近Sublime Text2でJavaScriptを書いているtanakaです。一度起動すればサクサク動くのはいいですが、コンテキストを理解した補完ができる点でWeb(Php)Stormの方がいいかなぁ、と思いつつ、プラグインをがしがし導入してます。今日はWebStorm のTipsを1つ紹介 ローカルにないjsコードの補完をすぐできるようにする WebStormで以下のようにCDNを使ってライブラリを読み込むと、JavaScriptコードの補完が利用できません。jQueryならCDNからの読み込みに失敗したときはローカルのJavaScriptを読むようにしてることも多いと思いますが、Facebook の JavaScript SDKとかローカルに保存しないのではないでしょうか。 <html> <head> <title>CDNでjQuery読み込み</title> <script sr
便利なJavaScriptライブラリを一覧で比較できる『jster』 | バシャログ。
kindle paperwhite3Gを買ったら読書が大変はかどっているminamiです。 JavaScriptのライブラリを探すのに便利なサイトのご紹介をします。 jster jsterは、JavaScriptのライブラリを用途別に集めたサイトです。WebサイトのUIからMVCフレームワーク、ゲームエンジンといった分類で分けられているのでライブラリの比較検討をするにはとてもよさそうです。 気になるUIのカテゴリを見てみました。やはりTwitter BootStrapの関心が高いようですね。同様の機能を持つライブラリが複数あっても、人気や使いやすさによってはその後の主流になるかならないかの問題は常にあるので、どのライブラリが注目を集めているかをチェックするのにも良いかもしれません。 まとめ 一口にJavaScriptのライブラリ、といっても用途も様々になってきました。利用方法ごとにまとめら
MS-Word tips 8：ページ番号を入れる | バシャログ。
昨日に引き続き、MS-Word tipsです。今日はページ番号を入れる方法についてお話したいと思います。 ページ番号機能について ページ番号は[挿入]-[ページ番号]で挿入します。この機能を利用してページ番号を入れると、ページごとに自動採番されます。 ページ番号はフッター領域に入れます ページ番号は「フッター領域」（各ページの下部）に入れます。「ヘッダー領域」（各ページの上部）でもOKです。これにより、本文をどのように編集しても、各ページの同じ位置にページ番号を表示させることが可能となります。 それでは、フッター領域にページ番号を入れてみましょう。 [挿入]-[ページ番号]をクリックします。 →「ページ番号」ダイアログが表示されます。 「位置」で「ページの下」を選択し、[OK]をクリックします。 ※ ヘッダー領域に入れる場合は、「位置」で「ページの上」を選択します。 ※ 「配置」では、ヘッ
MS-Word tips 7：改ページする複数の方法 | バシャログ。
今日はMS-Wordで強制的に改ページをする方法をいくつかご紹介します。 方法1 改ページを入れる 最もオーソドックスな方法です。改ページしたい位置に「改ページ」を入れます。 改ページしたい位置にカーソルを置き、[挿入]-[改ページ]をクリックします。 →次の行から次ページへ強制的に送られます。 方法2 段落スタイルに「改ページ」の属性を指定する もう少しスマートな方法です。物理的な改ページを入れるのではなく、「この段落は新しいページから始める」という設定をします。 改ページしたい段落のどこかにカーソルを置き、[書式]-[段落]をクリックします。 →「段落」ダイアログが表示されます。 「改ページと改行」タブで、「段落前で改ページする」にチェックを入れ、[OK]をクリックします。 →カーソルのある段落が、必ずページの冒頭に来るようになります。 方法3 改ページの条件を指定する 今度は、必ず改
チェック作業の時間短縮！文字コード/改行コードの判定・変換ツール「FCChecker」 | バシャログ。
仮面ライダーウィザードのウィザードリングが5つ集まりました ishida です。 コレ以上あつめると嫁さんに怒られるので、リング集めはもう辞めます。でもベルトがほしいよぉー さてさて、本日はファイルも文字コードと改行コードチェックに便利なツールのご詳細です。 プロジェクトではそれぞれコーディングルールも異なります。 HTMLのバージョンだったり、文字コード、改行コード、対象ブラウザなど。 複数プロジェクトが同時進行の場合は、注意が必要です。 特に改行コードについては、目に見えるものではないので分かりにくいですよね。 Dreamweaverは環境設定で改行コードを変更できますが、プロジェクトごとに変更はできないので、改行コードをつい前回作業したままの状態になっていることも多いです。 そこで、便利なツールがこれ。 FileCode Checker ファイルの文字コードと改行コードを一覧表示して
ブラウザのリロード要らず？ WebStorm/PhpStormのLiveEdit機能 | バシャログ。
全然Hotな話題ではなくなりましたがiPhone5をようやく手に入れました。LTEは速いです。リリースから1ヶ月以上経っていて、同じバシャログ。メンバーから「あ、まだ手に入れてなかったんだ」的な目で見られた…などということはありません。 本日はまだまだマイナーなWeb系IDE WebStorm / PhpStormの便利機能 LiveEditを紹介します。 LiveEditとはどんな機能か PhpStorm 5.0で組み込みの機能になったもので、もともとは"Instant HTML Editing" プラグインと呼ばれていたものだそうです。大きく分けて2つの機能があります。、1つ目はHTML/CSS/JavaScriptの修正を即座にブラウザ表示に反映させる機能、2つ目は、エディタのカーソルがある位置の要素をブラウザ上でハイライトさせる機能です。現時点ではChrome専用です。文で説明する
PhpStorm で PHPスクリプトの実行を解析する(Xdebugのプロファイラの結果を表示する) | バシャログ。
こんにちは、tanakaです。今日はPhpStorm で、Xdebugのリモートデバッグ環境を作るに引き続いて、プロファイラ機能を紹介します。 Xdebugのプロファイラ機能とPhpStorm Xdebugのプロファイラ機能というのは、1セッションの間に読み込んだPHPスクリプトや関数の実行にかかった時間を集計し、ログとして保存する機能です。 PhpStorm のプロファイラ機能は、リモートデバッグよりもシンプルです。Xdebugでプロファイル保存の機能を有効にして、ブラウザにて開発環境のサイトを表示します。そうすると特定のディレクトリに「cachegrind.out.12345」などのファイル名でログが保存されますので、PhpStormのメニューから開くと、わかりやすく表示してくれる、というものです。 本家ブログの新機能紹介では"Xdebug profiler integration"(
Google Maps API V3 での細かな設定 | バシャログ。
最近だんだん暖かくなってきて嬉しい kimoto です。今日は啓蟄ということで、冬眠から覚めた虫も這い出てくるそうです。 さて、前回書いた Google Map API V3 ですが、前回は基本的なことをざっと紹介しました。 今回は、そこからちょっとだけ踏み込んで、よくある設定を簡単にご紹介します。 マウスホイールでのズーム デフォルト設定だと、マウスホイールで縮尺が変更になります。 ホイールで拡大縮小ができるのは便利といえば便利なのですが、ページをスクロールしようとしてるのに、マップにポインタが重なった瞬間にページがスクロールせずマップが縮小されて行ったりします。 これは意外と不便なので場合によってはオフにした方が良いでしょう。 google.maps.event.addDomListener(window, 'load', function() { var map = document
意外と知らなかったSublime Text 2 で使えるショートカット | バシャログ。
どうぶつの森に行きたいminamiです。 Sublime Text2 、いいエディタですよね。僕も使ってから日が浅いのですが、毎日なにかしらの発見があります！便利なショートカットがたくさんあるので備忘的にあげてみました。操作はWindows版です。 Ctrl+P 候補のファイル名を入力していくと該当するファイルを開くことができます。 Ctrl+R JavaScriptなどでメソッドを設定していると候補を表示して移動できます。 Ctrl+L 行選択。続けて入力すると次の行も選択されます。 Ctrl+G 指定行にジャンプします。 Ctrl+D 選択範囲の文字列を一度にまとめて編集できます。 また、文字列を選択してCtrl+Dを実行するごとに、同じ文字列が選択され、そのまま内容を変更できます！ Ctrl+Shift+↑↓ 行をまるごと上下に移動できます。複数行選択しても同様です。 Ctrl+Sh
MS-Word tips 9：段落スタイルと文字スタイル | バシャログ。
今日は「段落スタイル」と「文字スタイル」についてご紹介したいと思います。 ◆段落とは？ その前に、まずMS-Wordにおける「段落」とは何でしょうか？ 「サンプル1」と「サンプル2」はいくつの段落でできているでしょう？ ◆段落の改行の違い 画面に目を近づけてよく見てみると、改行の位置に入っている記号の種類が違います。 段落記号を入れるには、[Enter]キーを押します。改行は[Shift]+[Enter]キーで挿入できます。 それから、行間のスペースが違いますね。サンプル1の方が広いです。これは、段落と単なる改行では、適用される設定項目が異なるからです。 段落と段落の間の空きは、「段落書式」の「間隔」の「段落前」「段落後」で設定した値が適用されます。 一方、単なる改行の前後の空きは、「段落書式」の「行間」で設定した値が適用されます。見た目は行が変わっていますが、行の終わりまで文字が入り、成
MS-Word tips 10：表の設定 | バシャログ。
今日は表の設定についてご紹介します。 表を作成するときは、まず表の枠組みを作ってからセルに文字を入れていく方法と、表に入れる内容を用意して表に変換する方法があります。 ◆表組を作って、セルに文字を入れていく方法 表の行数と列数を決めて、表を新規作成します。 [罫線]-[挿入]-[表]をクリックします。 →「表の挿入」ダイアログが表示されます。 「列数」「行数」にそれぞれ入力し、[OK]をクリックします。 →表が挿入されます。 各セルに文字を入力していきます。 ◆内容を入力し、表に変換する方法 今度は先に内容を入力します。行の区切りは改行、列の区切りはタブを入れます。 入力した内容を選択し、[罫線]-[変換]-[文字列を表にする]をクリックします。 →「文字列を表にする」ダイアログが表示されます。 列数が意図通りであることを確認し、「文字列の区切り」で「タブ」を選択して[OK]をクリックしま
[jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator | バシャログ。
最近目がかゆくてやたらとクシャミが出るんですけど、PM2.5 ってホント迷惑ですね～。みなさん、こんにちは nakamura です。 最近ちょっとおぉ！と思った jQuery プラグインがあったので今日はそのご紹介です。Ajax を使った非同期な処理も今やすっかり定番ですが、毎回メンドクサイな～と思うのがローディングアイコン。アニメーション Gif を用意して、どこで呼び出しても見栄えがするように CSS 調整して・・・。あーもうしゃらくせえ！と思っていたら、その辺全部勝手にやってくれる jQuery プラグインがあったんですね～。 NETEYE Activity Indicator っていうプラグインがそれです。github で公開されてます。 NETEYE Activity Indicator jquery-plugins/activity-indicator at master ·
[CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。
こんにちはLatinです。 今年も残す所、あと11ヶ月となってしまいましたが、やり残しのないよう頑張ろうと思っております。 今回はCSS3のグラデーションにまつわるエントリーです。 ハッキリ言って面倒くさい！ さてCSS3のグラデーション「linear-gradient」なんですが、はっきり言って面倒です･･･。 今はCSS3のジェネレータもたくさんあるので、それらを使うのもいいのですが、足りない分のベンダープレフィックスを探したり、filter やら毎回ググるのが非常に面倒！ 且つ、ボタンなどに、gradient と border-radius を併記した場合、IE9 での表示が若干おかしくなってしまいます。 詳細は下記に記載しますが、今後サクッと使えるように備忘録がてら、簡単にまとめておこうと思います。 CSS スニペット（修正前） .btn { border-radius: 4px;
![[CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/c76f538a877e78afb07d09e5ff0f87885ac194e9/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_coding.png)
Git の GUI クライアントまとめ | バシャログ。
誰も書かないから連投だよ！キー！！どうも、こんにちは nakamura です。 個人的には去年辺りから Git を使う場面が増えていたのですが、ここ最近やっと会社的にも使い始めるようになりました。いざ会社やチームで Git を使うとなると問題になるのが GUI で使えるのかどうか？という所だと思います。（うちのデザイナー陣は cd と ls しか Unix コマンド知りません・・・）GUI の Git クライアントも最近は色々と充実してきたようなので簡単にまとめてみようと思います！ TortoiseGit TortoiseGit いわずもがな Subversion で圧倒的に使われている TortoiseSVN の Git 版です。ちょっと前に触った時はまだまだだな～なんて思ってたのですが、最新版を改めて入れてみると普通に使えるようになってました。 日本語化もこの辺でできるみたいです。→
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
