JavaScript フレームワーク - ペパボテックブログ
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 (2) SPA（シングルページアプリケーション） 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う？ どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ
ゲーム感覚でプログラミングが学べる15サイト - paiza開発日誌
Photo by Blake Patterson こんにちは。谷口です。 初心者がプログラミングの勉強を始めるにあたって、独学でどう勉強したらいいか分からないという方も多いと思います。また、プログラミング言語の本を読んでみたけど難しくて…という方や、環境構築が大変で挫折したという方もいるのではないでしょうか。 今回は、そういった初心者だけど楽しく勉強したい！という方のために、ゲーム感覚で楽しくプログラミング学習ができるサイトを紹介していきます。 現在paizaではプログラミング×異世界ファンタジーRPG『ロジックサマナー～閃光の召喚プログラマ』を公開しています！ 主人公はひょんなことから異世界に迷い込んだITエンジニア。異世界では、なんとプログラミングしたコードが召喚獣を呼び出すための詠唱魔法だった！？召喚魔法（※プログラミング）が使える主人公は急に世界を救う伝説の召喚士として盛大に歓迎さ
D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう - Tech-Sketch
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィックスやデータビジュアライゼーションといったキーワードにも注目が集まりつつありますね。 本記事ではD3.jsというJavaScriptのライブラリを利用し、このブログ(Teck-Sketch)のはてなブックマーク数や、世界の国別の人口の比較を視覚的に分かりやすく表現していきたいと思います。 インフォグラフィックス？データビジュアライゼーション？ キーワードとしてインフォグラフィックスとデータビ
ユーザーが2～3カラムや800pxか1000pxか等を動的に変更できるすごいJavaScript*ホームページを作る人のネタ帳
これは面白すごい。 なかなかさわり心地の良い動き。 しかも無料でダウンロードまでできるし、使えるし、なんともありがたい一品に、思わず勢いで記事にしてしまいました。 まずは以下のサンプルを触ってみると感動しますよ！（たぶん） サンプルデモは以下に 動的なhtmlショーケース 対応しているブラウザの幅も広いです。 # nternet Explorer 6, 7 # Firefox 1.5 + # Opera 9.1 + # Netscape 8.1 + # Safari 3 変更できる内容として # 右、左のサイドメニューの有り無し # 横幅800px、1000px、100% # フォントサイズ 等が変更できます。 もしもダウンロードするなら、以下のサイトに説明（英語）とダウンロードボタンがありますので是非。 Liquid Javascript Grid Layout
JavaScriptでSLを走らせる「SL.JS」を作りました | Creazy!
開発に関わっていて、UNIX（Linux）を触った事のある人は「SLコマンド」をご存知の方が多いのではないでしょうか？ lsを間違えてslと打つとこんなのが煙を吹きながら走る sl(1) コマンドを作りました． via: 豊田正史とslコマンド (Masashi Toyoda and SL command) ファイル一覧を出力する「ls」をtypoして「sl」と打ってしまうと、文字通りSLが画面を走り抜けるというすばらしくくだらない仕組みなのだ。いわゆる、ジョークコマンドの一つとしてとても有名で、多くの開発者の気持ちを和らげた（腰を砕いた）ことでしょう。 さて、そんなくだらないジョークコマンドを懐かしんでいると、JavaScriptでSLを動かしてみたくなってしまったので作ってみました。 ・SL.JS ブックマークレット方式にしてあるので、上のSL.JSリンクをブックマークして下さい。 ど
カスタマイズできる多機能LightBox「Lightview」:phpspot開発日誌
Lightview Lightview was built to change the way you overlay images on a website. カスタマイズできる多機能LightBox「Lightview」。 次のように、背景色を赤にカスタマイズしたりできるLightBoxの登場です。 背景色のほか、角丸の度合いや、灰色背景の描画ON/OFFとその透明度、zIndex、表示の際のエフェクトなどをカスタマイズ可能です。 インストールは、必要なCSS/JSを読み込んだ後、<img> タグの rel 属性に lightview を設定するだけ。 (例： <a href='image.jpg' rel='lightview'>My image<a/> ) スライドショーの機能なんかも実装されています。 関連エントリ LightBox風に角丸で可愛く画像をポップアップしてくれる「F
CSS Text Wrapper
The CSS Text Wrapper allows you to generate HTML and CSS to wrap text on your website into any shape.Examples Not Just Rectangles Anymore The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
Prototype.js を利用して作られたJavaScriptライブラリまとめサイト「Scripteka」:phpspot開発日誌
Scripteka :: Prototype extensions library Prototype.js (+Script.aculo.us)を利用して作られたJavaScriptライブラリまとめサイト「Scripteka」 例えば、次のようなPrototype.jsを使ったライブラリが紹介されています。 アコーディオン カラーピッカー ツールチップヒント 日付入力補助ウィジェット ライブラリ探しのヒントに。 関連エントリ prototype.jsベースのリアルタイムバリデートJSライブラリ「JSValidate」 Prototype.jsベースのUIライブラリ「Prototype UI」 prototype.js逆引きサンプル集 - JavaScriptist
『10のJavaScript、Axaxタブメニュー』他、タブまとめ*ホームページを作る人のネタ帳
タブメニューなにか良いのないかなと思って探していたら、10 Javascript Ajax Tabsというエントリが後々使えそうなのでご紹介しておきます。 タブに関するまとめは以下で。 10 Javascript Ajax Tabs とりあえず10のJavaScriptAjaxタブメニューエントリはこちらから。 エントリの中でも、以下のメニューが面白かったですね。 口で説明するのは難しいですが、タブをクリックすると上下にスライドしながら違う文章を持ってきます。 以下からサンプル＆ダウンロード可能 タブメニューに関して 最近仕事のほうも忙しくなり、なかなか更新できないでいます。 そんなわけで、今回のようにタブを紹介するときにまとめて関連する記事を紹介する率も高くなってきました。 ピンポイント紹介ではなくなってきていますが、ご愛嬌と言う事でお願いします。 [JS]スムーズに切り替わるタブ型コン
[JS]スムーズに切り替わるタブ型コンテンツ -Coda-Slider 1.1
Coda-Slider 1.1は、先日紹介したCoda-Slider 1.0からバージョンアップをした、タブ型のコンテンツをスムーズに移動させて切り替えるスクリプトです。 Coda-Slider 1.1 Coda-Slider 1.1 デモ Coda-SliderはjQueryのプラグインで、1.1の主な改良点は下記のようになっています。 jQuery 1.2への対応 IE6, 7でタブを早くクリックした場合のバグ スクリプトオフへの対応(<noscript>) YouTubeなどの動画のバグ preloaderの採用 タブと矢印以外にもスライドするリンクを設置可能 参考： スムーズに切り替わるタブ型コンテンツ -Coda-Slider
クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」:phpspot開発日誌
Image Menu クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」。 メニューにカーソルを合わせると、カーソル部分がアニメーションしながら開くメニューを実装できます。。 画像を変えれば、よりクールなメニューを作れそうですね。 必要なJSライブラリ,CSSをインクルードした後、次のようなコードで簡単に初期化できる模様。 <h2>Example:</h2> <div id="kwick"> <ul class="kwicks"> <li class="kwick opt1"><span>Lanscapes</span></li> <li class="kwick opt2"><span>People</span></li> <li class="kwick opt3"><span>Nature</span></li> <li class="kwi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ハウスクリーニングならベアーズ
無料でLINEやSkypeのようなリアルタイムアプリが簡単に作れるSkyWay
https://design-spice.com/2012/06/13/responsive-web-design-image/
東京渋谷 “HTML5入門＆jQuery” 勉強会(5/26)の資料を公開します | tonowp
Site Under Maintenance
文字カウント
これはかっこいいぞ・・・スライドショーに激しく使えるjQuery用プラグイン『jQuery Cycle Plugin』 | i d e a * i d e a
ウェブでかっこいいグラフを描くためのライブラリやらテクニックやらのまとめ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
