タグ

2015年4月2日のブックマーク (12件)

  • JavaScriptユーザエージェント判別・判定

    Updated 2015.11.24 / Published 2015.04.02 新しいFirefox OSやWindows Phoneを含めた2015年現在のユーザエージェントを判定し分岐処理を行う手順をご紹介します。OSや機種毎の処理を行っていくには、もはや無理がありますので、タブレットかスマートフォンかを判別することのみにフィーチャーしています。 ユーザエージェント情報に依存して、分岐処理を行うと、常に付きまとう悩みの種が新しいOSの登場です。今年もすでにauからFirefox OSを搭載したスマートフォンであるFx0が新たに登場し、次いで日国内でもWindows Phoneが発売されることが決まっており、ユーザエージェント情報に依存して処理を行っている部分は相次いで見直しを迫られることになりますので、以下、ご参考に活用いただければと思います。 var _ua = (functi

    JavaScriptユーザエージェント判別・判定
  • Web制作に役立つ便利すぎるブックマークレットのまとめ

    Webサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなったり、Chromeで使えるけど他で使えないなどあるので、ブックマークレットもなかなか重宝します。 ページにグリッドを表示した確認 レスポンシブWebデザインの確認 デザインの確認をピクセル単位でできる ページで使用しているフォントをチェック ページをワイヤーフレーム化 ページの構造が正しいか確認 マークアップのいまいちな箇所を指摘してくれる 背景を素敵なテクスチャに変えてみたい ページのパフォーマンスを確認 minifyされたCSSを見やすく表示 SEOやソーシャルメディアに大切な項目を確認 コードとアクセシビリティをチェック ページにグリッドを表示した確認

    Web制作に役立つ便利すぎるブックマークレットのまとめ
  • ネットワークプログラミングの基礎知識

    ネットワークプログラミングの基礎知識 ここでは IP アドレスやポート番号、クライアントとサーバの役割などを説明し、 perl・C言語・Java などでソケット (Socket) を使った HTTP クライアントや POP3 クライアント、簡単なサーバを作成してみます。 要はネットワークプログラミングをやってみよう、ということです。 このページのサンプルプログラムは、RFC などの規格に準拠した「正しい」プログラムではありません。 また、全体的にエラー処理が不十分です (今後改善する予定です)。 あくまでも概要を理解するためのサンプルととらえてください。 もし気でしっかりとしたクライアントやサーバを書きたいなら、このページを読んだ上で、 さらに RFC を熟読し、そして wget・Apache・ftp コマンドなどのソースを参考にしてください。 このページに間違いを見付けたら、掲示板

  • jQueryで特定の要素が存在するかどうかを判別する処理|BLACKFLAG

    スクリプトを組む際に、特定の要素が存在する場合のみに処理を実行させる、といった場面にはよく遭遇するのでjQueryで要素の存在の有無を判別する処理を自分用のメモ書きとしてご紹介してみます。 jQueryで特定の要素が存在するかどうかを判別する処理【.length】 タグそのものに対して判別させることも可能ですが、サンプルではID「#sample」が存在するかどうかの処理について。 要素が存在するかどうかの判別方法はいろいろありますが、扱いやすかったものとしてまず「.length」を使っての判別から。 要素の数があるかどうか、を判別する処理になり、存在しない場合は値が空になるので、存在しないという判別になります。 「.length」を使っての「#sample」が存在した際の処理は以下のようになります。 ◆SCRIPT $(function(){ if($('#sample').length)

    jQueryで特定の要素が存在するかどうかを判別する処理|BLACKFLAG
  • Some More Inspiration for Text Input Effects | Codrops

    A couple of more inspirational styles for text input effects including some new techniques and ideas. We’ve updated and added some more effects to the Inspiration for Text Input Ideas. The second set contains some more styles that we thought about and collected after we released the first set about three month ago. The concept is the same: make (subtle) enhancements for text inputs to make them mo

    Some More Inspiration for Text Input Effects | Codrops
  • Vim幼稚園からVim小学校へ - Qiita

    emacsキーバインドに慣れ親しんだせいで長らくVim幼稚園のままだった私が来ましたよ。キーバインドを一度に覚えようとすると挫折しやすいので、以下のように少しずつボキャブラリーを増やすのがたぶん吉。 特記しない限りノーマルモードが前提。後、.vimrcでの設定については最小限にしか触れない (emacsでつい設定ファイルをいじってしまいがちだった反省から) ので各自好きにしてください。 Level 1 最小限の使い方だけ覚えて、ぶっつけでサーバーの設定ファイルを更新したりしていた。10年以上この状態。 iでその場でインサートモード aで直後の文字にインサートモード :wqで保存終了 :q!で保存せずに終了 移動はひたすらカーソルキー xでカーソル下の文字を削除 困ったらEscキーを連打 上はもともと、vimの先祖でずっと機能の少ないviの操作なのだけど、viならほぼどんなたいていのUnix

    Vim幼稚園からVim小学校へ - Qiita
  • 無料で使える写真・画像・ストックフォトを複数サイトから一気に検索して表示できる「Stock Up」

    ウェブサイトを作るときに重宝する無料のストックフォトを、20以上のサイトから一度に検索できるサービスが「Stock Up」です。 Stock Up: Free stock photo search. http://www.sitebuilderreport.com/stock-up 「Stock Up」のページを開くと、無料で使える写真がずらっと表示されます。 写真の上にマウスカーソルを置くと、写真がアップロードされている個別のサイト名が表示されます。保存したい場合は写真上でクリック。 別タブで個別サイトのダウンロードページが開き、写真を無料でダウンロード可能です。 新しく追加された写真を見る場合は、ロゴ下部の「108 photos added this week. 」をクリック。 すると、今週追加された写真を一気に見ることができます。 また、ページ上部のボックスにキーワードを入力して画像

    無料で使える写真・画像・ストックフォトを複数サイトから一気に検索して表示できる「Stock Up」
  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
  • Web作成の定形作業を自動化できるJavaScriptタスク実行環境Grunt

    はじめに HTMLJavaScript開発に限らず、一般にプログラミングの作業ではコンパイルや自動テスト、デプロイなど、開発の質にあまり関係のない定形作業が発生します。これらの定形作業を自動化できれば、プログラマは処理内容の検討やコーディングなどの質的な作業に集中でき、作業効率のアップが期待できます。また定形作業を手動で行うことによるケアレスミスの低減も期待できます。 プログラムのビルドに使われるMakeやJava環境で利用されるAntのように、定形作業を自動化するツールは様々な開発言語や環境で提供されています。記事ではタスクをJavaScriptで記述するタスク実行環境Gruntを紹介します。Gruntを使うとHTMLJavaScript開発で必要となる、以下のような定形作業を自動化できます。 ファイル操作(移動、コピー、削除、名称変更、結合) ネットワーク通信(FTP、SSH

    Web作成の定形作業を自動化できるJavaScriptタスク実行環境Grunt
  • Webアクセシビリティの勉強に役立つツールやWebサイト、書籍いろいろ

    2015年4月1日 アクセシビリティ, 便利ツール, 色彩 以前からWebアクセシビリティにはちょこちょこ勉強中の私です。しかしWebアクセシビリティについて書かれたサイトやってあまり多くなく、リソースを探すだけで苦労してしまったり…。そんなわけで今回はWebアクセシビリティのチェックに使えるツールや役立つ、Webサイト、ブログなどを集めてみました。 ↑私が10年以上利用している会計ソフト! アクセシビリティとは? 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシブルである」と言えます。 「ユーザビリティ」と混同されがちですが、使えないものを使えるようにするのがアクセシビリティの向上、使いにくいものを使いやすくするの

    Webアクセシビリティの勉強に役立つツールやWebサイト、書籍いろいろ
  • WordPressでさまざまなタイプのかっこいいページが簡単に作成できるカスタマイズ性にも優れたテーマ -Optimizer

    ランディングページ、スモールビジネス、ポートフォリオ、ギャラリーなど、企業や個人サイトを簡単に構築できる多目的用のWordPressのテーマファイルを紹介します。 「Optimizer」の名の通り、あらゆるデザインに最適化できるようカスタマイズ性に優れています。 Optimizer Optimizer -WordPressテーマディレクトリ OptimizerにはFree版とPro版があり、Free版ではいくつかの機能が利用できませんが、CC0ライセンスで個人でも商用でも無料で利用できます。 Optimizerのデモ Optimizerの特徴 Optimizerのデモ Optimizerを使うと、当にいろいろなタイプのページやサイトが作成できます。

    WordPressでさまざまなタイプのかっこいいページが簡単に作成できるカスタマイズ性にも優れたテーマ -Optimizer
  • 受託開発の会社で学んだ議事録の全て/All of minutes i learned in esm

    今年度もお疲れ様でしたの会でのLT資料です。

    受託開発の会社で学んだ議事録の全て/All of minutes i learned in esm