タグ

ブックマーク / bashalog.c-brains.jp (9)

  • あれ、いつも書いてるな~というJavaScript の小技集 | バシャログ。

    いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな~という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお~と思ったものがいくつもあったので抜粋してみました。 ※追記1: ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2:「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3:予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな~という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました! 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v

    あれ、いつも書いてるな~というJavaScript の小技集 | バシャログ。
  • 【JavaScript】デザインパターンを知ってみる。メディエータ編 | バシャログ。

    今回はJavaScriptで書くメディエータパターンについて調べてみました。実践的に使っていけるパターンだと思います。Mediator は「調停者」とか「仲裁人」という意味だそうです。 なぜ使うのか? メディエータは、いくつかのオブジェクトで情報のやり取りをしなくてはならない場合にとても有効なパターンです。メディエータパターンでは、オブジェクト同士が直接情報をやりとりするのではなく、メディエータオブジェクトを介して情報のやり取りをおこないます。 オブジェクト同士が情報のやり取りをしているイメージ メディエータパターンのイメージ 例えば、タブ型のボタンのUIの実装を考えてみましょう。一つのタブをクリックするとアクティブになり、それまでアクティブだった他のタブがあれば、通常状態に戻る機能が必要になります。 この機能を実装するためにはどうすればよいでしょうか。 単純に考えると、全てのボタンの状態

    【JavaScript】デザインパターンを知ってみる。メディエータ編 | バシャログ。
  • スマートフォンサイトのコーディング Tips あれこれ | バシャログ。

    ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか? <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化(拡大)する機能があります。 読

    スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
  • 【Photoshop】使える!ブラシを集めました。 | バシャログ。

    DJ NOBU 「 Dream into Dream 」がヘビロテのokadaです。 どうぞよろしくお願いします。 今回は、使える!Photoshopブラシを集めました。 よろしくお願いいたします。 追加方法 ダウンロードした.abrファイルをダブルクリックをして追加するか ブラシツールをクリックして、1から3をクリックし、ブラシファイルの読み込みで追加します。 ライティング系 光を表現したい時に使いたいブラシです。 Quantum Brushes Life Brushes Hyper Brushes Abstract 04 Light Beams + Rays Brushes グランジ系 グランジ=汚れた感じを表現したい時に使いたいブラシです。 Grunge Ady's Splatter Brushes 3 Grunge Brushes Free Grunge Textured Phot

    【Photoshop】使える!ブラシを集めました。 | バシャログ。
  • JavaScriptのチルダ演算子を使ってみる | バシャログ。

    huluで特に見る予定のなかった映画を見てしまうminamiです。 JavaScriptにはいろいろな演算子があって便利に使えますが、~(チルダ)は今までほとんど使ってこなかったので使い道を探しました。 チルダは何をするもの? JavaScriptのチルダ演算子はなにをするものでしょうか?調べてみます。 ビット演算子 ビットごとの NOT: オペランドの各ビットを反転します。 なるほど。わからん。かいつまんで説明すると、数値を10進数や16進数ではなく32ビットの集合(0と1)として扱います。2進数ですね。整数をビット反転させると必ず符号を反転して1引いた数になります。 console.log(~-4); // 3 console.log(~-3); // 2 console.log(~-2); // 1 console.log(~-1); // 0 console.log(~0); //

    JavaScriptのチルダ演算子を使ってみる | バシャログ。
  • [PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった | バシャログ。

    iOS6 のマップって不便って騒がれたけど、それほどでもないよね?…って思ってましたが、最近お店探しで使って全然見つからなかったので、さすがにこれは…と思いMapion インストールしました。使いやすいですね… 今日は、だらしない明らかに非効率なjQueryなコードを書くとやんわりと指摘してくれるPhpStorm/WebStormの機能「Inspection: jQuery usage efficiency 」を紹介します。(バージョン5.0以降) New JavaScript inspections and intentions | WebStorm & PhpStorm Blog 非効率なjQueryのコード っていったいどんなコードなのか。具体的には以下のようなコードです。 $("p").addClass('hover'); $("p").toggle(); 実際にはこんなコードを書

    [PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった | バシャログ。
  • Firefox新機能の3Dビューがなんだかすごい | バシャログ。

    花粉に勝った!と思っていたら、そんなことは全然なかったminamiです。 今回は非常に軽い話題です。先日 Firefoxの最新バージョン Firefox 11 がリリースされました。どこが変わったのかな?と思っていたらとんでもない新機能が追加されていました。 流行りの3D 既に以前のバージョンから、Firebugなどのアドオンを使わずにhtmlの要素を調査できる機能が追加されていました。 これはこれでいいけれどやっぱりFirebugを使っちゃうな~と思ってスルーしていたのですが・・・ 右クリックで「要素を調査」 3D!? 飛び出す! なんと、バージョン11から3Dビューのモードが追加されていました!無駄にすごい! 3Dなので当然拡大、縮小、回転もできます。裏からサイトを見ることもできます。 階層が深くなるほど高く表現されるようで、確かに要素の重なり順がわかりにくいサイトを調査するときには一

    Firefox新機能の3Dビューがなんだかすごい | バシャログ。
  • Webデザインのツール、FireworksとPhotoshopは何が違うの?を考えてみた | バシャログ。

    はじめましてバシャログメンバーにデザイナーとして 10月末から加わりましたkojimaです。 わたくし、こちらに所属して先日初めてFireworksCS5触りました! CS3をちょいちょいお直しレベルでしか触ったことなかったので 新鮮!!を通り越してさっぱりわからん! というわけでFireworksとPhotoshopどこがどう違うの?から考えてみました。 PhotoshopでWebデザイン もともとPhotoshopは名前の通り写真屋さん、写真/画像編集ツール。 その繊細な描画力が仇となり、Webのデザインをしようと思うと シェイプが滲みが気になったり、レイヤーが200枚を越えたり。 でもやっぱ絶妙な質感再現しちゃう画像処理すんばらしい! FireworksでWebデザイン もともとMacromediaがWebデザインツールとして開発。 共通パーツ作る時に大助かりなシンボル化機能 1ファ

    Webデザインのツール、FireworksとPhotoshopは何が違うの?を考えてみた | バシャログ。
  • jQueryを使ってiframe要素の中身にアクセスする | バシャログ。

    残暑の蒸し暑さから、涼しさを通り越して、寒いと感じる今日この頃、tanakaです。 今日はjQueryでiframe要素の中にアクセスして、情報を取得したり、改変したりする方法を紹介します。 jQueryは、Webページに対するアクセスを簡潔に表現できるライブラリですが、iframe内の文書にまで、 $('div iframe p') といった感じでアクセスすることはできません。ドキュメントが違うからでしょうか?正しい理由はわかりませんが、同時に2つのページをまたいで処理するのは混乱しそうなのでこれはこれでいいと思います。で、そういったときにアクセスする方法があるのでご紹介します。 [追記 2010/09/27]注意点として、親フレームとiframe内ドキュメントのドメインが異なる場合はアクセスできません。 iframe内のドキュメントにアクセスするにはcontents() $(...).

    jQueryを使ってiframe要素の中身にアクセスする | バシャログ。
  • 1