IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.
こんにちは、2011年度新卒エンジニアの夏目です!突然ですがみなさんJavaScript書いてますか? 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ! 毛根にはこれからもがんばってほしい!いつだって頭を温かいまなざしで見守
Firefox web browser - Faster, more secure & customizable Mozilla開発者ブログに「speak.js」に関する興味深い記事が掲載された。 「speak.js」はテキストの読み上げを実現するJavaScriptライブラリ。JavaScriptとHTML5のaudio機能のみを使って動作しており、ブラウザにおける汎用的な読み上げ機能として注目される。ご存じない方は、「speak.js」のデモを試すと理解しやすい。現段階でこのデモが正しく動作するのはFirefoxだけなので、実行する場合にはFirefoxからアクセスする必要がある(Chromeでも動作するものの、ローディングに長い時間がかかる)。 「speak.js」が興味深いのは、フルスクラッチから開発されたライブラリではなく、C++で実装されたスピーチシンセサイザ「eSpeak」を
スマートフォンを含む最近のブラウザでは、戻るボタンで前のページに戻った際に、JavaScriptも含めて前回の最後の状態を復元します(Back Forward Cacheと呼ばれます)。これはとても便利なのですが、ページを作成する立場からすれば、余計なお世話であることもあります。 Back Forward Cacheの無効化はとても簡単に実現できます。ページの中にonunloadを書くだけです。 <!DOCTYPE html> <html><head><title>onunload test</title> <script> window.onunload = function() {}; window.onload = function() { var count = 0; var loop = function() { document.getElementById("num").in
外部CSSと外部JavaScriptで表示速度の低下を防ぐにはHTML内でCSSファイルやJavaScriptファイルを読み込ませる場合、記述の仕方によっては読込速度や表示速度が遅くなることがあります。ウェブページができるだけ速く表示されるよう、外部ファイルを読み込む記述にも注意してみましょう。CSSファイルやJavaScriptファイルを読み込む際に、読込速度や表示速度の低下を防ぐ記述方法をご紹介致します。 独立したCSSファイルやJavaScriptファイルを読み込むと、全体の表示速度が低下する? ウェブページでCSSやJavaScriptを使う際、それらを独立したファイルに記述しておき、HTMLから呼び出す方法がよく使われます。複数のページで共通するCSSやJavaScriptがあるなら、単独のファイルに独立させておく方がメンテナンスしやすくなりますし、(一度読み込まれたファイルはブ
色々スクリプトを設置してヘッダーがJavaScriptやCSSの外部ファイルでいっぱいになっていることはありませんか?外部ファイルが多くなればもちろん表示速度への影響も大きくなります。 サイトの表示速度はGoogleの検索順位にも反映されますし、そもそも訪問者のことを考えると少しでも表示速度は速い方がいいですね。 JavaScriptやCSSファイルを軽量化する 空白や改行をなくしてJavaScriptやCSSファイルを軽量化します。簡単に圧縮してくれるオンラインツールがたくさんありますが個人的なおすすめはこちら。 Compress javascript and css シンプルで使いやすいと思います。「basic compress」は空白のみ、「powerful compress」は改行も圧縮してくれます。 dean.edwards.name こちらも、同じように圧縮してくれます。軽量化
Node.jsとは何か、開発者ライアン・ダール氏が語る(後編)~ 複数コネクションの並列処理とデバッグ いま注目されているサーバサイドJavaScriptの火付け役となったNode.js。その開発者であるライアン・ダール(Ryan Dahl)氏自身がNode.jsを紹介した講演「Introduction to Node.js with Ryan Dahl 」のビデオが公開されています。 この講演は、サンフランシスコのPHP開発者の集まりであるThe SF PHP Meetup Groupが2月にダール氏を招待して行われたもの。 そのため、Node.jsを知らないデベロッパーに向けて、Node.jsがどのような特徴を持つプログラミング言語なのか、分かりやすく解説しています。内容を紹介しましょう。 (本記事は「Node.jsとは何か、開発者ライアン・ダール氏が語る(前編)~ノンブロッキングとは
いま注目されているサーバサイドJavaScriptの火付け役となったNode.js。その開発者であるライアン・ダール(Ryan Dahl)氏自身がNode.jsを紹介した講演「Introduction to Node.js with Ryan Dahl 」のビデオが公開されています。 この講演は、サンフランシスコのPHP開発者の集まりであるThe SF PHP Meetup Groupが2月にダール氏を招待して行われたもの。 そのため、Node.jsを知らないデベロッパーに向けて、Node.jsがどのような特徴を持つプログラミング言語なのか、分かりやすく解説しています。内容を紹介しましょう。 Node.jsとPHPとの本質的な違いとは何か Node.jsを触ってみよう。今日は特にスライドは用意してなくて、タイプしてどんなものかを動かしながら紹介していくつもりだ(注:ダール氏はここで最初に「
一瞬で画像をinstagr.am風にする事が可能です。 サイトを訪れるとデモがあり、自由に画像アップロードして試す事ができます。 使ってみた様子 ↑元写真 ↑エフェクト後。これがJSだけで処理できるのがすごい。 使い方 githubからファイルをダウンロードして、JSとCSSを読み込みます。 <script src="src/jquery.js"></script> <script src="src/vintage.js"></script> <link rel="stylesheet" type="text/css" href="css/vintagejs.css" media="all" /> その後、エフェクトを適用したい画像を指定するだけです。 $(function () { $('img.vintage').click(function () { $(this).vintage(
「PaRSS」はRSSフィードを取得して動的に表示してくれるプラグインです。 Webサイトとは別にブログを持っている方に良さそうですね。 使い方 HTML JavaScript $("#feed").PaRSS( "http://www.your-blog.com/feed", // feed url 5, // 取得するアイテムの数 (optional) "M jS g:i a", // 日付のフォーマット (optional) true // descriptions (optional) ); 日付のフォーマットはPHPで使える形式であればほぼ使用できるようです。 見た目の変更方法 RSSは<li>タグで出力されるようですが、項目毎にclassが割り振られているようで、CSSをカスタマイズするだけで見た目の変更が可能です。 出力されるHTML ・タイトルが囲まれるタグ ・日付が囲まれ
JQuery DragScroller plugin Examples View page source to grab the code. Download plugin from jQuery repository Overview The DragScroller JQuery plugin offers a viewport in which registered objects are scrollable by dragging the background and the scroll is performed according to the wideness of the gesture, applying a smooth deceleration if desired. Furthermore it supports advanced customizability
「HTML5でFlashが不要になる」――。次世代Web標準規格「HTML5」でよく聞くのがこんなフレーズだ。ところが、実際にFlashで作ったコンテンツをHTML5(+JavaScript)で置き換えた、なんて話は(少なくとも日本では)ほとんど聞かない。本当にFlashコンテンツをHTML5で(しかも商用レベルで)置き換えられるのだろうか? そう思っていたら、あの「ハンゲーム」を手掛けるNHN JapanがモバイルゲームのHTML5化を着々と進めていると聞き、同社の「HTML5勉強会」(2月25日開催)に行ってみた。勉強会では同社のエンジニアが、HTML5/CSS3によるオンラインゲームの開発事例について語った。
ユビキタスエンターテインメント(UEI)は4月17日、スマートフォンのブラウザで動作するHTML5/JavaScriptベースのゲームエンジン「enchant.js」のベータ版を無償で提供開始した。 enchant.jsはスクロールマップや当たり判定、仮想パッドなどを用いたJavaScriptによるゲームプログラミングが可能なゲームエンジン。iPhoneとAndroid端末の両方で動作するゲームを制作できる。 MITライセンスとGPLライセンスのデュアルライセンスで提供され、ユーザーが自ら開発したゲームを自由に再配布できる。誰でもゲームを作れるように、UEIが過去に開発したゲームの画像素材データをすべて無償で提供するとしている。 UEIは、enchant.jsを提供することで、1人でも多くの青少年にゲームプログラミングを体験してもらうことを目指している。また、5月1日からディーツー コミュ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く