捗る捗るマウスジェスチャーでブラウザ操作が超楽チン!

photo by aperture_lag


皆さんはブラウザの履歴を戻ったり進んだり、
新しいタブでリンクを開いたりは、どの様に行っていましたでしょうか?

私は、戻るボタンや進むボタンをクリックしたり、
ランクを別タブで開く際はリンクを右クリック『新しいタブで開く』でした。

それが当たり前だと思っていました。

しかし、そんな常識を覆す最強のツールを見つけました!
その名も『Smooth Gestures』

何故今まで知らなかったのか?という程、とても便利です。
一度使ったら手放せません。

今回は、そんな『Smooth Gestures』の魅力について解説します。

  1. 『Smooth Gestures』とは?
  2. 『Smooth Gestures』のインストール
  3. 各ブラウザでのマウスジェスチャー拡張機能
『捗る捗るマウスジェスチャーでブラウザ操作が超楽チン!』を続きを読む »

【jQuery】ファイル選択フォームデザインのカスタマイズ方法



基本的に、ファイルのアップロード等で使用するフォーム要素として
『input』要素の『type="file"』がありますが、
ファイル選択ボタンや、ファイル名表示エリアの位置やデザインは
基本的にブラウザ依存で、中々デザインを当て込むのは困難です。
デフォルトで適用されるデザインは、
IEFirefoxはファイル選択ボタンがファイル名表示エリアに対して右側ですし、
ChromeSafariはファイル選択ボタンがファイル名表示エリアに対して左側です。
ファイル未選択字のデフォルトメッセージ(『ファイルが選択されていません』等)も
言葉が異なっていたり、そもそも表示が無い等まちまちです。
これだけブラウザによって異なれば、
そのままデフォルトで使用すると
他のデザインとのバランスが悪くなったりして、
どうしてもデザインを入れたいパターンが出てくる場合があります。

また、ブラウザ依存のデザインなので、ブラウザによってデザインが異なるため、
UI的に迷いが生じる等を危惧して、全端末同じ様な見た目にする為に
デザインを適用する場合もあります。

今回は、そんなブラウザ依存のデザインが入ってしまっている
『input』要素の『type="file"』をカスタマイズして、好きなデザインに変えてしまう方法を
サンプルコード付きで解説します。

イベント起動などでは、分かりやすいのでjQueryを使用していますが、
勿論ネイティブのJavaScriptでも同じ事が出来ますので、
適当に置き換えて読み進めて下さい。
実際、jQueryを使用しているイベント駆動の部分でも、
そこまで複雑な事はしていないので、セレクタをドキュメントから書く必要がある程度の違いです。

要望があれば、ネイティブのJavaScriptへ書き直したものを追記しますので、
コメント頂ければ幸いです。


  1. まずは普通に『input』要素の『type="file"』を設置しよう。
  2. ファイル選択を起動させよう。
  3. ファイル選択状況表示エリアを実装しよう。
  4. 忘れがちなテキストボックス選択イベント
  5. Internet Explorer 対策
『【jQuery】ファイル選択フォームデザインのカスタマイズ方法』を続きを読む »

JavaScript開発のデバッグを加速するlog出力!




ブラウザのデベロッパツールのコンソールへlogを出力する方法と、
その際の注意点や解決策についてソースコード付きで解説します。
最終的にはlog出力の完成形として、
IEエラー回避、consoleオブジェクトの記述無し、デバッグ切り替え機能付きの
プラグインの作成まで順を追って解説致しますので、最後までお付き合い頂ければ幸いです。

JavaScript開発において、変数の中身の確認や、処理フローの状況を確認する為には、
今まではHTMLへ出力したり、alert()等で通知したりといった事が主流でした。

しかし、ブラウザの技術進歩により、かなりJavaScript開発の手助けとなる機能が充実して来ました。

そんな中、ブラウザのデベロッパーツールのJavaScriptコンソールへ
logを出力する事が可能となりました。

今回の記事では、そんなlog出力の方法と、SafariChromeFirefox、各ブラウザでの互換吸収、IEへの対策方法等を
解説したいと思います。

alert()の様に、一回一回ボタンを押す必要も無く、HTML出力の様にレイアウト崩れを気にしたり、
ロギング環境を構築する手間も必要ありません。

今回解説するlog出力方法を身につければ、きっと今後のJavaScript開発が加速するはずです。


  1. JavaScriptコンソールへlogを出力してみよう!
  2. 他にもあるlog出力系便利メソッド!
  3. consoleが使えないブラウザでもエラーが発生しない様にしよう
  4. 長いオブジェクト名を短縮しよう
  5. コンソールへのlog出力の有効・無効を設定しよう
  6. log出力の完成形!IEエラー回避&console記述無し&デバッグ切り替え機能付き
『JavaScript開発のデバッグを加速するlog出力!』を続きを読む »

人気の投稿

Category

Algorithm (2) Android (8) ASP/aspx (1) Blogger (2) C/C++ (1) Chrome (5) CSS (9) Firefox (4) Fortran (1) Google (9) GoogleMap (2) HTML (12) IE (3) Information (4) iOS (2) iPhone/iPad/iPod (2) Java (6) JavaScript (16) jQuery (9) JSP (1) LifeRecipe (5) Linux (2) Macintosh (2) MapKit (4) Marketing (7) MySQL (3) NAMAZU (2) Objective-C (7) Other (7) Perl (1) PHP (9) Python (1) RSS/Atom (2) Ruby (1) Safari (2) SEO (11) Smarty (2) SQL (2) Tex (1) Three.js (1) Twitter (1) TwitterLog (313) UIKit (5) Unix (1) VBA/VBS (1) Windows (5) WordPress (3) Writing (5) XAMPP (1) XML (1) Yahoo (2) ZendFramework2 (14)