社内研修「JavaScript基礎」の資料を公開します！ - mixi engineer blog
どうも、新卒2年目エンジニアでJavaScript委員会の重田です。 帰省がてら鳥取砂丘や小豆島に行ったらだいぶ日に焼けてしまいました。 さて、もう４ヶ月ほど前になってしまったのですが、新卒研修でJavaScript基礎の講師を担当したので、そのときの資料を公開します。加えて、JSを学ぶ上で押さえておくとよいポイントを解説します。 研修資料 https://github.com/mixi-inc/JavaScriptTraining JavaScript初心者向けの資料になります。 JavaScriptに触れるのがはじめての人でも、配属後すぐに活躍できるようになることを目指して研修を実施しました。 デベロッパーツールで素早くトライ＆エラーを繰り返し、JSを学ぶ 去年ぼくはこの研修を受ける立場でした。今年の講師を担当するにあたって、研修の進め方で最も変えたのはデベロッパーツールを積極的に使う
JavaScriptのデザインパターン - 感謝のプログラミング
昨日AmazonでポチしたJavaScriptのデザインパターン本が早速届いた。 すごく勉強になるし、他の言語でも活かせる知識が得られる気がする。面白い。 昔はオライリー苦手だったんだけど、今は本当にオライリーばっかり読んでるなぁ。 デザインパターンって デザインパターンってずっと昔からあるものだったことを今日初めて知った。 GoFの本、すなわち『オブジェクト指向における再利用のｔまえのデザインパターン』が出版されたのは、なんと1994年。 俺が小学校低学年くらいのときにもうデザインパターンという概念は誕生していたのだ。 Java1.0αが誕生したのも1994年らしい。 スーパーファミコンが出たか出ないかの時期にもう誕生していたのか・・・。 JavaScriptはオブジェクト指向言語 モダンJavaScriptでも強調されているが、JavaScriptはオブジェクト指向言語で、オブジェクト
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
Solrを使う際にどうぞ。Ajaxベースの検索フロントエンド·AJAX Solr MOONGIFT
AJAX SolrはSolrのAjax検索インタフェースです。 個人的にもWebサービスの検索エンジンとして使うことが増えてきているSolr。そんなSolrのフロントエンドとして使えるソフトウェアがAJAX Solrです。 デモです。左側がフィルタ、右側に結果が表示されています。 結果の全文を読むこともできます。 フィルタ条件は左上に表示されています。×リンクをクリックして解除することもできます。 社内の検索エンジンに採用したりした場合、管理画面を作る手間なくAJAX Solrを使えます。検索エンジンをより手軽に使えるソフトウェアです。 AJAX SolrはJavaScript製のオープンソース・ソフトウェア（Apache License 2.0）です。 MOONGIFTはこう見る ローカルOSにおける検索エンジンは随分と広まってきたような思います。しかし意外とまだまだ弱いのが社内のファイ
サーバサイドの開発不要。Webブラウザを使ったデジタルサイネージ·WINT MOONGIFT
WINTはJavaScriptを使うデジタルサイネージシステムです。 駅やビル内にある大型スクリーンに映し出される広告、いわゆるデジタルサイネージはシステム化もその配信システムも複雑なものに感じられますがWINTを使うとサーバとブラウザだけで簡単に組み上げることができます。 読み込み中。コンテンツ部とニュース部の二つに分かれているのが特徴です。 HTMLコンテンツを表示している例。 画像を表示している例。 WINTは予め用意してあるJSONファイルを読み込み、指定した時間ごとにコンテンツを切り替えながら表示します。Webブラウザだけあれば動くのに加えて、JavaScriptだけで作られているのでサーバサイドの複雑な仕組みは一切不要で動かせるのが利点です。 WINTはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webブラウザ
表示内容の切り替え(JavaScript)|WEBプログラム覚書
HOME>WEBプログラム覚書>表示内容の切り替え(JavaScript) 表示内容の切り替え(JavaScript) JavaScriptを使って表示内容を切り替えるサンプル。getElementById()を使って指定IDのオブジェクトにアクセス。 スタイルシート切り替えサンプル SEO的にはこっちがよさそうですね。
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
短期間でJavaScriptを習得し、アプリ・Webサービスをつくるための勉強法 | らふらく ^^ @TwinTKchan #spam
前回書いた 短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめ が好評だったので、今回は、JavaScriptに絞って習得するための方法をまとめてみたいと思います。 ちなみに、一番最初に、JSに触れた時は、Hello, Worldを表示させたり、 aタグでリンクをはったりぐらいしか出来ませんでした。 ですが、現在はjQueryで社内システムの 画面をつくる(Ajaxとかを使って)事を任せてもらっています。 なぜ、JavaScript(JS)がいいのか？なぜ勉強するのか？ まずは、なぜJSをお薦めするのかを説明します。 ①ネイティブアプリがつくれちゃう。 ネイティブアプリとは、iPhoneアプリとか、Androidアプリのことです。 これまでは、iPhoneなら、Objective-Cという言語を、 AndroidならJava(JSとは別物)という言語
JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ
グーグルが開発したJavaScript MVCフレームワーク「AngularJS」を紹介した1つ前の記事の反応が予想以上に大きく、1日たたずにブックマークが500以上もつきました。 本記事では、AngularJS以外にもすでにたくさん存在するJavaScript MVCフレームワークに関する情報をまとめて紹介したいと思います。 JavaScript MVCフレームワークの比較記事 既存のJavaScript MVCフレームワークを比較した記事が「The Top 10 Javascript MVC Frameworks Reviewed」です。Top10と書いてありますが、12種類のフレームワークの比較です。これは公開当時は10種類だったものが、その後11種類になり、今回のAngularJSの公開で12種類になったためです。 上記のような比較表を載せた上で、12種類すべての利点と欠点を説明し
こてさきAjax:クールなMVCを実現するフレームワーク Angular.js の紹介 - livedoor Blog（ブログ）
先週＆今週は、出張でアメリカ西海岸。そんな折、先週の金曜日（16日）の夜に BayJax meetup が Yahoo! 本社で開催されるということで、参加してきました。 BayJaxは、シリコンバレー地区のAjax & Javascriptに関するMeetUp。大体、半年おきに開催されているようです。今回参加したMeetUpの形態は、Conference形式（勉強会ののりに近い）。日本との勉強会との違いは、最初にピザを食べてお腹が満たされたところで勉強会が始まることと（こっちの考え方の方が、確かにリーズナブル）、質問が活発なこと（海外では一般的なことですが）。とても、楽しい時間を過ごすことが出来ました。 その中で講演された AngularJS について、今回は紹介します。 AngularJS AngularJSは、とてもシンプルにWeb Appを書くことができる軽量な MVC フレームワ
グーグル製のJavaScript MVCフレームワーク「AngularJS」、正式版が公開 − Publickey
グーグルは、JavaScriptでMVCアーキテクチャのアプリケーション開発をする際に便利な機能を備えたライブラリ「AngularJS 1.0」のリリースをブログで発表しました。 MVCアーキテクチャとは、ソフトウェアがデータモデル（Model）の部分とユーザーインターフェイスの部分（View）、そしてビューとモデルのあいだで制御する部分（Controller）に分離された構造のことを指します。 これらが分離されているとプログラムの見通しがよくなり変更にも対応しやすく、テストも容易になるため、何種類ものユーザーインターフェイスと複雑なロジックなどから構成される大規模なアプリケーションではMVCアーキテクチャの採用が望ましいものと考えられています。 しかしWebアプリケーションをMVCアーキテクチャで実現しようとすると、ビューの役割を果たすHTMLのコードの中に、どうしても複雑なJavaSc
地図や動画、Googleスプレッドシートとも連携する年表ライブラリ·Timeline MOONGIFT
Timelineは各種Webサービスのコンテンツを載せられる年表表示ライブラリです。 JavaScriptを使って格好いい年表（タイムライン）を表示したいならばTimelineを使ってみましょう。目を引くインパクトある表示が実現します。 上にコンテンツ、下に年表（タイムライン）が表示される仕組みになっています。 YouTube動画も埋め込めます。Vimeoにも対応しています。 Flickr画像です。 Googleマップです。 Twitterも表示できます。 SoundCloudです。 Googleスプレッドシートから取り込む機能もあります。 データです。JSONで定義するだけで使えます。 Timelineでは下に表示されている年表の中から項目を選ぶと上にある詳細に表示されるようになっています。歴史、個人の人生、ソフトウェアの遷移など様々なコンテンツが表示できそうです。時間の単位は拡大、縮小
AnimateImage – attosoft.info
目次 概要 特徴 使い方 ダウンロード API 仕様 記述例 デモ FAQ アニメーション機能を持つほかのスクリプト 画像関連のアニメーション規格 サポートする？ 概要 AnimateImage は複数の画像をアニメーション GIF のように連続表示する JavaScript ライブラリ。 ※ アニメーション機能を実現するスクリプトはいくつかあるが、要求に合ったものがなかなか見つからなかったため自分で作成。 特徴 複数の画像をアニメーション GIF のように連続表示する。連番または任意のファイル名に対応。 Web ブラウザーがサポートするすべての画像形式に対応 PNG, JPEG, GIF, BMP, TIFF, WebP など 透過 PNG 画像によってアニメーション画像の背景を透過できる 256 色を超える高画質の写真やイラストをアニメーションできる アニメーション間隔を指定できる (
旅の疲れをがっつり癒せる！ホテルに宿泊して旅を漫喫｜Lexury Hotel
旅行先を選ぶ次に重要なのがホテル選びですが、観光名所をまわるためにレンタカーを用意する必要もあります。その場合は、下記の情報をみてみましょう。
Controlled Terms or Free Terms? A JavaScript Library to Utilize Subject Headings and Thesauri on the Web
Issue 15, 2011-10-31 Controlled Terms or Free Terms? A JavaScript Library to Utilize Subject Headings and Thesauri on the Web There are two types of keywords used as metadata: controlled terms and free terms. Free terms have the advantage that metadata creators can freely select keywords, but there also exists a disadvantage that the information retrieval recall ratio might be reduced. The recall
写真に埋め込まれたメタデータ、ExifをJavaScriptで読み取る·Javascript EXIF Reader MOONGIFT
Javascript EXIF ReaderはJavaScriptを使った写真のExifデータ読み取りライブラリ。 Javascript EXIF ReaderはJavaScript製のオープンソース・ソフトウェア。HTML5のCanvasタグを使い、JavaScriptでバイナリ解析を行うのが流行っている（？）昨今、皆様はいかがお過ごしでしょうか。元気にバイナリ解析をしているでしょうか。 デモの写真 今までであれば、バイナリファイルをサーバに送信して解析結果をWebブラウザで受け取って表示する、そんなやり方が当たり前だった。しかし今は違う。クライアントサイドで解析してその結果をサーバに送るのだ。その一つ、Exif解析を行うのがJavascript EXIF Readerだ。 Exifというのは写真などのJPEG画像に入ったメタ情報だ。撮影した時間や場所、カメラ、シャッター、絞り等カメラと
テキストサイトに。JavaScript製のテキスト差分表示·jsdiff MOONGIFT
jsdiffはJavaScript製の文字、単語、行単位の差分チェックツール。 jsdiffはnode.js/JavaScript製のオープンソース・ソフトウェア。Webサイトは様々な種類が存在するが、最も多いのはテキスト系サイトではないかと思う。フォーラム、Wiki、ブログ、Q&Aなどテキストは日々どんどん追加されていく。 比較 そんな中、みんなで一つのコンテンツを作り上げていく中で欲しくなるのがテキストの更新前と後を比較するための差分ツールではないかと思う。Webブラウザ上で手軽に使えるjsdiffを使ってみよう。 jsdiffはテキスト差分表示ライブラリで、複数の差分表示に対応しているのが特徴だ。一つは文字単位の比較で、もう一つが単語単位、そして最後に行単位の比較となっている。通常のDiffと違ってブロック単位で調整が入ることなく、表示されているそのままの行を比較する仕組みになってい
JavaScriptのエラーを見つけやすくしてくれるブックマークレット『Zeon.js』 | 100SHIKI
テキストエリア中のJavaScriptを解析し、エラーっぽいところを見つけてくれるのがZeon.jsだ。 使い方は簡単で、同サイトで配布されているブックマークレットを使うだけだ。 そうするとテキストエリアの右下に「Z」マークが現れる。それをクリックすればエラーの詳細が見れる、という仕組みだ。 テキストエリアにJavaScriptを書く、というシーンがあまり思い浮かばないのでテスト用にちょっとしたページを作る必要があるような気もするが、どうしてもデバッグに困ったときに覚えておいてもいいだろう。 もしくはどこぞの教育機関やら研修でも使えそうですな。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSLint,The JavaScript Code Quality Tool
IDEA * IDEA
