Webのセキュリティ プログラミングスクールからエンジニアデビューしたものですが、セキュリティの重要さと、攻撃された時の恐ろしさに戦々恐々としました。今でもしてます。 たとえ、エンジニアでなくとも、最低限の対策をしないとリリースするのは危険です。 プログラミングスクールではセキュリティについては、深く学ぶことはあまりないと思います。 自分と同じ駆け出しエンジニアさんや、エンジニアじゃないけど、Webサービスリリースしたい！みたいな方に共有できたらと思います。 セミナーでセキュリティについて学んできたので、復習も兼ねて自分なりの解釈で記事に落とそうと思います。 脆弱性? Webサイトの脆弱性は二種類。 ロジックエラー(設計段階で生まれる脆弱性) セッションの管理不備や特殊文字を処理せずにデータを受け渡してしまうことです。 テクニカルエラー(実装段階で生まれる脆弱性) SQLインジェクション、

jsonといえばajaxで受け取ってフロントでゴニョゴニョするデータというイメージだったのですが、ローカルから読み込んでフロントだけで扱うこともできるんですね。割と最近知って色々使い所ありそうだなと思ったのでメモっておこうと思います。 FileReaderを使うざっくりとサンプルを作ってみました。PC内jsonファイルを選択すると、そのファイルの中身を表示するというものです。ソースコードはこちら。 <input type="file" id="file"> <div id="result">ここに結果が表示されます</div> window.onload = () => { const file = document.getElementById('file'); const result = document.getElementById('result'); // FileReader

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

4009とは、株式会社フォークにおけるよろずごとメディアです。 「人」「未来」「技術」「仕事」「∞」のシーンから、日々の取り組みを裏表なく発信します。 4009とは、株式会社フォークにおけるよろずごとメディアです。 「人」「未来」「技術」「仕事」「∞」のシーンから、日々の取り組みを裏表なく発信します。 4009とは、株式会社フォークにおけるよろずごとメディアです。「人」「未来」「技術」「仕事」「∞」のシーンから、日々の取り組みを裏表なく発信します。 こんにちは。情報可視化の学習のために買った本を読み切る前に紛失したイシイです。 今回は、IntelのEdisonのアドオンボードの9 Degrees of Freedom Blockから取得できる9軸(加速度、ジャイロ、地磁気)センサーの値を、Socket通信でデータを受け取ってリアルタイムでグラフ表示させてみようと思います。 背景 今回取り組

どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式

module.js:340 throw err; ^ Error: Cannot find module 'cookie-parser' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._load (module.js:280:25) at Module.require (module.js:364:17) at require (module.js:380:17) at Object.<anonymous> (path:5:20) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Func

Node.jsの基本を順を追って展開していくこの連載。 今回は中級編の第2回目として、リアルタイムWebを実感してみましょう。 Socket.IOでリアルタイムWebを実感しよう 前回はTwitter Streaming APIにアクセスしてそのデータをリアルタイムに表示しました。 今回はSocket.IOというフレームワークを組み合わせ、クライアント同士でリアルタイムな通信を実現します。 リアルタイムWebとは リアルタイムWebとは、その名の通り、Web上の異なるクライアント間でリアルタイムに通信を行うことです。 現在は主に以下の技術が提唱されています。 ポーリング クライアントがサーバーに一定間隔で問い合わせ続け、変更があり次第処理を行う ロングポーリング サーバーがクライアントからのリクエストを保留し、変更があった場合にレスポンスを返す すぐには答えず「何かあったら返事する」という

demo codepenを見ていたら、綺麗なグラデーションでパーティクルが回るデモがあった。 http://codepen.io/jackrugile/details/Gving これを参考にシューティングゲームみたいなものを作れないかなと思った。しかし途中で挫折したww プレイヤーから弾が出るところまでは作ったが、敵を作ったり、もっと画像などを使ってリアルにするのにはすごく時間がかかると思ってやめた。一切のゲームライブラリを使わずに作るのはしんどい。このままゴミ箱に捨てるのはもったいないので、やったことをメモしようと思う。 Keyの同時押しを判定する ・参考 018.Javascriptでキーの同時押しを制御する - West in the Far East JavaScript Two key pressed at the same time - Stack Overflow 普通に上

もともとは存在しなかったタグ要素を新たに追加したり、変更、削除するテクニックを学ぶ。こうした処理ができるのはDOMならではの魅力だ。 旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、主にDOM Level 1で規定されている手法を使い、JavaScriptでどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説します。これにより、JavaScriptからHTML要素を手に取るように操れるようになります。 DOMスクリプティングでは、HTMLをJavaScriptから自由自在に書き換えられる点が大きな魅力です。これまで、HTMLに存在する要素の参照方法や属性の扱い方を学んできましたが、

This domain may be for sale!

（1）Ajax XmlHttpRequestオブジェクト（JavaScript）を利用した非同期通信処理のこと。Googleマップを筆頭とするWebアプリケーションで活用されている。ブラウザからサーバ側に非同期でリクエストを実施してデータを受け取り、JavaScriptにより部分的にページを更新することで、ページ全体を更新するよりも低負荷でサーバと通信できる。また、通信中も操作を継続できるので、エンド・ユーザーの操作を妨げられることもなく、ユーザビリティに優れる。デメリットとして、基本的にブラウザからのリクエストで動作する仕組みなので、サーバ側から自動でデータを送信することはない。

JS Boardとは、HTML5、JavaScript等のWeb技術を中心に据えているマイコン、デバイスのことを指します。もともと筆者がそういう趣の勉強会を開きたくてつくった造語です。この記事では主にJavaScriptを利用した組み込み開発に興味がある方、電子工作をやってみたいWebクリエイターなどを対象に、JavaScriptで動作する組み込みデバイスを紹介したいと思います。 はじめに IoTやウェアラブルデバイスは、これからのITトレンドを牽引していく可能性を秘めています。これらの開発は組み込み系のジャンルだととらえられがちですが、実はJavaScriptが強く関連し、インターネット、Web系のジャンルだとも言えます。 インターネット、Web系の技術者がIoTなどに目を向けることによって、従来にはない新しいサービスや製品が考えだされていく可能性があります。そこからチャンスを掴んでスキ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ここ数年のハードウェアやIoTブームがあり、電子や電気系に注目が集まっています。抵抗や電源、スイッチなどを使って回路を組み立てて自分の思ったとおりの動きを得られた時のうれしさはとても大きいでしょう。 それらの部品を買ってきても良いですが、まずはシミュレータで確認するのが良いでしょう。今回はWebブラウザ上で回路設計を行えるCircuitJS1を紹介します。 CircuitJS1の使い方 ごくごく簡単な回路。コンデンサ、抵抗、スイッチなどが並んでいます。 電気の流れる方向に動いています。 実際に動かしてみたところ。電気の流れが分かるでしょうか。 こんな複雑な回路や、 より実践的な回路もデモで用意されています。 CircuitJS1は元々用意されているものだけでなく、自分で回路図を作成

※1　Mozilla Corporation調べ、2014年12月現在 Firefox OSの特長 Firefox OSの構成 Firefox OSはMozillaが開発したオープンソースのスマートフォン、タブレット向けOSです。HTML、JavaScript、CSSなどのHTML5関連技術を用いてアプリを開発できるのが大きな特長であり、比較的軽量なOSとして設計されているため、低リソースのデバイスでも軽快に動作することも特長のひとつです。 Firefox OSの内部構造は主にGonk、Gecko、Gaiaという3つの層に分かれています。 一番上のアプリケーション／ユーザーインターフェース層はGaia（ガイア）と呼ばれています。Gonk（ゴンク）はデバイスとのインターフェースとなっているLinuxで、真ん中のGecko（ゲッコー）はHTML5アプリケーションのランタイムです。 アプリ開発者