サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
昨今、よく「jQueryはもう必要ない」という声を聞きます。 しかし、一時期JavaScriptのデファクトスタンダードのライブラリといわれたjQueryに対しての扱いの変化を疑問に思う方もいるでしょう。 そこで、この記事ではそもそもjQueryとは何のために作られたどんなライブラリか、そしてそれがなぜレガシーと呼ばれるようになったのかを学んでいきたいと思います。 間違った事を書いているなどのご指摘は大歓迎です。 なぜ jQuery ができたのか 昔のWeb開発 jQuery ができたのは2006年。 そのころはJavaScriptはWebページに文章を読むのを妨げる動きをつける言語で、HTML5やCSS3、ES2015なんてものはもちろんなく、今ではコード数行でできることが時にはトリッキーな方法も混ぜながら何十行も書く必要がありました。その上、ECMAによって標準化されているとはいえ、ブ
すでにプレイしている人にはご存知のとおりだと思うが、「シャニマス」はBXDが提供するスマートフォン向けブラウザゲームプラットフォーム「enza」で提供されている。 [4bc] 現在、スマートフォンブラウザではWebGLが普及していることから、ネイティブアプリと同等のクオリティで、高い表現品質の実現およびパフォーマンスの維持が十分に可能な時代に突入しているが、その一方で実際にブラウザ上のゲームサービスとしてそれらが実現できるのは未知の領域だった。それに挑戦したのが「シャニマス」というわけだ。 [5bc] 挑戦するにあたって、enzaとそれを取り巻く環境を学び、適切な道具・手法を選択していくことが重要だと話したSmith氏。ここからは実際の流れに沿って、技術・ツール・手法をいかに選択していったかが紹介された。 まずは基本となるゲームエンジンについて。enzaのプロジェクト構想当時、すでにHTM
Web ナチュラリスト フィードを眺めていたら Alex Russell 氏の新作が投稿されていた。 The "Developer Experience" Bait-and-Switch | InfrequentlyNoted本来の趣旨については原文を読んでもらえばいいし、下記はこれを読んだ上で普段の考えを踏まえて脳裏をよぎったポエムである。 我々は複雑性で仕事をしている仕事をしている、もしくはそれでお金を稼いでいる。誰もが。 私は 2012 年頃から Web の、特に Webフロントエンドの複雑性に加担している自覚がある。 Web の専門性が高まることはその技術領域に深淵な価値があることを示唆し、それに携わることの価値を相対的に向上させることができる。 私の活動そのものは些細なものだが、かくして 2018 年現在の Web はかくも複雑になることに成功し、エンジニアリングの名の下
ライセンス表記みるぐらいで深掘りはしてないシャニマスのコード読むか— human eslint --fix (@mizchi) 2018年4月24日シャニマス、pixijs ですね— human eslint --fix (@mizchi) 2018年4月24日 pixi-ae.min.js たぶん after affect のコンバータなんだろうけどググっても引っかかんないな、内製かな— human eslint --fix (@mizchi) 2018年4月24日 s/after-affect/after-effect After effects to pixi.js | CodeSeek なら見つかったが、該当のライブラリ名で探してるが見つからず パーティクルはこれ https://t.co/NtIqPBBq7n— human eslint --fix (@mizchi) 201
Webサイトをコーディングするにあたって必ず必要になる技術の一つに、「ロールオーバー表現」があります。 「ロールオーバー表現」とは主にリンク要素にマウスポインタを載せた際に、色や画像等が切り替わる表現のことです。 「ロールオーバー」に似た表現で「マウスオーバー」「オンマウス」「ホバー」といった言い方があります。 どれも同じ意味で使われることがありますが、厳密には「ロールオーバー」は切り替わる動作そのものを指し、「マウスオーバー」「オンマウス」「ホバー」はマウスポインタが何かに乗った状態のことを指します。 今や画像のロールオーバーは、グローバルナビゲーションやボタン等Webサイトを構築する上で必ず使用すると言っても過言ではない技術ですが、実装方法がいくつか存在するため、どの方法で実装すればいいのか迷うことがあるかと思います。 また、普段使っている方法が果たしてベストなのか？疑問に思いながらコ
世界的猛威を奮ったTwitterマウスオーバー・バグはどう広まった？2010.09.22 10:305,502 satomi これは今朝世界中を席巻したTwitterバグにやられたブラウン元英首相夫人のTwitter公式サイト。巨大な英文字｢h｣が出て、日本のポルノサイトに自動リンクしてます...なんとまあ...。 ツイッター公式Webでリンクをマウスオーバーすると、フォロワーにスパムやポルノがリツイート（RT）されちゃう、この｢マウスオーバーバグ｣。いやあ、ひどかったひどかった。世界中にみるみる野火のように広まって一時はどうなることかと思いましたよ。 サードパーティーのアプリ使ってる人は大丈夫です（バグったRTもそっちで削除できます）が、twitter.com開いてこんな状態なっててビックリこいた人も多いんじゃ？ これはTwitterのサイトにあるクロス・サイト・スクリプティング（XSS
【お知らせ】 9 月 21 日午後 11 時頃、公式サイドから脆弱性が修正されたとの発表がありました。 はじめに 2010 年 9 月 21 日、ツイッターで深刻な脆弱性(ぜいじゃくせい)が発見され、被害が広がっています。これが何なのか、簡単に説明します。JavaScript とマウスオーバーイベント まず、下のピンク色の枠内にマウスカーソルをすべらせてみてください。 この枠の中をマウスカーソルで触って! どうでしたか。「触ってくれてありがとう!」というメッセージが表示されましたね。 このように、ウェブページには簡単なプログラムを仕込むことができます。どのウェブブラウザー(皆さんがウェブを見る時に使うソフトウェア。インターネットエクスプローラーなど)でも共通で使える「JavaScript (ジャバスクリプト)」という言語が一般的に使われています。 今回は、ページ上のある部分にマウスカーソ
性懲りも無くニコニコネタです。iPadでも結局Flashが搭載されなかったこともあって、最近Flashの代替手段としてHTML5がやけに押されているので、ものは試しでニコニコ動画のFlashプレイヤーをHTML5で構成したプレイヤーに置き換えるbookmarkletを作ってみました。iPhone/iPadのvideoタグの動作がマシになってれば、iPhone/iPad上でも動くかもってな期待込みで。 使い方は、下記のbookmarkletをニコニコ動画の再生ページ(http;//www.nicovideo.jp/watch/*)上で実行するだけです。実行すると標準のFlash製プレイヤーを、HTML5+javascriptで構成したプレイヤーに置き換えます。javascript:(function(){var e=document.createElement("script");e.s
Google I/Oで大きく取り上げられ、一躍注目の技術に躍り出たHTML5。Google Developer Day 2009でも、「HTML5により拓かれる次世代Web」という田村健人氏によるセッションは大盛況で、椅子が足りずに床に座り込んで聴講する人がかなりの数に上った。 筆者も同セッションに参加し、HTML5の新機能に関する簡潔でまとまった知識を得ることができた。本稿では田村氏のセッション内容を元に、HTML5の全体像をコンパクトにお伝えしよう。HTML5とは?グーグル ソフトウェアエンジニアの田村健人氏HTML5は、言うまでもなくHTMLの最新バージョンである。現行のバージョンであるHTML4も、決して小さな仕様ではなかったにもかかわらず、そこにWebアプリケーション向けの機能が大幅に強化された。 あまりに仕様が巨大すぎるため、現在の規格は以下の4つに分けられている。 H
さまざまなプログラミング言語がありますが、プログラミングそのものに触れてみたいと思うならJavaScriptをお勧めします。Webブラウザとメモ帳があれば、本格的なプログラミングに挑戦できるのです（編集部） プログラミングを学びたいと思ったら 皆さんは、JavaScriptというと何を思い浮かべるでしょうか。 Webで動的なユーザーインターフェイスを実現するための技術でしょうか。それとも、オブジェクト指向のスクリプティング言語でしょうか。JavaScriptというキーワードを聞いたことがある程度という方もいるでしょう。JavaScriptは現在多くのWebブラウザに搭載され、さまざまな場面でWebの中核技術を支えているスクリプティング言語です。本連載は、プログラミングを初めて学ぶ人を対象にしたJavaScriptの入門記事です。特に次のような方のために分かりやすく解説を行っていきます。
PhotoShareをiPhone向けに提供して早くも一年になるが、もっとも良く投げかけられる質問は「PhotoShareはAndroidとかの他のプラットフォームに移植しないの？」というものだ。 少し前までは、「まだiPhone以外のビジネスが十分に大きくないから今はまだ早い」、「iPhone上でやるべきことはまだ沢山あるから」、などと答えて来たのだが、最近は少し見方が変わってきた。 今の勢いでHTML5が進化・浸透してくれるのであれば、わざわざ移植コストをかけてAndroidやWindows Mobile向けにネーティブ・アプリを開発するよりは、少なくともUIの部分をすべてHTML+Javascriptにまかせたアーキテクチャでのインタラクティブなアプリの開発というのも十分に可能性があるように思えてきたのだ。 この「HTML+Javascriptですべて出来るじゃん」という発想は、そも
iBox is a lightweight script that lets you overlay images and documents in a small dialog without a page reload.It's built to be easy to install and use, while offering great flexibility. The quick start shows example code and explains how to useit.TopImages iBox easily supports the standard overlay of images, in many sizes, and will automatically scale down the window if the browser's viewpane
メールマガジン「目指せ！ウェブマスター」JavaScript講座の原稿です。 現在、中断されてしまっている状態です。未掲載原稿も含めて、ここに掲載してあります。 一部内容が古くなっていたり誤字脱字がありますが、修正できていません。 これは問題あり、という場合にはopenspc@po.shiojiri.ne.jpまでメールをください。 最終更新日：2005年2月17日 第 １回 「JavaScriptって？」 第 ２回 「JavaScriptを書いてみよう」 第 ３回 「JavaScriptを書く時の約束ごと」 第 ４回 「メッセージを表示」 第 ５回 「"を表示」 第 ６回 「文書内にメッセージを表示」 第 ７回 「繰り返し処理（１）」 第 ８回 「繰り返し処理（２）」 第 ９回 「四則演算」 第１０回 「最適化」 第１１回 「ランダムに文字を表示する」 第１２回 「条件分岐、if..el
はてなブックマーク（以下「はてブ」）がリニューアルされ、ブラウザからブックマークレットでブックマーク登録（以下「ブクマ登録」）しようとすると、図1の画面が現れるようになった。「こちらから再設定をお願いします」と指示されているが、この指示に従ってはいけない。ここで提供されている新型ブックマークレットは使ってはいけない。（この指示には従わなくてもブクマ登録はできる。） 新型ブックマークレットを使用すると図2の画面となる。ブクマ登録しようとしているWebサイト（通常、はてな以外のサイト）上に、はてブの画面のウィンドウが現れている。これは、Ajaxと共に近年よく使われるようになった「ページ内JavaScriptウィンドウ」である。（ポップアップウィンドウとは違い、ウィンドウをドラッグしてもブラウザの外に出すことはできず、あくまでも表示中のページ上のコンテンツであることがわかる。）
20日に発表されたGoogleの新しいWebAPI、Google AJAX LanguageAPIは、誰でも簡単に言語の翻訳を行えるようにするJavaScriptAPIだ。同APIを使うと、JavaScript文字列に対して「日本語←→英語」や「中国語←→英語」と言った変換を簡単に行えるのみならず、文字列が何語で書かれているかを自動判別することもできる。 同APIのパワーがどれほどのものかというと、以下のような翻訳サイトを10分足らずで作れてしまったほどだ(ソースコードは次ページで解説)。 非常にシンプルなAPI(メソッド2つしかない!)にも関わらず、そのパワーがあまりに凄まじすぎる。この興奮をぜひ皆さんにもお伝えしたいと思う。 ということで、さっそくLanguageAPIの使い方を学んでいこう。
Overview Lightbox is asimple, unobtrusive script used to overlay images on the current page.It's a snap to setup and works on all modern browsers. What's New in Version 2 Image Sets: group related images and navigate through them with ease Visual Effects: fancy pantstransitions Backwards Compatibility: yes! How to Use Part 1 - Setup Lightbox 2 uses the Prototype Framework and Scriptaculous Effe
ログインが必要なサイトの多くは、IDとパスワードを入力するフォームが設置されています。 通常、このようなフォーム内のパスワード部分に入力した文字は盗み見防止のため、「********」のようなアスタリスクになって文字が隠されるようになっていますが、しばしば、この入力したパスワードを確認したい状況になる場合も少なくありません。 このようなケースに役立つハックの紹介。 以下のJavaScriptをアドレスバーに入力すると、次のようなダイアログ内にパスワードが表示されます。javascript:(function(){var s,F,j,f,i; s = ""; F = document.forms; for(j=0; j<F.length; ++j) { f = F[j]; for (i=0; i<f.length; ++i) { if (f[i].type.toLowerCase() ==
![アスタリスクで隠されたパスワードを確認する方法 [K'conf]](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f1a87d5887c466cccb0b849babb90931bdfa1b8c8%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttp%253A%252F%252Fkenz0.s201.xrea.com%252Fimage%252Fweblog%252F071121%252F2.gif&f=jpg&w=240)
※スペックが低いマシンや一部ブラウザだと固まったり落ちる可能性がありますjavascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://rails2u.com/misc/hatesuta.js";document.body.appendChild(s)})();を適当なページでアドレスバーに入れて実行！すると…。スターつきのblog のトップページなんかだと最後にカウンターも出てカウンターとしても使えるよ☆ ソースは CodeRepos で公開してます。MIT ライセンスとしてご自由にどうぞ。 http://coderepos.org/share/browser/lang/actionscript/hatesuta
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fa9717624309e36a795026e1b70982163687ccca2%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fblog.webcreativepark.net%252Ficon_200x200.png&f=jpg&w=240)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
