The Little Book on CoffeeScriptThe Little Book on CoffeeScript
Hatena-Textbook/javascript-event-driven.md at master · hatena/Hatena-Textbook · GitHub
JavaScript によるイベントドリブン アジェンダ JavaScript の言語について DOM について イベントについて jQuery について MVC アーキテクチャについて まずはじめに Just moment! Web で JS を使うとき、HTML の知識が前提となることが多い http://www.kanzaki.com/docs/htminfo.html 少なくとも「簡単なHTMLの説明」は押さえておきたい。 目的 講義時間は限られているので JS を学ぶ上でとっかかりをつかめること リファレンスを提示します。概念を理解 言語的部分、DOM 及びイベントドリブンなプログラミング 覚えようとするとクソ多いのでリファレンスひける部分は覚えない JS とはどんな言語であるか? 基本クライアントサイド=ブラウザで動く 実装がたくさんある はてなのエンジニアはみんな誰もがある程
Electronを使ってJavaScriptでデスクトップアプリを作る
はじめに こんにちは。デスクトップアプリケーションを手軽に作りたいと思ったことはないでしょうか？ 普段Webアプリケーションを開発している場合、 デスクトップアプリケーションを作ろうとすると、開発言語やライブラリがWebアプリケーションとは違うので、別な知識が必要になるのと複数のプラットフォームで動くものを作ろうとすると大変ですね。 そこで、今回はWebアプリケーションのKPTBoardのJavaScriptとCSSのコードを一部流用と修正して、Electronで動かしてみました。 Webアプリケーション版のKPTBoardと違う点 今回はWebアプリのデスクトップクライアントアプリではなくて、単体で動くデスクトップアプリとして作ってます。 複数人には対応してないです。 投稿した内容は、データーベースではなくてアプリのlocalStorageに保存されます。 Electronとは http
Bower入門(基礎編) - from scratch
Bower入門 これから Bower について書いてきます。Bowerの使い方から実際に使う上で考慮することまで含めて書きます。 長くなりそうなので単に使うだけの基礎編とモジュールを作る上で気をつけることをまとめた応用編に分けて書きます。 Bower とは Twitter社が作ったフロントエンド用のパッケージマネージャです。 Java で言う Maven、 Ruby で言う gem、 Perl で言う cpan のようなものです。 Node.jsには npm と呼ばれるパッケージマネージャがありますが、それに強く影響を受けています。 パッケージマネージャを利用することでライブラリを自分で管理する必要がなくなり、管理するファイルの数を減らすことができます。 また、パッケージマネージャを利用することでライブラリのバージョン管理をしやすくなります。 さらに自分のライブラリを Bower comp
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
Vorlon.jsとは？ ブラウザーでWebデバッグできるお手軽な開発者ツール
Vorlon.jsという開発者ツールを知っているだろうか？ このオープンソースツールを使えば、PCブラウザーで各種Webデバッグが行える。その機能概要と基本的な使い方を解説。 Vorlon.jsとは Vorlon.js（読み方： ヴォーロン・ジェーエス）とは、ChromeのDevToolsやIE／EdgeのF12開発者ツールと同じく、Webブラウザーの表示内容やネットワーク状態をデバッグするためのツールである。 最も特徴的なのが、ブラウザー上で動作することだ。PCブラウザーのデバッグはもちろん、スマホなどのモバイルデバイスのデバッグを、ケーブルをつなげることなく、Macを準備することなく、実現できるのが大きなメリットだろう。 マイクロソフトが開発したオープンソースプロジェクトであり、Node.jsとSocket.IOといったオープンな標準のみを使って開発されていて、プラグインの追加が容易で
2日でできる! JavaScript トレーニング - mixi engineer blog
こんにちは。SNS mixi の JavaScripter、kuniwak です。 新しい仲間たちが入社する季節になりましたね。 さて、ミクシィを支えるエンジニアが作成した JavaScript 研修の資料を Github にて公開しました。 ミクシィは 2013年から研修資料を公開していましたが、今年は JavaScript の進化に合わせて内容を刷新しています！ 2015年度の JavaScript 研修は、Web アプリケーションの部品（モジュール）をつくれるようにすることを目標とした、実践的な研修として計画されました。 JavaScript 研修のために与えられた期間は2日ということもあり、MVC や Flux といった設計方面の話題には踏み込めていませんが、Promise、Fetch API、Bower など、現在・未来のフロントエンド開発に必須の要素を盛り込んだ最新のJavaS
Bootstrap-シングルページ制作編１ | みずかず
Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。 Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。 変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。 制作編１ではグローバルナビゲーション（Static top navbar）を設置するところまでの記録。 シングルページ制作編 Bootstrap-シングルページ制作編１ Bootstrap-シングルページ制作編２ Bootstrap-シングルページ制作編３ Bootstrap-シングルページ制作編４ Bootstrap-シングルページ制作編５ Bootstrap-シングルページ制作編６ Bootstrap-シングルページ制作編７ ＊Bootstrap3.3.4 Bootstrapのファイルはダウンロード済み ダウンロード方法は導入編にて。 シングルペ
ブラウザゲーム開発で使えそうなゲームエンジンまとめ - Qiita
概要 ブラウザ上で実行可能なHTML5+JavaScriptなゲームエンジンがいろいろ出てますね。 どれが実際使いやすいのか分からず、とりあえず触ってみた感想をまとめてみました。 かなりざっくり（雑に…）触ってるので、モックを作ったものもあれば、 サンプル動かしただけのものなどが入り乱れてます。 こんなものでも参考になれば幸いです 要件 オープンソースであること おさえたい評価項目 学習コスト 実績 フォーラムの有無・活発さ 学習コストは導入から開発・運用まで含めて考えてます。 また、実績があればプロジェクトに導入しやすいということで、実績の有無を載せたいと思います。 フォーラムはわからないことがある時に聞ける環境が 公式で提供されていると安心するのでおさえておこうと思いました。 ※実際にフォーラムに書き込みしたものはCocos2d-jsのみです ※評価は◎・○・△・✕の4段階評価になって
ブラウザでストレージ？ Web Storageを使いこなそう
連載目次 ■Web Storageの概要と活用例 旧来（＝HTML 4.1以前）のWebブラウザでは、eコマース・サイトのカート情報やログイン状態の管理情報などのデータをブラウザに保存する仕組みとして、大半のWebサイトではクッキーを利用していた。しかし、クッキーでは、保存容量が4KBytesまでであることや、すべてのリクエストに対してサーバにデータを自動で送信するため、容量制限やセキュリティ対策に悩まされることも多くあった。 HTML5では、クッキーに代わるデータ保存の仕組みとして、「Web Storage」と呼ばれる機能を利用できる。Web Storageは、ブラウザ側でKey-Value型でデータを保存する機能のことで、現在のインターネットを取り囲む環境に対応した「クッキーの後継技術」ともいえる。 Web Storageとクッキーの機能の差異は、以下の表のとおりだ。
React Desktop - Reactを使ってMac OSX/Windowsアプリを開発 MOONGIFT
Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere（一度覚えればどこでも動く）が素晴らしい考えと言えます。 そんなReactを次のターゲットとしてデスクトップでも動くようにしたのがReact Desktopです。Mac OSX/Windowsに対応しています。 React Desktopの使い方 React Desktopのデモです。Webでも表示できるのがすごいです。 コントロールもちゃんと動きます。 そしてWindows 10でも使えます。 フォームもまさにWindows 10といった感じです。 メニューを隠すこともできます。 ElectronはHTML5を使ってデスクトップアプリを作ることがで
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
NodeSchool
ワークショッパーはオープンソースの学習用モジュールです。 すべてのワークショッパーはウィザード形式です （ワークショップに参加しなくても勉強できます！）。 ほとんどはオフラインでも動きます。
新米エンジニアが入社して半年で読んだ・読まされた本まとめ - Qiita
Outline Category Web一般 HTML/CSS JavaScript jQuery Linux Java Android DB アルゴリズム 正規表現 サーバ・ネットワーク バージョン管理(Gitメイン) 資格 その他 Web一般 「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか ずっとHTML/CSSでWebサイト構築してたけど、なんとなくjQuery使ってリッチなサイト使ってたけど、裏側の仕組みがわからないからなんかなあ。。。という人はぜひ読んで欲しいです Webサイトとは何か、なぜWebが動くのか、そういった背景のうちデザイナやフロントコーダでも知っておくべき知識が体系的にまとめられています サーブレット/JSPのサンプルコードによる紹介が一部あります とはいえ、サーブレットとJSPでサンプルコードを用いながら紹介している章以外は
NodeSchoolでJS力をアップしよう！ - Qiita
記事内容に間違いや改善等ありましたらコメント欄にてご指摘をお願いしますm(__)m NodeSchoolとは 詳細は公式サイトに書かれていますが要は無料でNodeやそれに関連する技術を学べるオープンソースのツールです。 NodeSchoolという名前なので、なにかしら Node関連のものしかない ように思われがちですが、JavaScriptのみに着目した科目（他にもNoSQL関係だったり、etc）などもあるので、「JavaScriptの勉強をしたい！」という人にもおすすめです！ 必要なもの 項目 説明 Node.jsインストールの推奨方法 Node.jsは活発に開発が進んでいるのでバージョンが結構頻繁に変わります。なのでNode.jsのバージョン管理をしてくれるツールのインストールを推奨します。（Rubyで言うrvmのような存在） 現時点（2015/10/27時点）で推奨するNode.js
いますぐ使えるCSS3テクニック集！ コピペ用サンプル付き！
マウスオーバーでクルッとするボタン 画像もJavaScriptも使わずに、HTML＋CSSのみでクルッと回転するようなエフェクトの発生するボタンの作成方法を紹介します。（使用例： ニュースページ、地図ページ） ニュースページのカテゴリナビゲーションです。もともと英語で表示しているテキストを、マウスオーバーでくるっと日本語に入れ替えています。CSSを工夫して用いれば、このように要素内のテキストを動かすことも可能になります！ 実際につくってみよう！ 上述のスライドアウトインする画像と同様で「transition」というCSS3プロパティを用い、マウスオーバーでのCSSプロパティの変化にアニメーションを加えています。サンプルコードを以下に用意しました。 CSSでクルっとするボタン - jsdo.it - share JavaScript, HTML5 and CSS CSS3を用いて作成したマウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのレベル別書籍のまとめ
http://homepage3.nifty.com/furumizo/eki/eki.htm
FLABO
