Web開発が捗るFirebase入門！JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、Webサービスなどを開発する際に、ユーザーの管理や識別などで必要になる「ユーザー認証」機能を、できるだけシンプルに作ってみたいと思います。 利用するのは、さまざまなバックエンド機能を提供するGoogleの【 Firebase 】です！ 非常に多機能なサービスですが扱いはとてもシンプルで、簡単なコードを覚えてしまえば誰でも活用できるはずです！ 自分でサーバーを用意する必要もなく、基本的な機能は無料で使えるので今すぐ始められるのも特徴と言えるでしょう。 ■始め方！ 今回は、「メールアドレス」と「パスワード」でログインする一般的な「ユーザー認証」ページの作成に挑戦してみましょう！ そこで、まずはFirebaseにアクセスして新規にプロジェクトを作成します。 好きな「➀プロジェクト名」と、自分の「➁国名」を指定します。 すると、プロジェクト
業務システムのUI構築に採用されるJavaScriptコントロール「Wijmo」。軽量で高性能な製品を提供しつづける舞台裏を開発者に聞く［PR］ － Publickey
業務システムのUI構築に採用されるJavaScriptコントロール「Wijmo」。軽量で高性能な製品を提供しつづける舞台裏を開発者に聞く［PR］ 業務アプリケーションの開発でWebとモバイルへの対応を進めようとするとき、大きな課題の1つとなるのが、Webやモバイルに合わせた優れたユーザーインターフェイスをどう構築するのか、でしょう。 デスクトップアプリケーションとして作り込まれてきた業務アプリケーションのユーザーインターフェイスを、Webブラウザ対応にし、しかもモバイルデバイスの小さな画面とタッチ対応へ再構築することは容易な作業ではありません。 HTML5/JavaScriptのユーザーインターフェイスコントロールである「Wijmo」（ウィジモ）は、こうした課題を解決できる機能を提供します。 Wijmoは、業務アプリケーションでよく使われるExcelライクなグリッドコントロール、オートコン
優秀なJavaScriptの開発者になるための5か条 | POSTD
(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の
JavaScript Dashboard Demos based on HTML5 CSS UI framework - Webix
Build modern HTML5 web apps with Webix UI widgets and controls. Look at the most required UI structures and check out other JavaScript Dashboards web applications. Student/Teachers Dashboard JSThe app for student progress monitoring can greatly facilitate teachers' work. Information visualization allows them to analyze the achievements very quickly, even if the number of profiles is considerable.
非エンジニアに贈る「具体例でさらっと学ぶJSON」 | DevelopersIO
よく訓練されたアップル信者、都元です。「JSONってなんとなくわかるけど、構造を読み取れる自信はないし、ましてや書ける気はまったくしない。」そんな人に贈るエントリーです。残念ながら、「13日の金曜日」や「Why Japanese people!!」しか思い浮かばない人は、想定読者対象外ですのでお引き取りください。逆に、正確な定義が欲しい人はRFC 4627RFC 7159（アップデートされてました）をご確認ください。 「JSON」とは。 JSONとは JavaScript Object Notation の略で、要するに「JavaScriptの中でオブジェクトを記述する書式」のことです。と言われてもなんのことだか分からない人向けの説明なので安心してください。 JSONというのは「データを表現するための記法（≒文法）」です。シンプルなデータであれば、文法など気にせずにただ書けば問題ありません
Slackでボットを5秒以内に作れるツールを作った - 波打際のブログさん
はじめに 最近エンジニア界隈で話題沸騰中のSlackですが、IRCに比べてBOTを作る際に手間がかかります。自称クソボットクリエイターの私にとってはこれは死活問題です。 そこでボットを超簡単に量産できるプロダクトを開発して公開したのでご紹介いたします。 BotHeaven (ぼっとてんごく) Slackボットを大量生産できるプロダクトです。いわばボットファームです。 SlackのOAuthでBotHeaven*1にログインし、Javascriptで数行のコードを書くだけでSlackボットを簡単に生成できます。 HTTP通信機能や、ボット毎のストレージなどを持てることが特徴です。 デモ このような感じでボットを実装します。 するとこのようなSlackボットが生まれます。 仕組み Rails + V8 + Slack インストール方法 VPS等はもちろん、Herokuにもデプロイして使えるよう
liquid_video
Client: KOKUYO Co.,Ltd. Project Management: Masato Yamaguchi (THE GUILD, Alpha Version Inc.) Art Direction: Chiharu Kodama (THE GUILD, ium inc.) / Yukiya Okuda (THE GUILD, Shouwakiden Inc.) Design: Konami Endo (THE GUILD, ium inc.) / Hana Ihara (THE GUILD, Shouwakiden Inc.) Development: Niwayama Naomoto / Kenji Wada (THE GUILD, Alpha Version Inc.) Illustration: SANDER STUDIO ルール？展 Organized by: 21
人気のJavaScriptライブラリを検索できるサービス「Libscore」 | ソフトアンテナ
JavaScript人気の高まりをうけ、現在、次々とJavaScriptライブラリやスクリプトが開発され続けています。便利な反面、利用者からするとあまりにも数が多すぎて、どのライブラリが本当に有用なのか判断しづらい面もあるかもしれません。 そんなときに使いたいサービスが「Libscore」です。世界中の人気サイトで使われているJavaScriptライブラリ/スクリプトの情報を収集し、様々な方法で検索することができるサイトです。 検索方法は例えば、ライブラリが提供する変数名(jQuery、Modernizr、$.ui、$.fn.fancyboxなど)や、外部ライブラリ名(scriptプリフィックスを使用。script:stats.wp.com or script:use.typekit.netなど)を使って、使用サイトを検索したり、逆にあるドメインが使用しているJavaScript一覧をドメ
Web上でインタラクティブな図を描く·JointJS MOONGIFT
JointJSはJavaScript製のオープンソース・ソフトウェア（Mozilla Public License）です。 Web上で図を表示したいと思うことは多々あります。そんな時に画像を使うのは最も知られた方法ですが、再利用性や修正コストが大きくなります。図にもよりますが、JointJSがカバーできる範囲は大きいのではないでしょうか。 こんな複雑な図の描画も行えます。 マウスオーバーで線の削除ができます。 線のポイントを変更して曲がり方を変えることもできます。 組織図。こちらも移動ができます。 ER図。リレーションの関係も表せています。 DEVSの図とのこと。 チェス。オブジェクトの動きはチェス盤上に固定されます。 アニメーション付きの図です。 リンクの表現も多様です。 UMLのクラス図。 ステートチャート図。 JointJSでは多様な図を描くことができます。図はドラッグして動かすこと
GoogleのJavaScript理解に100%頼るべきではない、JSなしでも入手できる最小限のコンテンツが必要
[対象: 中級] ウェブサイトでのJavaScriptの利用についてGoogleのJohn Mueller（ジョン・ミューラー）氏が公式ヘルプフォーラムで与えてくれたアドバイスを、この記事では紹介します。 高度なJavaScriptを実装したところ、Googleのクロールとインデックスに支障が出てしまったサイト管理者に対してのコメントです。 JavaScript/Ajaxによって生成されるコンテンツをGooglebotが取得できなかったためにトラブルが発生しました。 また対処策として、Googlebotだけが見ることができる、クロール可能な別のコンテンツを準備することも検討していました。 John Mueller氏によるJavaScript利用へのアドバイス JavaScriptなしでもうまく動く代替バージョンを常に持っていたほうがいい。 またそのページが何についてなのかを理解できるような
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
JavaScriptを楽しく学べるRPG CodeCombat
前回、Rubyを楽しく学ぶコンテンツのエントリで紹介したRuby Warriorが楽しいという声を幾つか見かけました。 オンラインでコーディングできるサービスは色々ありますが、デザインや音楽、ゲーム性が優れていて熱中しやすいのでしょう。 残念ながら私は参加できませんでしたが、今月のGinza.rbもRuby Warriorをみんなでやってみるという催しで盛り上がったようです。 RubyWarriorのBGMが中毒性高い。しばらく口ずさんでしまいそう。#ginzarb— Masatoshi Iwasaki (@masa_iwasaki) April 15, 2014 RubyWarriorに集中していてだれもツイートしてない^^; #ginzarb— 高橋 明 (@Talos208) April 15, 2014 今回は同様にゲーム感覚でJavaScriptを学習でき、日本語化もされているC
Node.jsのWebフレームワーク「Sails」を使ってpub/subアプリを作ってみる
Sailsとは Sailsは米国オースティンにあるBalderdash社のMike McNeilさんを中心として作成されているMVCフレームワークです。スタイルとしてはRailsに近い形を取りつつ、最近のWebアプリ開発に向けたいくつかの特徴を持っています。 主な特徴としては Web APIを簡単に作成し、公開できる リアルタイムWebなアプリケーションが簡単に作成できる Single Page SiteやMobileなどの多様なフロントエンドに対応できる といったようなものが挙げられます。 Web APIについてはJSONベースのRESTfulなAPIが簡単に作れるようになっています（Sails API blueprints）。特にAPIを作るという意識をせずとも、generatorによって単純なCRUDならすぐにAPIとして公開することができます。ルーティングについても、この手のフレー
JavaScript Weekly: A Free, Weekly JavaScript E-mail Newsletter
Check out our latest issue for a sample.
はてなブログが遅いのはだいたいJavaScriptのせい - もふぬこ動画☆画像
はてなブログって重いですよね～・・・ ブラウザ変えたら早くなるかなと思ってIE11、Firefox、Google Chromeで計測してみたけど、どれもそんなに差は出なくてどれも遅い（苦笑） いったい何が原因なのかなと調べていったら、JavaScriptのせいでした。 「もふぬこ戦記」のトップページを計測しました。 使用したのはGoogle Chromeのデベロッパーツール。 条件はJavaScriptオン、キャッシュオフです。 12.84秒でした。 次にキャッシュをオンにしてみます。 8.38秒です。 次にJavaScriptをオフ、キャッシュをオフにしてみます。 3.48秒！ キャッシュオンの場合・・・ 746ミリ秒 JavaScriptをオフにするだけでサクサク快適動作します！ 星つけたりできなくなるんですけど・・・（´～｀；） ・・・あれ？JavaScriptエラー出てる気がするけ
parallax.js
WOW, that's deep man! parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... Oh, you don't have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical. This project is a collaboration between Matthew Wagerfield & Claudio Guglieri.
パララックスサイトを簡単に作成できるjQueryプラグイン8選
twitter facebook hatena google pocket いまさらな気もしますが、パララックスなサイトを簡単に実現するためのjQueryプラグインを紹介します。 sponsors #1 Nikebetterworld Parallax Effect Demo | Ian Lunn 老舗な感じのところですね。 jQuery localscrollとか、jQuery scrollToを駆使しています。 URL：http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/ demo：http://ianlunn.co.uk/plugins/jquery-parallax/ #2 JoelBesada/scrollpath GitHub 見えないパスにそってスクロールしていって気持ちいい感じです。 こんな記述が必
いまさらですが、増井雄一郎さんのメモ帳サービス「wri.pe」がすごい件 #HTML5 #プログラミング #wri.pe #markdown - CodeIQ Blog
CodeIQ中の人、babaQです。 ちょっと前になるのですが、コワーキングスペース茅場町 Co-Edo（コエド） で開催されたmasuidriveこと増井雄一郎さんのトークセッションに参加してきました。 HTML5を活用したメモ帳アプリ「wri.pe」誕生のきっかけ テーマは、増井さんが個人でつくった（とは思えない）メモ帳アプリ「wri.pe」 ゴールデンウィークを利用して、何かゴリゴリと作りたいと思い立ち、 1週間で「自分で使いたいものを作る！」と決めたのがきっかけなんだとか。 まず、浮かんだアイデアは2つ。 煩雑なメモをどうにかできるアプリと、未読のチャットを整理できるアプリ。 でも、1週間で開発するにはチャットはちょっと重い… ということで、メモアプリを作ることに決定。 まず最初に「メモアプリの課題」を整理したそうです。 - いつでも、どこでも使える（iPhone、iPadでも）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
http://dan-silver.github.io/ElementTransitions.js/