2020年に振り返る2016年のWeb開発
後輩「先輩、このシステム僕が引き継ぐ事になりました。よろしくお願いします」 先輩「そうかそうか、やっと肩の荷がおりるな」 後輩「これ2016年に作ったシステムなんですよね。僕その頃まだ入社してないんで、最初の方から教えてもらっていいですか」 先輩「よしわかった。環境構築から順を追って説明する」 〜 先輩「まずはじめにnode.jsを入れる」 後輩「あ〜昔流行ったサーバーサイドでJavascript使えるやつですよね。このシステムnodeで動いてたんですね」 先輩「いや、nodeは使ってない」 後輩「え？」 先輩「nodeに付属しているnpmというパッケージマネージャーを使ってる」 後輩「なんでまたそんな回りくどいことを・・・」 先輩「当時はnpmが一番メジャーだったんだよ。今主流のN3(N3 is Not Npm)はまだ無かったしな」 〜 先輩「よしnode入れたな。じゃあnpm inst
[JS]その美しさ、一度見たら絶対忘れない！スゴ技のアニメーションを使った画像切り換えのテクニック
繊細で美しく、ダイナミックなアニメーションで画像を切り換えるスクリプトを使ったテクニックを紹介します。 2016年のインパクトのある成果物ベスト10には間違いなく入りますね。
![[JS]その美しさ、一度見たら絶対忘れない！スゴ技のアニメーションを使った画像切り換えのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b80cbe84952c5181c714203d0bc43c4fa7b61af/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052601.png)
npmからkikとその他諸々が消されたまとめ
npmとは、node.jsにおけるパッケージシステムのことだ。npmを使えば、他人の書いたnode.jsベースのプログラムとライブラリの入手と利用がとても簡単になる。 そのnpm界隈が混乱している。発端は以下のURLだ。 I’ve Just Liberated My Modules — Medium Azer Koçuluはkikという名前のnpmパッケージを公開していた。このkikというソフトウェアの中身についてはここでは関係がない。 さて、それとは別に、kik.comというスマフォ用のチャットアプリを出しているKik Interactive社がいて、kikという名前のパッケージをnpmで出したいので、名前を明け渡すように要求した。 Azerはこの要求を拒否した。すると、Kik Interactive社はnpmの管理者に片っ端からメールを投げまくり、そのうちの一人が反応して、Azerの意
チートコードで1億円を稼ぐゲーム「働クリッカー」をやってみたらJavaScriptが自然に学べて楽しい
チート、いわゆる「ズル」をすることで、最速何秒で1億円を稼ぐことができるかを競う無料ゲーム「働クリッカー」がリリースされ、面白いと話題になっています。Windows / Mac対応で、公式サイトから無料でダウンロード可能。 名前の通り、元ネタは「クッキークリッカー」ですが（関連記事）、こちらはクッキーを焼くのではなく、クリックするごとに働いて総資産を増やしていくゲームです。 しかし、ただクリックをして働いたのでは、目標金額1億円の到達まで気が遠くなってしまいそう。そこで、このゲームではチートコードを自分でプログラミングすることで「ズル」ができるようになっているのがもう1つの特徴。チートをうまく使って、いかに効率よく1億円を稼ぐかがこのゲームのポイントなのですが、果たしてプログラミングの知識が一切なくてもプレイできるのでしょうか。実際に遊んでみました。 実際に遊んでみた まず「ゲームを始める
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
Window.postMessage() - Web API | MDN
HTML DOM APIWindowインスタンスプロパティclosedconsolecookieStore (en-US) Experimental credentialless (en-US) Experimental customElementsdevicePixelRatiodocumentdocumentPictureInPicture (en-US) Experimental event 非推奨 external (en-US) 非推奨 fence (en-US) Experimental frameElementframesfullScreen Non-standard historyinnerHeightinnerWidthlaunchQueue (en-US) Experimental lengthlocalStoragelocationlocationbarmenubar
CSSモジュール ― 明るい未来へようこそ | POSTD
ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、 各々のプロジェクトのReadmeファイルでも、 そのように言及しています。もし”発明”が、 adjacent possible（一歩先にある可能性） を探ることの一例であるのなら、Ch
Polymer 1.0をさわってみて - console.lealog();
さて、ここにこういうサイトがあります。 nodefest.jp 実はこのサイト、噂のPolymerの1.0をふんだんに使ってます。 というわけで、そんなそこまでがっつり使い込んだわけではないですが、知見らしいものが一応たまったので・・。 まだ見ぬ未来のポリマリストのために書いておきます。 Polymer Starter Kit github.com こういうのがありまして。 とりあえずcloneしてきてビルドすればそれっぽい雰囲気はすぐにつかめると思うので、さわってみたい人はここからはじめると良さそうです。 Gulp まずは外堀から埋めていきます。 # localhost:3000 で開発(ビルドしない) gulp serve # localhost:3000 で開発(ビルドしたものは`dist`配下に) gulp serve:dist # ビルドするだけ(`dist`配下に) gulp
yohgaki's blog - 画像ファイルにJavaScriptを隠す
(Last Updated On: 2014年12月5日)前回のエントリでイメージファイルにスクリプトを埋め込んで攻撃する方法について記載しましたが、最近イメージファイルにスクリプトを埋め込む事例が話題になったためか ha.ckersにJavaScriptをイメージファイルに隠す方法が紹介されています。 http://ha.ckers.org/blog/20070623/hiding-js-in-valid-images/ <script src="http://cracked.example.com/cracked.gif"> などとXSS攻撃を拡張する手段に利用可能です。サンプルとしてFlickerにJavaScriptを埋め込んだイメージファイルがアップされています。 このイメージファイルは上手く細工しているので画像としても表示され、JavaScriptも実行できます。 Flicke
JavaScriptフレームワークの寿命 | POSTD
(注記：9/13、いただいた翻訳フィードバックを元に記事を修正いたしました。) 半年ごとに”今一番ホットな”フレームワークが新たに登場しては、私たちは興奮に沸き返ります。 誇大広告を信じてはいけません。 フレームワークの寿命 はプロジェクトの成功を左右するほど重要な要素です。フレームワークを選ぶ際、テクノロジにおける多くの意思決定者は納得のいく選択をするために、コミュニティの大きさ、人気、大企業によるサポートの有無などを基準にしています。しかし実際は、こうした要素によって寿命が決まるわけではありません。 最初は勢いがあったのに、徐々に弱まり、最終的には線香花火のごとく儚く消えてしまうようなフレームワークを選んでしまうと、書き直しに無駄な時間を費やしたり、チームの士気を下げたりする原因となります。本記事は、そうした残念な結果を回避するヒントをまとめたものです。 本記事では以下のことを示したい
Slackでボットを5秒以内に作れるツールを作った - 波打際のブログさん
はじめに 最近エンジニア界隈で話題沸騰中のSlackですが、IRCに比べてBOTを作る際に手間がかかります。自称クソボットクリエイターの私にとってはこれは死活問題です。 そこでボットを超簡単に量産できるプロダクトを開発して公開したのでご紹介いたします。 BotHeaven (ぼっとてんごく) Slackボットを大量生産できるプロダクトです。いわばボットファームです。 SlackのOAuthでBotHeaven*1にログインし、Javascriptで数行のコードを書くだけでSlackボットを簡単に生成できます。 HTTP通信機能や、ボット毎のストレージなどを持てることが特徴です。 デモ このような感じでボットを実装します。 するとこのようなSlackボットが生まれます。 仕組み Rails + V8 + Slack インストール方法 VPS等はもちろん、Herokuにもデプロイして使えるよう
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
JavaScriptを読んでいると、「あれ、、、なにこれ？この書き方。。。」と思うことがたまにあります。この際の厄介なことは、どうやって調べたらいいかわからないことです。Google先生に聞こうにも、その書き方をなんと呼ぶかわからないので聞けない。 そんな「なにこれ？」を厳選してみました。覚えておくと、将来スッキリとする時が来るでしょう。 1. なみなみ、ふにゃふにゃ言ってる
美雲このはオフィシャルサイト | 神様目指して修行中！みんな応援よろしくねっ！
美雲このはとは？ 座敷童子一族の末裔として生まれ、栃木の由緒正しい某神社で暮らしていたんだけど、昔からのしきたりで一人前の座敷童子になるため東京で修行を開始！ 紆余曲折あって、ConoHaの応援団長に就任することになりConoHaを使っているみんなを応援するとともに、このはも一人前の座敷童子ではなく、「神様」になるために日々頑張っているよ！ プロフィール 名前：美雲 このは （みくも このは） 年齢：年齢という概念はないが、人間でいうと13歳くらい？ 身長：150cm＋α 体重：ひみつ 長所：勉強熱心・わりと機転がきく 短所：いじわると勘違いされる振る舞いをしがち 好きなこと：アニメを見たりゲームしながらのごろごろ
Dateオブジェクトの挙動の違い - ペイパー・プログラマーズ・ブログ
JavaScriptのDateオブジェクトについて各ブラウザごとの挙動を調べてみました。 ちなみにすべてMac OS X v10.6.4におけるアプリケーションです。 以下のスクリプトを各ブラウザのJavaScriptコンソールで流してみます。 var dobs = [ "1975-10-27T00:00:00Z", "1975-10-27T00:00:00+09:00", "1975-10-27T00:00:00", "1975-10-27 00:00:00", "1975/10/27T00:00:00Z", "1975/10/27T00:00:00+09:00", "1975/10/27T00:00:00", "1975/10/27 00:00:00" ]; for (var idx in dobs) { if (typeof dobs[idx] === 'string') { var
Motion sensing using the doppler effect
Motion sensing using the doppler effect Recently I stumbled upon an interesting paper for implementing motion sensing requiring no special hardware, only a speaker and mic! Unfortunately the paper didn't include code to test it, so I decided to reproduce it here on the web! What is the doppler effect? First of all, what is the doppler effect? The doppler effect is a physical phenomenom which affec
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …
Timesheet.jsVisualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well … Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Windows/Mac/iPhone/Androidで動く最強のゲーム環境をjavascriptで手に入れるたった1つの方法【東京Node学園祭】 by 伊予柑 さん - niconare
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita![[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae210e4ea723cef3f6023e5f7685106f303790b9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNCVCRCVCRiVFMyU4MSU4NCVFNSU4OCU4NiVFMyU4MSU5MSVFMyU4MiU4QiVFMyU4MSVBMCVFMyU4MSU5MSVFMyU4MSVBNyVFNCVCQiU4QSVFMyU4MSU5OSVFMyU4MSU5MCVFMyU4MyU4NyVFMyU4MyU5MCVFMyU4MyU4MyVFMyU4MiVCMCVFNSU4QSVCOSVFNyU4RSU4NyVFMyU4MiU5MiVFNCVCOCU4QSVFMyU4MSU5MiVFMyU4MiU4QiVFMyU4MCU4MWNvbnNvbGUlRTMlODIlQUElRTMlODMlOTYlRTMlODIlQjglRTMlODIlQTclRTMlODIlQUYlRTMlODMlODglRTMlODElQUUlRTklOTYlQTIlRTYlOTUlQjAmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTRiZGMxOWVjMzkzOGRjN2MxMDA4MDE3NDU3MDBjNWQ2%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa2FzaGlyYTIzMzkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTVkYWI1ZmY2MWU4YzE2YWZmYTE3NWU2NThkYTNiODgz%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Daadd1c32facf6006844adb8ce438bcea)
