簡単にプログラミングが学べるサイトが登場 試しに使ったけどマジで簡単でワロタｗｗｗ : 暇人＼(^o^)／速報
簡単にプログラミングが学べるサイトが登場 試しに使ったけどマジで簡単でワロタｗｗｗ Tweet 1：名無しさん＠涙目です。(西日本)：2011/08/24(水) 01:40:22.41 ID:7bRW1kA90 楽しく退屈せずにJavaScriptプログラミングを学べるCodecademy Hacker Newsで参考になる記事を読んだ。その記事が推薦している本も買った。オンラインのチュートリアルをブックマークした。見ればプログラミングが楽しくなるとうたっているビデオに、80ドルも投じた。でも、なぜだろう。いまだにプログラミングのやり方が、分かんないのだ。 …というお悩みをお持ちのあなた、今夜（米国時間8/18）立ち上がったCodecademyが、きっと助けてくれるだろう。 CodecademyはWeb上の対話的なプログラミングチュートリアルで、手取り足取り、JavaScriptの基礎を教
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」:phpspot開発日誌
DocumentCloud's VisualSearch.js クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」 検索ボックスというとどのサイトも<input type="text">があってCSSで修飾されていたりオートコンプリートが付いていたりするものですが、今回紹介する検索ボックスはそれらをもうちょっと進化させたものになっています。検索条件など細かくをいれてもらうような場合、フォームが巨大になってしまったりしますが、その心配はありません。１つの検索ボックスで完結します。 検索ボックスがあります 入力するとフィルタの候補が現れます Enterで補完されます 条件を入れていきます ×ボタンで条件は消せますし、条件の上でクリックすればそのままオートコンプリートが走ります 日付の指定なども検索ボックス上で完結させられます こうした検索ボックスが合わないサイトも
圧倒的な存在感。HTML5/CSS3/JavaScriptで作られたイラストレーションアプリ·Ghost Writer MOONGIFT
Ghost Writerは万年筆、マジック等をリアルに再現した絵描き用ソフトウェア。 Ghost WriterはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。HTML5は徐々に本格導入されつつあるが、まだまだ実験的なプロダクトが多い。だがプログラマーにとっては、今こそ遊べる状況だ。色々試し、遊ぶ中で新しい可能性を見いだすことができる。 ものすごくリアル 今まではローカルでしかできなかったような操作がWebベースで実現するようになっている。特にペイント系は面白い。そこで今回はGhost Writerを紹介しよう。 Ghost Writerは古めかしい紙のようなボックスにペンを使って書き込めるソフトウェアだ。驚くのはそのリアル感ある存在感だろう。万年筆、マジック、スプレーといったペン種があり、切り替えて絵を描くことができる。なお筆者環境では色を変えることはで
PDFをHTML5でレンダリングするプラグイン不要の「pdf.js」をMozillaが発表
「pdf.js」はHTML5とJavaScriptで構築するオープンソースのPDFレンダリングツール。MozillaはFirefoxに近い将来このツールを組み込む計画だ。 Mozillaの研究者であるアンドレアス・ガル氏が6月15日（現地時間）、プラグイン不要のPDFレンダリングツール開発プロジェクト「pdf.js」を発表した。HTML5とJavaScriptで構築しており、三条項BSDライセンス（3-clause BSD license）の下、githubで公開している。 現在、PDFをWebブラウザで開くには米Adobe Systemsやサードパーティーが提供するプラグインやアプリが必要だ。だが、こうしたプラグインではPDFのレンダリングに時間がかかり、PDFに備わる機能を完全には利用できない。また、セキュリティ上の問題もある。米GoogleはChrome 8から、サンドボックスでPD
[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
Webアプリケーションの開発に。面白いコンポーネントが多数揃ったUIライブラリ·Ninja UI MOONGIFT
Ninja UIはHTMLを使わずにJavaScriptで画面を描画していくUIコンポーネント。 Ninja UIはjQuery/JavaScript製のオープンソース・ソフトウェア。思うにWebサイトというのは表現力が高く、かつ自由度が高すぎるのだ。そのため見栄えにこりだすと収集がつかなくなる。またデザインセンスがないと格好いいサイトが作れない。 ボタンやアイコン アイディアがどれだけ良く、技術力があっても見栄えがぱっとしないサイトは受け入れられない。もうHTMLは書かず、JavaScriptで組んでしまうのはどうだろう。それを可能にするのがNinja UIだ。 Ninja UIはjQuery Webjutsu（Web術？）を掲げているライブラリで、枠組みだけHTML5で組み、コンポーネントの配置は全てJavaScriptだけで記述するライブラリだ。ボタンやドロワー、アイコン、ポップアッ
[JS]jQueryのプラグイン33 1選 -2011年5月 | コリス
Skitter 多種多少なアニメーションで画像を変更するスライドショー。 キャプチャは「cube」、キューブ状になって変更します。
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
JavaScriptのいろいろなコーディングルールをまとめてみた
JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合) 有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました JavaScript style guide – MDC Docs Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。 多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。 jscsにこのコーディングルールをチェックするプリセットが用意されています。 Google JavaScript Style Guide Google JavaScript Style Guide 和訳 — Goo
実質1行でメールフォームのSPAMを防ぐjQueryスクリプト
3月に フリー写真素材 :: Free.Stocker という無料写真素材サイトをオープンし、このサイトのサイドバーに クックパッド みたいに気軽にメッセージを送れるフォームを設置しました。 しばらくは何事も無かったのですが、ある日突然大量のSPAMメッセージが送られてくるように…(●´⌓`●) 酷い時には3分〜5分に1通送られてくるし、試しに送り元のIPアドレスとホストを調べてみたら毎回バラバラなので困りました。 こんな時、多くのサイトでは CAPTCHA と呼ばれる読みづらい英数字の羅列の画像を入力させることが多いと思いますが、それでは「気軽にメッセージを送れるフォーム」とは言いづらいですし、サーバーにもページを表示させるたびに毎回余計な負担がかかってしまいます。 試しにWordPressのSPAM防止などに広く使われている Akismet というSPAM防止APIをメール送信スクリプ
ライブラリとWeb APIを使いこなして一人前
JavaScriptは1995年に誕生しました。JavaScriptの実行環境がWebブラウザであったこともあり、JavaScriptの歴史はWebブラウザの歴史そのものでした。Webブラウザ間の互換性やセキュリティの問題などで“不遇”の時代はあったものの、2010年現在、JavaScriptはWebサイト開発になくてはならない存在となっています。 JavaScriptを取り巻く環境は、15年の間にすっかり様変わりしました。Webサイト開発者であるプログラマが書き上げるJavaScriptプログラムが単体では完結しなくなっているのです。単体で使えないとはどういうことでしょうか？ 現在のJavaScriptプログラミングには、大きく二つのトレンドがあります。一つは、外部のJavaScriptライブラリを取り込んで利用すること、そしてもう一つは、大手Webサイトなどが公開しているWeb API
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス
jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。 How to Create A Multi-Step Signup Form With CSS3 and jQuery デモページ フォームの下部にある「プログレスバー」の存在もユーザビリティ的に見逃せない存在です。 [ad#ad-2] フォームのデモ フォームは全部で4つのステップで構成されており、さまざまなスパイスが含まれています。 2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。 フォームの実装 HTML：基本構造 フォームの基本構造は、4つのステップをそれぞれdiv要素に格納します。 <div id="container"> <form action="#" method="
初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ
初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 どうもこんにちは、フレッシュさに定評のない新入社員のtek_kocです。 初めてのお仕事として「Titanium Mobileでアプリを試しにつくってみる」というのを担当していました。 JavaScriptはあまり使ったことがないですし、そもそもMacもほとんど触ったことがなかったので苦戦するかと思いましたが、２週間ほどでとりあえず形になるところまでできました。Titanium Mobileすごいです。 ということで、Titanium Mobileで試しにアプリ開発をしてみた感想を書いてみました。 そもそもTitanium Mobileとは？ Titanium Mobileとは、Appcelerator社によるスマートフォン対応アプリケーションの開発環境です。 iPhoneやiPad、Androidを
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ
以前ご紹介した、スマートフォン向けの JavaScriptフレームワーク、Wink Toolkit がバージョンアップしたんだぜ、と開発者 さんからわざわざお問い合わせ頂いたの でご紹介。以前もかなり豊富なUIでとても 有意義なフレームワークだと感じましたが、 今回はUI面が特にパワーアップ。 Wink Toolkitがバージョン1.3になって機能もいくつか追加されました。3ヶ月間、UIの改善にかなり力を入れてくれたようで、スマフォにかなり合わせてくれましたよ。 jQuery Mobileライクなインターフェースになりました。もともとUIエフェクトの評価は高かったWink Toolkitですが、全体的なデザインが見直されてかなり垢抜けた感じです。 尚、以前の機能やUIは過去記事をご参照下さい。 Wink Toolkitが割と良かったので日本語サンプル作った Demo 前回はほぼ全てのデモを
JavaScript template language shootoff · jsPerf
JavaScript performance comparison Revision 73 of this test case created by Jeremy Ashkenas on 2011-1-30 Preparation code <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://documentcloud.github.com/underscore/underscore.js"></script> <script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script> <script src="http://cloud.github
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
