JSONエディタ http://braincast.nl/samples/jsoneditor/ http://jsoneditor.net/ JSONパーサ http://json.parser.online.fr/ コピペしたらツリーになって確認できます。確認するだけのことが多いので、あまり編集することありませんが、どれも使い勝手はかわりませんね。

続きを読む

js 1 2 3 4 5 6 7 8 9 10 11 12 13 <script src="jquery-1.3.2.min.js"></script> <script> (function(){ if(typeof jQuery == 'undefined'){ return; } jQuery.noConflict(); jQuery(function($){ // ここに処理を記述 // $==jQueryで利用可能 }); })(); </script> このソースコードをペッと貼り付けて、実際に書き始める場所は10行目からです。この形が定着しているのは、いくつかの理由があります。 functionを大きく、( ) 括弧で括っているのは関数や変数をローカル化するため。 5行目のreturnは、jQueryのライブラリが何らかのエラーがあったときに、JavaScriptエラーを出さないようにするため。 8行目のnoConflictはprototype.jsなどの複数ライブラリを使用する際に、「$」を初期化するため。 9行目の引数$にすることによって、10行目以降に$==jQueryとして使うことができる

続きを読む

[] ここのところFlashよりもJavaScriptを触る機会が増えてきました。iPhone用Safariでメニューが動くページを作ったり、HTML5でいろんなことを表現するのにJavaScriptは必須スキルになってくるとおもいます。日本のサンプルサイトを見ていても、なんかこうスマートさやかっこよさが足りないような気がするんですが、さすが海外のサイトは装飾のアイコンまでもかっこよかったです。 今回は、jQueryでカッコイイコンテンツがいっぱいサンプルとして紹介されている海外サイトjQuery TOOLSを紹介します。そのままコピペでも十分つかえそうです。 Tabs demo 13 samples タブのデモだけでも13個あります。 このタブの看板デザインがめっちゃいけてますねー! ここのサイトのすばらしいところは、CSS Spriteで作られていて、かつ、その画像まで公開しちゃってるところです。ちょー太っ腹! 他のタブのサンプルは、写真のギャラリーに使えそうなモノもあります。細かいドロップシャドウがモダンサイトっぽくていいですね!! Tooltips demo 7 samples 画像や入力フォームに対して注意を促すツールチップ 特にこの7番目のサンプルはとても好印象を持ちました。下からイージングしながらフェードインしてくる動き、マウスを横に動かしていくだけでも気持ちがいいですねー。 更に驚いたのは、ツールチップがウィンドウの上部に隠れてしまう場合は下へ吹き出しが出てきます。この親切さはたまらないですね! Overlay demo 8 samples ウィンドウ内にポップアップして画像を大きく見せる いわゆるLight Boxってやつですね。その呼び方自体がスタンダードみたいな呼ばれかたをしているのかもしれませんが、Overlayも基本動作はかわりません。 オーバーレイする位置やアニメーションや、クールな出方をするサンプルなどあります。8個もあるんで、好みの動きが見つかるかもしれませんね。 Scrollable demo 11 samples 横にうごく裏にたくさん見せる表現 写真のスライドショーなんかのメニューでよくみる表現です。自動で再生させるボタンがあったり、マウスホイールで切り替えることができるサンプルがあります。操作感が重要なUIなので、11個のなかからいいのが見つかると思います。ほんと簡単なソースコードで導入できるんですねー。

続きを読む

プロフィール画像

こたぽん

JavaScript, React, NextJS, VueJS, NuxtJS, AWS, Firebase, Git, ビールと生ハムが好き

Rakuten, Inc. CyberAgent, Inc.