Coda-Sliderは、jQueryのプラグインで、タブ型のコンテンツをスムーズに移動させて切り替えるスクリプトです。 Introducing Coda-Slider Coda-Sliderは、slideViewer(スムーズに移動させて画像を切り替えるスクリプト)を元に作成したもの(上記ブログより)で、動き方はほとんど同じで、快適に動作します。 Coda-Slider Demo
[JS]スムーズに切り替わるタブ型コンテンツ -Coda-Slider
Coda-Sliderは、jQueryのプラグインで、タブ型のコンテンツをスムーズに移動させて切り替えるスクリプトです。 Introducing Coda-Slider Coda-Sliderは、slideViewer(スムーズに移動させて画像を切り替えるスクリプト)を元に作成したもの(上記ブログより)で、動き方はほとんど同じで、快適に動作します。 Coda-Slider Demo
JavaScript の不思議な面白さ - 最終回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog これまで七回に渡って連載を続けてきました。 今回が最終回です。 ここまでが、私の知る JavaScript 開発の手法変化の歴史です。 最近では多くのフレームワークやライブラリが登場し、最近ではこうしたライブラリを利用した開発が一般的になりつつあります。 今回は、ここまでの手法を元にフレームワークを完成させたいと思います。 ＊ フレームワークといっても今回作るのはごく小規模なものです。 大規模に利用する場合にはここにさまざまな機能を付け加えていく必要がありますが、ここまででも必要最低限の機能を備え、HTML を効率よく構築することに特化したフレームワークとなっています。 前回からの変更点は以下の通り ・クラスの継承を利用 ・x-i
モダンJavaScriptとは何か - VTuberになったプログラマーの魂の残滓
JavaScriptは悪くない - 0xFF この辺の記事を読みながら改めてモダンJavaScriptについて再考する時期なのかなー、と思い考えてみました。 考えられる要素 Ajax XMLHttpRequest クロスブラウザ DOM Event パフォーマンスチューニング 高速化 ファイルサイズ テスト Firebug IE オブジェクト指向 プロトタイプベース ユーザビリティ JavaScriptオフ HTML+CSS+JavaScript 今風の書き方 オブジェクト 関数 スコープ クロージャ 定番ライブラリ jQuery prototype.js Yahoo UI Library Ext.JS とりあえずは 上記のカテゴリの中で細かい部分についてはエントリにおこしてみたいなー、と考えてます。 突っ込み大歓迎！っていうスタンスで改めてノウハウの蓄積ができたらいいなー、と。 Java
JavaScript の不思議な面白さ - 第六回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog JavaScript フレームワークを作ろう 私はフレームワークを、ある特定のコーディングルールを実現する為の手法ともとらえています。 それがなんであれ、世にあるフレームワークには何らかのコーディングルールを満たした状態を容易に維持しながら効率よく開発する為の基盤を提供していると思います。 今回からはフレームワークを実際に作ってみましょう。 題材としてはもちろん、前回まで利用してきたプログラムを使います。 ＊ 前回のプログラムをご覧になった方で勘の良い方はここから「HTML 文字列の効率よい組み立て方」に話の主軸が移ってくることにお気づきだと思います。 まず対象のコードをじっと見つめてみましょう。 var HTMLParts =
JavaScript の不思議な面白さ - 第五回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 「第三回」「第四回」とプログラムの分離とそれによってもたらされる動作速度の変化の検証をおこなってきました。今回は速度を追及する為、多少の犠牲はいとわず速度優先でライブラリ化を進めることとしてみます。 今回からは、プログラミング技術の話にお付き合いください。 再度になりますが、ライブラリ化の目的が、 ・ほかの開発者がライブラリを利用することで容易に開発できる ・ライブラリ開発者が独立してプログラムの改善を行える といった開発効率の向上が目的であることを忘れないでください。 最高速を目指すのであれば「第二回」で示した解答例でよいのです。 前回のルールに沿った形でライブラリ化を行います。 解答例（ライブラリ化） 今回は柔軟な機能拡張の為
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
YUI Testを使ったJavaScriptユニットテストのすすめ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、検索事業部の角田です。 私が担当しているプロジェクトではPHPUnitとSeleniumを使ってテストを行っています。そして、最近YUI TestというJavaScriptによるユニットテストライブラリを使い始め、JavaScriptのユニットテストがとてもいい感じに思えてきたのでご紹介します。 YUI Testは、Yahoo! Developer Networkにて公開されているYahoo! UI Libraryの数多くあるコンポーネントの中の一つです。その名の通り、JavaScriptのユニットテストを行うライブラリです。JavaによるJUnitやPHPによるPHPUnitを使ったことのある方であれば、すぐに使い方
ドラッグで並べ替え可能なグリッドを実現する「draggable_grid.js」を作りました - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 本日は、久しぶりに JavaScript のライブラリを公開します。よく、画像ギャラリー等でマウスのドラッグ＆ドロップで画像の並べ替えができるものがありますが、そんな UI を簡単に実現できるものを作ってみました。以前に公開してご好評をいただいた DragResize.js のノウハウを引き継いでおり、以下の特徴があります。 JavaScript の呼び出しひとつ
JavaScript の不思議な面白さ - 第二回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 前回の記事「JavaScript の不思議な面白さ」はお楽しみいただけたでしょうか？ 一例として正攻法で突入していった例については賛否両論あるようです。確かに結果としてできたプログラムは見た目にも美しくなく、目を覆いたくなるばかりでした。 今回は解答編として JavaScript ならではといえる "奇妙な" 例をひとつお見せしたいと思います。ヒントは前回もちらっとお話させていただいたものです。 コード改善に向かって その前に前回の問題はなんだったのかをプログラマ視点で見ていきます。 コードが美しくないと感じるのはなぜでしょうか？ 改善するならどうすればよいのでしょうか？ ひとつの方法は "隠す" ことです。関数化・クラス化・ライ
FlashのSharedObjectをJavaScriptから使用できる「jsSO」:phpspot開発日誌
jsSO - Flash Shared Objects in Javascript - Pro-Web FlashのSharedObjectをJavaScriptから使用できる「jsSO」 Shared Object は Flash Communication Server を通じて接続されている複数のムービーやオブジェクト間で、リアルタイムにデータを共有できる非常に便利なオブジェクトのことです（参照） つまり、マルチプレイヤーでの通信が容易になるもので、これをJavaScriptから使えるようにしたものがjsSO。 チャットのデモを見れば、その便利さが分かるはず。 ２つブラウザを開いて、発言してリアルタイム性を確認できます。 jsSOで比較的容易に実現できるみたいです。 jQueryベースで、Flashムービー自体は触る必要がないので、JSの知識があればフロントエンドはなんとかなりそう。
Pure JavaScript Template Engine その弐 - mixi engineer blog
どうも、こんにちは。hirokiです。前回は、HTML::Template::ProのJavaScript実装を紹介させていただきました。今回はその実装部においてのちょっとした工夫についてと、Webフロントエンドのパフォーマンスチューニングについて簡単にまとめさせていただきます。 正規表現の話 通常、テキストベースのDSL評価系を作成する際にはyacc/lexなどで文法記述を行うのが定石なんですが、 シンプルな文法であること 構文木の評価からコードジェネレートに方向性を転換した テキストマッチングの回数や高速化のための制御がしやすい などの理由から、HTML Template(JavaScript)では正規表現ベースの文法解釈を行っています。（ HTML::Template::Proのyacc文法ファイルをそのまま使えば記述は楽だったのですが...）以下に実際に利用している正規表現を示しま
Pure JavaScript Template Engine - mixi engineer blog
はじめましてhirokiです。こんにちは。新卒で弊社に入って一年が経過しようとしているので、そろそろエンジニアブロガーの仲間入りをしてみようかと思っています。 今回はJavaScriptのお話です。ハードボイルドなバックエンド側技術のご紹介が多い当ブログですが、スイーツ（笑）なフロントエンド技術もおもしろいんだよ！ということをアピってやろうという魂胆です＞＜。 HTML.Template(JavaScript) 弊社では、サーバサイドによるHTMLの出力テンプレートエンジンにCPANモジュールであるHTML::Template::Proを使用しています。今回はそのJavaScript実装をオープンソースとして開発しましたので、紹介をさせていただきます。 HTML::Templateは貧弱で、冗長で、洗練されていないシンタックスでお馴染みのテンプレートエンジンですが、高速で必要以上のロジック
jQueryでiCalライクなカレンダーを作るチュートリアル – creamu
jQueryでクールなカレンダーを作りたい。 そんなときにおすすめなのが、『Create astonishing iCal-like calendars with jQuery』。jQueryでiCalライクなカレンダーを作るチュートリアルだ。 このエントリーでは、↑のようなカレンダーの作り方が紹介されている。マウスオーバーするとふわっとポップアップするツールチップテキストつきだ。 ソースファイルもダウンロードできるので見てみてほしい。 デモは以下から。 View the online Demo! jQueryでiCalライクなカレンダーを作るチュートリアル、チェックして参考にしてみてはいかがだろうか。 Create astonishing iCal-like calendars with jQuery 天気がよくて気持ちいいですねー。 先日買った雑誌を読んでいます。「Casa」はまた紙面
ページ作りに欠かせない便利なコントロールがまとまったページ:phpspot開発日誌
30 Essential Controls ページ作りに欠かせない便利なコントロールがまとまったページが紹介されています。 自動キーワードサジェスト、カルーセル、グラフ、パネル、アコーディオンといった３０種類にもわたる基本的なコントロール、それぞれにおいて、何を使えば実装できるのか？をまとめられていて便利です。 例えば、自動キーワードサジェストで言えば、 Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, IT Mill, Backbase, Silverlight で使えるよ、といったことがまとめられてます。 FlexやSilverlightといった、JavaScript以外の要素も入っている点に注意ですが、この早見表で、これとこ
とても洗練されたＵＩの日付ピッカー＆カレンダー集:phpspot開発日誌
Beautiful datepickers and calendars for web developers とても洗練されたＵＩの日付ピッカー＆カレンダー集のエントリが紹介されていましたのでピックアップ。 日付入力も便利だけでなく、クールに行えます。 datepicker シンプルだけどクールなカレンダー jquery datepicker From〜Toが指定できるカレンダー Calendar 立体的でクールなＵＩ jPint iPhoneっぽいＵＩ 全部見る たくさんありすぎて迷いますが、サイトのＵＩや、用途に応じて使い分ければ便利そうですね。 関連エントリ 超クールなカレンダー型日付入力補助用JSライブラリ カレンダー、バルーンなどWEBアプリに使えるハイクオリティアイコンセット「pinvoke」 日付入力を便利にするカレンダー/日付ピッカー集
テキストエリアがクリックされたら全選択！ | _level0 - KAYAC Front Engineer Blog
冬休みと三連休で沢山滑れてやっと冬を実感したKnuckleです。 遅くなりましたが、皆様、あけました、おめでとう！ 今年も小ネタ書いていきます！ 2009年もよろしくお願いします。 2009年お初の記事は、よくある「テキストエリアがクリックされた時に全選択」です。ちょっとはまったので書いておきます。 普通に選択されたイベントをとって、全選択！って出来ると思ったんですが、できない... フォーカスを受け取ったイベントハンドラ内ではどーも効かない様です。 エラーはでないんですけど。 で、タイマーつかってタイミングをずらしてあげるとできましたー！ var myTimer:Timer = new Timer(2, 1); myTimer.addEventListener(TimerEvent.TIMER, timerHandler); _txt.addEventListener(FocusEven
oinume journal
表題の通り、技術スタックがほぼ同じプロダクト群のリポジトリを1つのMonorepoにまとめてみたという雑な記録。 元々は以下のようなPolyrepo構造になっていた。 product-a (repository) backend web product-b (repository) backend native web これを以下のような構成に移行した。 products (repository) apps product-a backend web product-b backend native web 大まかには以下のような流れで移行する。 移行元のリポジトリで移行用ブランチを作成する 移行先のリポジトリで移行用ブランチを作成し、1.の移行用ブランチをmergeする では実際に移行してみよう。product-aのリポジトリで以下のコマンドを実行する。 mkdir -p apps/pr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.8-p.info/2009/03/textfield-js
http://www.machu.jp/posts/20080113/p01/
Site Under Maintenance
