あなたのサイトがレスポンシブデザインかどうか確認できるサイト「Am I Responsive?」 | ライフハッカー・ジャパン
「Am I Responsive?」はあなたのサイトがレスポンシブデザインかどうか確認できるサイトです。URLを指定すると様々な大きさのディスプレイでどのように見えるかをチェックできますよ。レスポンシブになっているかどうか確認したい方には重宝するサイトです。 以下に使ってみた様子を載せておきます。まずAm I Responsive?へアクセスしましょう。 確認したいサイトのURLを指定しましょう。「GO」ボタンを押します。 このように様々な大きさの画面で閲覧したときの表示具合を確認できます。それぞれページをスクロールすることもできますよ。レスポンシブデザインかどうかひと目で確認できて便利ですね。ウェブデザイン系のお仕事をされている方には重宝するサイトかと思います。ぜひご活用ください。 Am I Responsive? （カメきち）
HTML、CSS、JavaScriptのコード整形ツール・「Dirty Markup」 - かちびと.net
Dirty Markupは、HTMl、css、JavaScriptのコードをインデントして整形してくれるツールです。高機能ではありませんが、シンプルで使いやすく、動作も軽量です。 Dirty Markup
ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと - かちびと.net
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
[Sublime Text2]SublimeLinter+jshintでJavaScriptコードを自動チェック | バシャログ。
最近、JavaScriptの新刊が本当に増えててうれしいなーと思うtanakaです。Web+DB PRESS vol.73 の連載で、JavaScriptのユニットテストについて書かれていたのを読みました。主に3つのツール・ライブラリが紹介されていましたが、中でも複数のブラウザに対して一斉にテスト実行させるtestemがすごい便利そうです。以前、同様のツールであるjsTestDriverをバシャログで紹介しましたが、testemはnpmコマンドでインストールしたらすぐテストを書き始められるし、設定を書けば、自動でブラウザを起動してくれるので楽でした。(Windows,Macともに導入できました)テスト書きたいと思っている方がいましたら是非読んでみてください。 さて、testemはまだあんまりいじってないので、今日は JavaScript のコードをjshintというツールでチェックする方法
![[Sublime Text2]SublimeLinter+jshintでJavaScriptコードを自動チェック | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/e09ad8f655ea0962c3fc07c12b65c5a618375e0d/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_tools.png)
いまさらだけど、2012年にお世話になった神ツールたち（Mac向け） - Flash Black
こんなエントリーは去年末か年明けに書いておけ！って思いますが、blogを書く練習としてまとめます。 これから列挙するツールを使う事により、去年は手を動かす事の楽しさを再確認。 いままでダルかった作業が楽になるだけではなく、HTMLをキレイに書けたり構造を考えるようになったりと一石二鳥。 SASS and Compass 全俺が感動し、咽び泣くほど無くてはならない存在となったHtmlコーディングの革命児。 なぜすぐに導入しなかったのかと過去の自分に言いたいぐらい！ いまさら解説はいらないと思いますので、お世話になったサイトをご紹介いたします。 CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 Sprite画像でもう悩まない？！SassとCompassで速攻Sprite画像を作る方法に感動！ | バンクーバーのうぇぶ屋 CompassでCSSスプライト[to-R] C
BootstrapベースのWebアプリケーションウィザード·Bootstrap Application Wizard MOONGIFT
Bootstrap Application WizardはBootstrap用のアプリケーションウィザードフローを提供するライブラリです。 Bootstrapを使ってWebサービスを提供するサイトが多くなってきました。今回はその一つ、Bootstrapを使ってウィザード風の流れを実現してくれるライブラリ、Bootstrap Application Wizardを紹介します。 フローティングでウィザードが表示されます。 次へを押して順番に進めていきます。 左下のステータスバーが徐々に進んでいます。 完了しました！ Bootstrap Application Wizardではwizardというメソッドを使って一つ一つをスライド風に切り替えながら処理を選べるようになります。入力チェックも内蔵されています。そして最後にデータが飛んでくるのでサーバ側で処理して返却すれば良いだけです。とても手軽です。
iPhoneゲーム開発に役立つツール13選まとめ - 5.1さらうどん
みなさん、iPhoneでゲーム開発してますか！ iPhoneでのゲーム開発は、cocos2d for iPhoneを初めとして、cocos2d-x, Kobold2D, Unity, Corona SDK, GameSaladなど、様々な開発環境で割りと手軽に行えるようになってきました、 それに伴って、非プログラマ向けのゲーム開発支援ツールも非常に充実してきていますが、日本語で読める詳しい記事が少なかったことが気になったため、自分が使っているモノをまとめてみました。 デザイナー向け CocosBuilder CocosBuilder – Graphical Interface Builder for Cocos2D iPhone and iPad GUI設計ツール。 コードでちまちまとスプライトを配置していくのは発狂するので、GUIツールを使った方が楽。読み込み用のライブラリも付属していて
『JavaScript開発時に便利なツールたち』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバ事業本部でディベロッパーをしています、平木(id:Layzie)です。 先日2/9に行なわれたFrontrend Vol.4で"JavaScript Development Tools – JavaScript開発の効率アップ"というテーマで登壇させていただいたのですが、セッションでは時間の都合でお話できなかった補足や、その他のツールのご紹介をしていきたいと思います。公式サイトで各講演のスライドと動画を見ることができますので、残念ながらイベントにいらっしゃらなかった方は、ぜひご覽になってください。 Chrome Canaryビル
csshXが素晴らしすぎる件
人間とウェブの未来（旧） 「ウェブの歴史は人類の歴史の繰り返し」という観点から色々勉強しています。2014年までの人間とウェブの未来の旧ブログです。 複数のホストに対して、同時にコマンドを実行するツールはpssh等いくつかあると思うのですが、もっと自由度高く、viで編集したり、さらにはsshでログインしている状態でやれるような作業を全部同時にやりたいと思っていました。 そんな都合の良いツールはなかなかなくて、会社の人がLinuxでCluster SSHを使っていて、Linux限定かぁと諦めていたところ、なんとMacで使えるcluster SSHのcsshXがあるようだと教えてもらいました。これがあまりに素晴らし過ぎるので簡単に紹介します。 インストール brew環境を入れている人は以下のコマンド一発で使えるようになります。 [program lang=’bash’ escaped=’tru
Xcodeのストーリーボードの使い方
第4回はGUI デザインを行うもう一つの方法として、Xcode 4.2から新たに搭載されたストーリーボードの使用方法について説明します。 ストーリーボードの概要 Xcodeに組み込まれたInterface Builderを使う場合は、Nibファイルを使用して画面（ビュー）の遷移は基本的にユーザーがプログラムで記述する必要があります。それに対して、Xcode 4.2以降に搭載された「ストーリーボード」（Storyboard）を使用すると、複数の画面の遷移をグラフィカルに構築できるようになります。 ストーリーボードでは、個々の画面を構成する「ビュー」と「ビューコントローラ」の組み合わせを、「Scene」（シーン）として管理しています。シーンからシーンへの切り替え時の視覚効果を「Segue」（セグエ）として設定できます。Segueとは、音楽でよく使用される用語で「楽曲などを切れ目なく続けて演奏す
脱Flash！素人でも簡単にHTML5アニメが作成できるMacアプリ「Hype」を使ってみた。なにこれ超楽しい！
Web制作に携わっていると頭を悩ませる項目の一つが「Flash」への対応。 動きのあるコンテンツを作成するにはやはりまだまだFlashが便利なわけですが、iPhoneをはじめとするiOSでは再生できない（一部再生できるブラウザアプリはありますが）ので、困った困ったなのです。 そこで次代を担う（であろう）コンテンツがHTML5を使用したムービー。 先日も、「Form Follows Function」と言うHTML5で作られた、動きのあるコンテンツを紹介したWebページをご紹介したばかりですが、ここまで複雑なものは出来なくとも、私のような初心者でも超簡単にHTML5アニメが作れると噂のMacアプリ、HypeをDLして使ってみました。 タイムラインを使って簡単にHTML5アニメを作れる！ 起動。 Welcome to UNDERGROUND… 「Watch Getting Started Vi
オンラインでテキストの差分をチェックしてくれる『Diffchecker』 | 100SHIKI
よくあるツールだが、シンプルで使いやすかったのでご紹介。 Diffcheckerを使えば、2つのテキストの差分をチェックすることができる。 テキストは貼り付けてもいいし、ファイルのアップロードにも対応している。 プログラミングの練習や、ファイルの履歴管理に便利かもですな。覚えておいても損はないか、と。
iOSのデザインをするときに利用しているツールいろいろ | ナナメウエblog
こんにちは、いつかiOSのデザインのみで食べていきたい鈴木(@suzukisan__)です。 まだまだ若輩ですがiOSのデザイン環境について紹介させて頂きます。 画面設計 iPhone Idea Sheet あまり紙でやることはないのですが、使う場合はこちらのiPhone Idea Sheetです。 うちではむしろエンジニアさんのほうが使っています。 三階ラボ | iPhone Idea Sheet ver.01 あまりに使いやすいのでiPhone5用にiPhone5 Idea Sheetなるものをうちで作成しました。 iPhone5のワイヤーフレームに使えるアイデアシートをイラレで作りました | ナナメウエblog POP 本来は紙に書いたワイヤーフレームから画面設計をイメージするためのものだと思いますが、普通にデザインだけしてコーディング前の画像を取り込んで画面推移を説明す
スタイルシートの内容はそのままで、可読性・保守性を高めるオンラインサービス -CSS Trashman
サイトやブログで使用しているスタイルシートをリファクタリングし、可読性・保守性を高めたCSS（Sassも）に変換してくれるオンラインサービスを紹介します。
Windows / Mac 有名どころ Git クライアント比較
こんにちはピンクです。最近 Git のクライアントを色々試してたので、今回はそれについて。 …の前に！ 以前は Git にはインストーラーがなく、コマンドうったり Windows 環境だったら msysGit でごにょごにょしたり～というのが最低限必要だったと思うのですが、気づいたらいつの間にか Mac OS X、Windows 向けにインストーラーが出てました。びっくり。ドンドン導入の敷居が下がって良いですね。Mac と Windows ではインストーラーがあるので、インストール超簡単！ Git – Downloads msysGit のページに msysGit と Git 公式のインストーラー比較が書いてあります。興味がある方は見てみると良いでしょう。ちなみに、後述の GitHub for Windws のコア機能は msysGit ベースらしいです。 Git 用語＆流れ説明 簡単なこ
EPUB3::かんたん電子書籍作成
本文テキストファイルと表紙用画像をアップロードすると、EPUB3ファイルを作ってダウンロードします。 表紙画像は .jpg か .png、テキストファイルは .txt でお願いします。 テキストファイル、画像ファイルの、ファイル名は半角英数字だけでお願いします。 【どんなふうに見えるの？読めるの？】 ダウンロードしたEPUB3ファイルは、EPUB3リーダーで読むことができます。 下のスクリーンショットは、iPhoneの紀伊国屋電子書籍アプリkinoppyでファイルを開いたところです。 【テキストファイルの約束事】 ・小見出しごとで分割します（最低ひとつ、先頭に小見出しをつけてください） （小見出し）第一章 （小見出し）はじまりはいつもの場所だった （小見出し）◆ などと、（小見出し）の後ろの単語が小見出しになります。 ※カッコ小見出しカッコの後ろです （小見出しがそのまま目次となります）
簡単で便利すぎ！WEB制作を「楽」にする無料ツールまとめ
作成：2013/01/28 更新：2014/11/01 Tool > Webサービス フリーソフト、無料ツールなのにここまで使える 前回、無料素材をご紹介しました。 今回は無料で使える「ツール」をまとめます。フォント、画像、配色、htmlからエディター・アフィリエイトリンク作成補助まで。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．フォント ２．画像編集 ３．ロゴ作成 / ネタ ４．配色 ５．HTML5 ６．CSS ７．ブラウザチェック ８．エディター ９．アフィリエイトリンク作成 １０．フォーム作成 １．フォント PCにインストールされているフォント一覧をプレビュー Font picker イラスト等に使われているフォントを調べる WhatTheFont Windows上のテキストをくっきり、見やすく表示。 gdipp - ｋ本的に無料ソフト・フリー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
難読化、圧縮されたJavaScriptコードを綺麗に整形・「Online javascript beautifier」 - かちびと.net
yuguri.com
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久
