jointerJS - HTMLエレメントを線で結ぶ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で図を描く際にはCanvasを使うのが一般的です。しかし、Canvasは通常のDOMとはまったく異なるコーディングが求められるので、書くのは好きではないという方もいるでしょう。 そこで簡単な図、ノードを結びつけるようなものを描くならばjointerJSを使ってみましょう。 jointerJSの使い方 例です。5つのHTMLエレメントが線で結ばれています。 クリックで線を切ることもできます。 jointerJSはHTMLエレメント同士を直線で結ぶというごく簡単な作りです。しかし、これで十分というケースも多いのではないでしょうか。Canvasで描くまでもない、簡単な図であればjointerJSを使うと良さそうです。 jointerJSはjQuery/JavaScript製のソフ
ゼロから始めるWebAssembly - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 学習記録 WebAssemblyとは ブラウザ上でクライアントサイドのスクリプトとして効率的に動くバイナリフォーマットです。 現在JavaScriptより軽量で高速な処理を提供するためにベンダー各社で開発されています。 現時点ではDOM, WebAPIへのアクセスとかできません。GCもない。なので現状使いどころは重い処理をWebAssembly部分に投げ出すイメージです。 スレッドとかもFuture Workらしい。 https://github.com/WebAssembly/design/blob/master/FutureFeat
鮮やかなグラフを簡単に描画！JavaScript「Chart.js」を使った動的なグラフ・チャートの作り方
グラフを使うと、あらゆる要素が客観的に比較できるので、問題分析が容易になったり、根拠を示しやすくなります。最近では情報やデータを可視化したインフォグラフィックを見かける場面が多いですが、それもグラフのメリットを活かしたものです。 しかし、グラフをホームページに掲載する時に、いちいち画像を作成するのは面倒……だと感じたことありませんか。 そこで今回は、グラフやチャートをJavaScriptで動的に生成することができるChat.jsを紹介します。 Chart.jsを使えば、数行のコードを書くだけで、鮮やかなグラフを簡単に描画することができます。少しのステップで実装することができるので、実際に特徴や手順から確認してみましょう。 Chart.jsとは？ http://www.chartjs.org Chart.jsは、数行のコードで折れ線グラフや棒グラフ、円グラフやレーダーチャートなどをダイナミッ
同じイベントのaddEventListenerを1つにまとめるライブラリを書いた
1つにまとめる? Reactなどのコンポーネント志向のライブラリを使っていると、各コンポーネントで同じ要素へ同じイベントを貼っていることがあります。 // Component A const handlerA = (event) => {}; window.addEventListener('scroll', handlerA); // Component B const handlerB = (event) => {}; window.addEventListener('scroll', handlerB); // singleton const eventObserver = require("ui-event-observer"); // シングルトンじゃない方法 // require("ui-event-observer").UIEventObserver // Component
無料のPOSレジ・アプリを作った。
レジアプリは、名古屋で毎年2回開催されているなごやクリエーターズマーケット（通称クリマ）の写真販売ブースに向けに、制作しました。実際にポートメッセなごやでレジ・アプリを使っていますので、機会がございましたら遊びにきてくださいね^^ 「写真好きのつどい」名古屋クリエイターズマーケット http://photo-love-gathering.tumblr.com/ 解決したかったこと私の参加しているクリマのブースでは、複数の出展者で写真にまつわる商品を販売しています。出展者が複数いるため、販売価格や商品が多様で、商品の管理や売上の管理、また会計方法が年々複雑になりました。 そこで、商品管理や売上集計の複雑さや手間を取り除くために、できるかぎりの事は自動化してしまおうと考えました。これがレジアプリを作ろうと思った切欠です。 現在、巷ではレジアプリが沢山存在しますが、解消したかったニーズと一致しな
第1回 プログレッシブフレームワーク Vue.js：Vue.js入門 ―最速で作るシンプルなWebアプリケーション｜gihyo.jp … 技術評論社
Vue.jsとは Vue.js（ビュージェイエス）は、インタラクティブなUIを構築するためのJavaScriptライブラリです。Webサイト内のウィジェットや管理画面のダッシュボードといったビュー（view）層に特化しています。設計の特徴としてMVVMパターンに影響を受けています。 Vue.jsは2013年にEvan You氏の個人プロジェクトとして開始、2014年2月にバージョン0.8が正式に公開されます。その後いくつかのリリースを経て、2015年4月にLaravelへの標準搭載決定を機に一気に知名度があがりました。2015年10月に1.0が、2016年10月1日（日本時間）に2.0がリリースされ現在に至ります。 Vue.jsの主な特徴には以下のものがあります。これらによって短期間で実用的なアプリケーションを作成できるため人気を集めています。 シンプルなAPIやHTMLベースの平易なテン
JavaScriptで説明するオーバーロード解決 - 檜山正幸のキマイラ飼育記 (はてなBlog)
型クラスの話をしました。 入門的ではない型クラスの話：Haskellの型クラスがぁ (´^｀;) オーバーロードは何故にかくも難しいのか：Haskellの成功と失敗 Haskellの型クラスに関わるワークアラウンド Haskellの型クラスは元祖・型クラス*1なんですが、なんか残念な仕様です。整合性が歪んでいる理由は、オーバーロード機能を優先しているからです。その分、構造としての型を記述する機能は犠牲になっています。トレードオフだから仕方ないけど。 ところで、オーバーロードの解決（多義性の解決）って、どうやるんでしょうか？ そのメカニズムをJavaScriptのサンプルコードを使って説明します。 なお、「多相とオーバーロードはどう違うか」とかの話は、どうでもいい割に議論すると消耗してバカバカしいので一切触れません。（ちなみに、「並列と並行の違い」なんて議論も時間の無駄。暇つぶし以上の意味は
Kajero - JavaScriptがその場で実行できるドキュメントシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownを使うようになって、逆にその物足りなさを感じるのではないでしょうか。色が使えなかったり、装飾も限られたものしか使えません。その制限がちょうど良いのかも知れませんが、もっと高度なドキュメントにしたいという要望もあります。 しかしプログラマーであるならば制限されているそのものを使い続けるのではなく、自分で拡張だってできるはずです。今回はインタラクティブなドキュメントを実現するKajeroを紹介します。 Kajeroの使い方 こちらがドキュメントのページです。通常のMarkdown記法が使えます。 こちらが特殊な部分。コードが書いてあります。 右上の再生ボタンをクリックするとJavaScriptが実行されて結果が表示されます。 複数ある場合、変数が共有されます。 実行時間
なぜ右辺を評価しないことが遅延なのか
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
JavaScriptオブジェクトの作成パターン ES6時代のベストプラクティス
本記事はTim Severienが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者の皆さんに感謝します。 JavaScriptオブジェクトの作成は難しいテーマです。JavaScriptはオブジェクトの作成方法が非常に多いため、初心者にとっても熟練者にとってもどの方法を使えば良いか分かりにくいのです。しかし、オブジェクト作成方法の選択肢が多く、それぞれのシンタックスがいかに違って見えても、思っているより似通っています。記事ではオブジェクトのさまざまな作成方法や、各々の選択肢がどれほどほかの方法を応用しているのかを紹介します。 オブジェクトリテラル オブジェクトをもっとも簡単に作成できる方法、オブジェクトリテラルを紹介します。JavaScriptはオブジェクトを何もないところから作成できるとうたっています。クラスもテンプレートもプロトタイプもな
React使い必見！ Immutable.jsでReactはもっと良くなる | Wantedly Engineer Blog
Reactを導入して半年近くが経ちましたWantedlyでは、今年の初めからReact(+Redux)の導入に取り組み始めたので、気付けば半年近く立っていることになります。今自分がこの記事を書いているエディタから、Wantedly Adminのチケット画面まで、ある程度大きなアプリケーションを開発してきました。 そこで今回は、チームで継続的に開発していく過程で遭遇した問題と、それを解決するために導入したImmutable.jsについて紹介します。 増え続けるCallbackとAction、肥大化するStoreReactとセットで語られることが多いFluxアーキテクチャ。ここでは詳しい説明は省略しますが、とてもシンプルな考え方なので、チュートリアルなどで簡単に学ぶことができます。しかし、実際にチームで開発していくと、たしかに動いてはいるけど、綺麗とは言い難いコードが増えてしまいました。 Ac
Binbo-Special－技術資料－JavaScript－onloadイベントの呼び出しがhistory.backとかの時にブラウザ毎に挙動違うのが気になったので軽く調査
※1 ラジオボタンは妙な動作をするブラウザがあります！！！ ラジオボタンに、checked="checked" を入れている場合、何故だか良く分かりませんが、checked以前の要素のラジオボタンにチェックした場合、戻る及び進むでページを表示した時にチェックが残らない！という現象が見られました。 すみません、説明下手ですね。 つまりこんな感じです。 パターン1： 2つめのラジオボタンがcheckedで、1つめのラジオボタンをクリックしてPage2へ。 そしてブラウザの戻るでPage1へ パターン2： 2つめのラジオボタンがcheckedで、2つめ以降（下図では3つめ）のラジオボタンをクリックしてPage2へ。 そしてブラウザの戻るでPage1へ ちなみに、こんな動きになってしまうブラウザは、 Chrome です。 それ以外のブラウザは、checkedがあっても、戻る・進む時にチェックが残っ
JavaScriptのプログラミングスタイルはどうあるべきか？ 重鎮Douglas Crockford氏が脳の働きとの関係を語る（前編）。QCon Tokyo 2013
JavaScriptのプログラミングスタイルはどうあるべきか？ 重鎮Douglas Crockford氏が脳の働きとの関係を語る（前編）。QCon Tokyo 2013 4月23日に都内で開催されたエンジニア向けのイベント「QCon Tokyo 2013」。基調講演に登壇したのは、JavaScriptの重鎮であるDouglas Crockford氏。「プログラミング・スタイルと私たちの脳」という大胆なタイトルで、JavaScriptプログラミングにおいてバグをどう減らしていくのかについて解説しています。 基調講演の内容をダイジェストで紹介しましょう。 プログラミング・スタイルと私たちの脳 PayPalのDouglas Crockford氏。 プログラミングスタイルはプログラムの一部ですが、コンパイラからは無視されます。だからある人はプログラミングスタイルが重要ではないと考えていますが、しか
フロントエンドJavaScriptにおける設計とテスト
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
常にマッチする正規表現を使えばJavaScriptでも固定位置でのパターンマッチができる - rikubaのブログ
パターンの末尾に「|」を付け加えると、その正規表現は常にマッチする。 /aaa/.exec("xyz"); // => null /aaa|/.exec("xyz"); // => [""] これを使えば、ある位置でのみパターンマッチを行うということ（Perl の正規表現で「\G」のメタ文字を使うようなこと）が JavaScript でもできる（Firefox に限っては「y」フラグを使えば簡単にできるけど、独自拡張今のところ他のブラウザでは使えない）。 // RegExp::exec の戻り値の配列には index プロパティがあり、 // マッチに成功した位置を表す var text = "xxxaaxxxaaa", regexp, result; // 4〜6文字目が aaa かどうかだけ確かめたいとする // 通常の正規表現 regexp = /aaa/g; regexp.last
使われているコードのチェックもできる！Google製のJavaScriptカバレッジツール·ScriptCover MOONGIFT
ScriptCoverはGoogle製のJavaScriptカバレッジテストツールです。任意のWebサイトに対してテストできます。 Googleが開発したJavaScriptのカバレッジツールがScriptCoverです。Google Chrome機能拡張としてインストールすることで任意のWebサイトにおけるJavaScriptカバレッジ率が分かります。 インストールしたところです。パッケージは提供されていないようなので自分でコンパイルしてインストールする必要があります。 任意のWebページを見るとこうやってカバレッジ率が出ます。 クリックすると分析開始です。しばらく待ちます。 完了しました。JavaScriptなので実行状況によってカバレッジ率も変化するようです。 さらに詳細なスクリプト単位でのカバレッジ率も見られます。 See full coverage reportをクリックするとス
CoffeeScriptがWebの世界を制する？HTML/CSS/JavaScript生成·coffee-world MOONGIFT
coffee-worldはディレクトリを監視してCoffeeScriptからHTML/CSS/JavaScriptを生成するソフトウェアです。 最近、JavaScriptを素のままで書くことが減ってきています。CoffeeScriptから変換した方がコーディング量も少なく、かつ可読性の高いコードが書けるようになってきました。そんなCoffeeScriptは既にJavaScriptだけの壁を越えて動き始めています。そんな人にお勧めなのがcoffee-worldです。 インストールはnpmからできます。コマンドにしないといけないので実際には-gをつけます。 コード例。これはCoffeeScriptでCSSを生成するccssフォーマットです。 後はcoffee-worldを起動すると現在のディレクトリまたはパスを指定してそのパス以下のファイルをコンパイルしてくれるようになります。 CoffeeS
サイボウズで学んだこと - IT戦記
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
JavaScriptを使わずにmixiアプリを作る！·mist.js MOONGIFT
mist.jsはJavaScript製/jQueryを使ったオープンソース・ソフトウェア。OpenSocialによってSNS上で実行できるアプリケーション環境が増えてきた。日本ではmixiやGooが有名なプレーヤになるだろう。実際に作ってみたいと考えている企業、個人も多いはずだ。 サンプルより。マイミクを取得する アイディアはあっても、プログラミングが苦手で参加を躊躇してしまっている…という人がいるかも知れない。そんな方はまずはmist.jsからはじめてみてはいかがだろう。mist.jsはなんとJavaScriptすら使わずにmixiアプリが開発できるフレームワークだ。 タネを言えばJavaScriptの代わりにmist.jsが定義する方式に則って記述することで、データの取得周りを隠蔽できるということだ。とはいえ取れるデータは多い。OWNER/VIEWER、マイミク、IDで指定してユーザ情
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
次世代プラットフォームのセキュリティモデル考察(前編)
