Yahoo!ニュースの元記事を探す - Yahoo!ニュースから元記事へジャンプするユーザスクリプト MOONGIFT
Yahoo!ニュースでは各メディアから提供されたニュース記事が掲載されています。しかし画像などの情報が抜け落ちていたり、リンクがなかったりと情報不足になっていることが良くあります。その結果、元記事を探したりする人も多いのではないでしょうか。 そこで使ってみたいのがYahoo!ニュースの元記事を探すです。Yahoo!ニュースの元記事を素早く探せます。 Yahoo!ニュースの元記事を探すの使い方 サマリーの時点で元記事検索のリンクが出ます。 クリックすると自動的にGoogle検索が実行されて、元記事にジャンプします。 記事詳細でも大丈夫です。 Yahoo!ニュースの元記事を探すはリンクをクリックしても良いですし、自動にも設定できます。Yahoo!ニュースで記事を見て、その後オリジナルを探すという経験が多い人は自動にしておくと幸せになれそうです。 Yahoo!ニュースの元記事を探すはJavaSc
Shree - 軽量版Three.js MOONGIFT
Three.jsといえばWebGLを使った高度な表現を可能にするライブラリですが、機能が相当に多く、ファイルサイズも大きいのが難点です。素のWebGLを触るのは相当に難度が高いですが、Three.js経由でも難しいという印象があります。 そんな中登場したのがShreeです。Three.jsの主要な機能を残して実装された軽量版Shreeといったソフトウェアです。 Shreeの使い方 Shreeで実装したWebGLのデモです。サイズはなんとThree.js版の1/10です。 こちらはThree.jsです。ぱっと見では何も変わりません。 もちろんShreeがThree.jsとまったく同じ機能がすべて使える訳ではありません。足りない機能もまだまだあります。しかし軽量であれば読み込むのも高速で済みますし、主要な機能に絞り込まれていても、メインとなる機能は満たされているようです。 ShreeはType
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
DoppioJVM - JavaScriptで作られたJavaVM
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaといえばかつてはWebブラウザ上でも動いていました。Javaアプレットと呼ばれる技術で、とんでもなく遅かったり、セキュリティホールになったりと悩みの多かった存在ではないでしょうか。HTML5になり、プラグインが軒並みなくなっていく中でJavaアプレットも動く機会がなくなっています。 そんな中、安全にJavaが実行できる環境がWebブラウザ上に構築されるかも知れません。それがDoppioJVMです。 DoppioJVMの使い方 DoppioJVMはJavaScriptで作られたJVMです。使い道があるかは分かりませんが非常に興味深い技術です。 ちゃんとjavacでコンパイルもできます。 できあがったファイルを実行もできます。実行速度についてはJavaScript上で動いている
ShuffleText.js - マウスオーバーでテキストシャッフル MOONGIFT
映画などでよく見られるテキストがシャッフルされて徐々に表示されていくアニメーション。単純に文字を表示するよりもインパクトがあって思わず目を引きつけられることでしょう。 そんな演出が簡単にできるライブラリがShuffleText.jsになります。 ShuffleText.jsの使い方 アニメーションGIFではちょっとしたアニメーションしていないように見えますが実際にはもっと激しいです。 DOMではなくCanvasを使った版もあります。 実践的なデモ。 ShuffleText.jsを使うとテキストが格好良くシャッフルされた後、元のテキストに再現されます。思わずマウスを動かしてみたくなるのではないでしょうか。あまり使いすぎると邪魔くさく感じますので、ポイントを見極めて使うのが良いでしょう。 ShuffleText.jsはTypeScript製のソフトウェア（ソースコードは公開されていますがライセ
zPath.js - SVGをアニメーションしながら描画 MOONGIFT
SVGの良いところはベクターベースのデータである点と、内容がXMLなのでプログラマブルに操作可能ということです。バイナリデータと異なり、一部だけを描画したり色を変えると言ったことも簡単にできます。 そこで使ってみたいのがzPath.jsです。SVGを読み込んでアニメーションしながら描画してくれます。 zPath.jsの使い方 一例。速度も制御できます。 描き方も変更できます。 zPath.jsを使えばロゴなどもアニメーションするように指定できます。これまでは動画やアニメーションGIFを使うしかありませんでしたが、zPath.jsを使うことでSVGを使う利点が生まれそうです。 zPath.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 zPath.js Demo Zet-Tools/zPath.js: A jquery plugin
executor editor - JavaScriptを実行できる埋め込み型エディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました かつてWebブラウザ上で任意のJavaScriptを実行しようと思ったらアドレスバーに入力するしかありませんでした。今はDevToolsが使えるようになり、自由にJavaScriptが実行できます。しかしこれはまだ開発者向けであって一般ユーザ向けではありません。 そこで使ってみたいのがWebブラウザ上で任意のJavaScriptが実行できるexecutor editorになります。 executor editorの使い方 メインの画面です。JavaScriptが編集できます。実行結果は下に出ます。 ペインの並びを横にもできます。 テキストの大きさなど、スタイルは自由に変えられます。 executor editorはJSFiddleのJavaScriptだけを抜き出したようなソフトウ
MidiWriterJS - JavaScriptによるMIDIファイル生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MIDIというと20年くらい前のWebで、ブラウザで音楽を流すのに使ったり、耳コピーした映画やドラマ、ゲームの音楽を配布するのに使われていた覚えがあります。 最近ではあまり聞きませんが、音楽の創作をもっとプログラマブルにすることで新しい可能性が出てくるかも知れません。そう感じさせるのがMidiWriterJSです。 MidiWriterJSの使い方 MidiWriterJSはその名前の通り、JavaScriptでMIDIファイルを生成します。例えば次のようなコードです。 // Start with a new track var track = new MidiWriter.Track(); // Define an instrument (optional): track.add
aalib.js - 画像や動画をアスキーアートに MOONGIFT
画像をテキストに置き換えるのは昔から行われている面白い試みです。様々なアルゴリズムや描画方法が存在し、緻密に再現するものもあれば、なるべく簡素に表現しようとするものもあります。 今回はJavaScriptで画像をテキスト化する、aalib.jsを紹介します。さらに画像だけでなく動画まで変換できるのがポイントです。 aalib.jsの使い方 モナリザの画像。 カラーにも対応しています。 マリリン・モンロー。かなり細かく、グラデーションまで再現されています。 動画をリアルタイムにテキスト化します。 実際に動かしているところ。ずれはフォントによるものと思われます。 aalib.jsはWebブラウザだけで画像をテキスト化できます。わざわざサーバを立てたりする必要はありません。ユーザがアップロードした画像をその場でテキスト化するなんて使い方もできるでしょう。 aalib.jsはnode.js/Jav
schedulerjs - スケジュール調整に使えそうな横向き予定表
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で様々な作業を行えるようになったことで、UIに求められる多様性も増しています。特に面倒だと感じるのは時間関係ではないでしょうか。カレンダー、ウィークリー、デイリーなどいずれにおいても時間に合わせた表示、処理は大変です。 そこで様々なライブラリを知っておくことでいざとなった時に役立ちます。今回は横型のスケジュール選択ライブラリschedulerjsを紹介します。 schedulerjsの使い方 schedulerjsの初期表示です。 薄いブルーのエリアはドラッグしたり、端をドラッグして枠の幅を増減できます。 実際に操作しているところです。 実際の描画は予定を配列で渡すだけです。 var list = [ { 'name': 'Chewbacca', 'appointments
BlockAdBlock - アドブロックが使われているかどうか検知
最近広告ブロックが話題になっています。個人的にはルールが変わったのだとみるべきだと思っており、かつての地図業界におけるGoogleマップ、ガラケーとスマートフォン、雑誌、新聞、テレビ業界などと変わらないと感じてはいます。 とはいえ、配信側のサービスも広告ブロックを甘んじて受け入れる必要もありません。対抗策として考えられるのがBlockAdBlockです。 BlockAdBlockの使い方 BlockAdBlockはAdBlockが入っているかどうかを検知できるライブラリとなっています。AdBlockが有効な状態だと赤くなります。 使っていなければ緑になります。 検出できるブラウザは限定されるようですが、AdBlockが入っていると分かればコンテンツを配信しないといったような手段はとれるかと思います。 BlockAdBlockはJavaScript製のオープンソース・ソフトウェアです。 Bl
flowchart.js - SVGのフローチャートを生成するJavaScriptライブラリ MOONGIFT
システムやワークフローを分かりやすく説明する際にフローチャートを使うことがあります。特に業務システムなど、多数のシステムが複雑に組み合わさって処理が実行される場合、きちんと可視化されているかどうかで結果が大きく変わる可能性があります。 Excelで仕様書を書いているとExcel上で完結しそうです。しかしこれでは検索性やメンテナンス性がよくありません。そこで仕様書をMarkdownやHTMLで書いているならばflowchart.jsを使ってみましょう。 flowchart.jsの使い方 flowchart.jsのデモです。専用の記述方法に沿って書くことで、右側のようなフローチャートが生成されます。URLがあるところはクリッカブルになっています。 さらにカラーリングの指定もできたり、縦ではなく横に広がっていく形にもできます。 flowchart.jsはSVGで生成しているのがポイントで、元文書
Smart Table Scroll - 100万行のテーブルも高速表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムでは大量のデータを一覧表示して欲しいというニーズがよく出ます。しかしあまり大量のデータを描画すると、それだけレンダリングに時間がかかったり、スクロールも困難になります。 そこで使ってみたいのがSmart Table Scrollです。なんと100万行以上のレコードも高速に描画できるJavaScriptライブラリです。 Smart Table Scrollの使い方 Smart Table Scrollのデモです。3カラムでの表示例となっています。 一番下は100万です（インデックスは0からはじまっています）。 実際のデモです。スムーズに動いているのが分かるかと思います。 Smart Table Scrollの種としては、描画しているデータ量にあります。 var table
Matter.js·モバイルをサポートしたJavaScript物理エンジン MOONGIFT
JavaScriptで有名な物理エンジンと言えばBox2Dですが、今回はまた違う選択肢を紹介します。 Matter.jsはモバイルにも対応した物理エンジンで、多くの面白い機能が備わったライブラリになります。 Matter.jsの使い方 多数のデモがありますので幾つか紹介します。こちらはよくありがちなブロック。マウスでドラッグして移動できます。 カラーリング。 振り子のデモ。 壁にぶつかる巨大な玉。PVでもこんなシーンあったような。 投石機っぽいデモ。 単純に落下するだけでなく、その流れをスローモーションにしたり、逆にスピードアップさせたりできます。 カーテンっぽいデモ。 ストレス。上の加重によって少しだけ沈み込んでいるのが分かります。 こちらは落下のスローモーション化するデモ。映画っぽくて格好良いです。 Matter.jsはWebGLやCanvasもサポートしています。イベントにも対応して
crossfade.js·スクロールで画像をぼかすエフェクト MOONGIFT
パララックスエフェクトによってスクロールに意味を持たせる動きが活発になっています。スクロールするとアニメーションしたり、色が変わったりするサイトもありますが、今回はまたちょっと違うアクションです。 crossfade.jsを使うと画像がぼかされて目立たなくなっていきます。シングルページのWebアプリケーションで効果的に使えそうです。 crossfade.jsの使い方 一番簡単な使い方は画像を指定するだけです。 $(function () { $('.crossfade').crossfade(options); }); 最初の表示です。ここからスクロールしていきます。 ちょっとぼやけてきました。 上までいくとぼやけが一番強くなります。 オプションとしてスタート、終了時の画像を指定します。crossfade.jsでは自動でぼかしを行っているのではなく、最初と最後の画像を指定して、その中間はC
Library Detector - あのサイトはどのJavaScriptライブラリを使っているか MOONGIFT
Webシステムを開発していると他のサイトがどういった仕組みで動いているか気になったりしますよね。HTMLソースやURLからどんなプログラミング言語で、どんなフレームワークか知ったりするのは面白いです。 サーバサイドは実際のところは分からないのですが、フロントエンドは分かります。ということで入れてみたいのがLibrary Detectorです。 Library Detectorの使い方 Library DetectorはGoogle Chrome機能拡張としてリリースされています。 インストール後、任意のWebサイトを見ると使われているライブラリがチェックできるようになります。 Yahoo! JapanはYUI 2を使っているようです。 Yahoo! ニュースはjQueryです。 jQueryはさすがにjQueryを使っていますが、さらにModernizrも使っています。 Backbone.
transitive.js - 路線図を生成するJavaScriptライブラリ MOONGIFT
データのビジュアル化を考えた場合、常に正確に出すのが最善とは限りません。トレンドを知りたい場合はその傾向を見るためにデータを無視したり、より特徴的なポイントに主眼を置いたりします。地図も同じです。 案内図などは正確性よりも直線や曲がり角を重視した図になっています。同様に路線図も駅の間隔や合流ポイントなどに主眼を置くでしょう。そんな分かりやすい路線図を生成できるのがtransitive.jsです。 transitive.jsの使い方 こちらがデモです。とても見やすい路線図ですね。 右側の路線をマウスオーバーすると、その路線だけがハイライト表示されます。 ズーム表示やマウスドラッグでの視点変更も可能です。 データを作るのが多少大変なように見えますが、一度作ってしまえば後はtransitive.jsが自動生成してくれるのが便利です。データ自体はデータベースに保存しておいてスクリプトで生成する形で
Knwl.js·テキストから意味のある情報を抽出する MOONGIFT
TwitterやFacebook、ブログなどオンラインにはテキストコンテンツが溢れています。メールも配信数が増すばかりで膨大な情報量を処理するのが困難になってきているのではないでしょうか。 そこで必要になるのがテキストから本当に必要な部分だけを抽出する技術ではないかと思います。そうすることで余計な情報を省き、処理量を減らせるようになります。 英語向けですが、そんなJavaScriptライブラリであるKnwl.jsを紹介します。 実行例。左側のテキストに対して右側に抽出された情報が一覧になっています。 任意のテキストから電話番号、日付、時間、場所、リンク、メールアドレスをはじめ様々な情報が抽出されます。また、スパム判定機能も備わっています。Knwl.jsをベースにすることでカレンダーに自動登録する機能を開発したり、アドレス帳登録の情報を補完する機能などが考えられるようになりそうです。 だらだ
EasyStar.js - ゲーム用。最適な経路を発見するJavaScriptライブラリ MOONGIFT
HTML5ゲームなどでコンピュータのキャラクターを動作させる時にその経路をどう決定すれば良いでしょうか。やり方は幾つかありますが、まず考えるのは最短距離を見つけることでしょう。 しかしゲームでは通り抜けられないオブジェクトがあったり、通れてもコストが高い（川のような）道もあります。そういった障害物もふまえて経路探索ができるライブラリがEasyStar.jsです。 キャラクターが順番に走っていきます。 キャラクターは個々にスタート位置とゴール位置がことなります。そのため一時は同じ経路を歩んでもそれが最適とは限りません。 キャラクターの走り出すタイミングを変えるとそれがよく分かるかと思います。を EasyStar.jsHTML5のゲームで使う機会は多いと思います。また、そのアルゴリズムから参考になるポイントは多いのではないでしょうか。 さらに面白いのはEasyStar.jsには有償版のEasy
Virtual x86 - JavaScriptによるx86エミュレーション
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WindowsやLinuxがWebブラウザ上で動作しますよ！ 最近JavaScriptを使って既存のOSをエミュレートする試みが増えてます。既に10年くらい前のPCよりJavaScriptのが速いのではないでしょうか。何でもJavaScriptという環境がどんどん整いつつあります。 今回紹介するのはOSのエミュレートではなく、CPUエミュレータになります。x86の命令をnode/JavaScriptでエミュレートし、昔のOSをWebブラウザ上で実行しています。 Virtual x86では任意のCD、フリッピー、ハードディスクイメージが利用できます。QEMUをWebブラウザで実行しているイメージに近いと言えます。全ての機能が使える訳ではないようですが、x86の殆どの機能が使えるようで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
