ITエンジニア/デザイナ向けにオープンソースを毎日紹介

プログラミング言語 - JavaScriptの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2019/03/28

Ambient Canvas Backgrounds - JavaScriptで背景アニメーションを生成

Webサイトの背景に動画を流したりするケースが見られますが、動画はサイズが大きくなりがちです。もっと軽量で、見た目のインパクトがある方法もあるでしょう。そのためにはJavaScriptで動的に作り出す方法が考えられます。今回はその一つの方法として、Ambient Canvas Backgroundsを紹介します。Can...

List

  • 2019/03/27

sourcebuster.js - トラッキング情報を取得

ソーシャルメディアやメールなどに記載されているURLをクリックすると、URLの末尾にutm_*といった文字が付いていることがあります。あれはUrchin Tracking Moduleの頭文字で、かつてGoogleが買収した(後にGoogleアナリティクスになった)Urchinが使っていたトラッキング用情報です。そんな...

List

  • 2019/03/26

Epitactic Cloud Browser - クラウド上にあるWebブラウザ

スマートフォンやタブレットでもPC版のWebブラウジングが必要な場面があります。そんな時、便利なのがクラウド上にあるWebブラウザです。しかしHTMLをそのまま返してしまったのでは意味がありません。そこで使ってみたいのがEpitactic Cloud Browserです。クラウドブラウザの名に恥じない動きをしてくれます...

List

  • 2019/03/26

jQuery Smart Wizard 4 - jQuery製のウィザードライブラリ

たくさんの入力欄があるフォームをまとめて入力するのは苦痛です。果てしなく続く入力欄を見ただけで気分が萎えてしまいます。そこで使えるのがウィザードです。入力欄をグルーピング、分割することで心理的負担を下げられます。そこで使ってみたいのがjQuery Smart Wizard 4です。jQuery/Bootstrapをサポ...

List

  • 2019/03/25

js-keyboard - JavaScript製の仮想キーボード

普段は日本語も英語も何でもキーボードで入力できますが、時々英語版や中国語版の他人のPCを使わなければならない時があります。そんな時に日本語が入力できず、ストレスを感じてしまうでしょう。そこで覚えておきたいのがjs-keyboardです。Web上で動作する仮想キーボードです。## js-keyboardの使い方ブックマー...

None

  • 2019/03/25

HistoryKana - JavaScriptで振り仮名の自動入力

Webサイトの入力時に、漢字を入力すると平仮名が自動補完されるサイトがあります。予測入力を使っているとうまく動かないのですが、それでも意外と便利です。ユーザの入力における手間はシステムで解決できる部分がたくさんあります。そんな振り仮名入力を行うライブラリがHistoryKanaです。## HistoryKanaの使い方...

List

  • 2019/03/23

Kanon - プログラミングコードを可視化

プログラミングは構造的です。そのため、構文解析して別な言語にしたり、ツリー構造に展開したりできます。それらの構造を見ることで、綺麗な設計になっているかどうかも分かりそうです。そんな可能性を感じさせるのがKanonです。JavaScriptのコードを解析、ビジュアル化します。## Kanonの使い方左側にコード、右上にク...

List

  • 2019/03/23

OCaml Blockly - OCamlとBlocklyを相互変換できるビジュアルプログラミング環境

Blocklyはブロックを使ってビジュアルプログラミングできるソフトウェアです。多くはそのまま実行して、コンピュータ上のキャラクターを動かしたり、IoTと組み合わせたりします。主に教育系システムの一機能として組み込まれます。今回紹介するOCaml BlocklyはそんなBlocklyとOCamlを組み合わせたソフトウェ...

List

  • 2019/03/22

iro.js - 色をホイールで選択するUIライブラリ

Web上で表現できる色は1600万色あります。ちょっとした違いを認識しながら色を選択するのは困難です。そこで色をピッキングする手法が様々に作られています。一つはサークル型のウィジェットです。今回紹介するiro.jsはそんなサークル型のカラーピッカーをJavaScriptで提供するライブラリです。## iro.jsの使い...

List

  • 2019/03/22

DJEN - メタル・ロックな音楽を生成

音楽の創作活動というのは才能と時間のかかるものです。数年かかって新しいシングルを一曲なんてのも珍しくありません。また、そうやってできあがった楽曲は著作権に縛られ、作曲家本人ですら自由に使えなかったりします。そこで使ってみたいのがDJEN、メタルやロックな音楽を生成してくれるソフトウェアです。## DJENの使い方プリセ...

List

  • 2019/03/20

marker.js - Web上の画像に注釈を追加

写真にマーカーを付けたり、注釈を入れたいと思うことがあるでしょう。通常は画像編集ソフトウェアを使って行います。Webブラウザからであれば一度画像をダウンロードした後、編集しなければならず面倒です。そこで使ってみたいのがmarker.jsです。Webブラウザ上から手軽に画像への注釈追加が可能です。## marker.js...

List

  • 2019/03/18

Simple URL Copy - スマートにURLとタイトルをコピー

URLをコピーするのは簡単です。問題はタイトルをコピーするのが面倒ということです。JavaScriptでプロンプトに出しても良いですが、ちょっと時代遅れなやり方です。もっとスマートに解決したいでしょう。そこで使えるのがGoogle Chrome機能拡張であるSimple URL Copyです。スマート、シンプルなやり方...

List

  • 2019/03/17

Slip.js - スワイプ&ドラッグが使えるリストUIライブラリ

スマートフォンアプリではリスト表示がよく使われています。多数の情報を一覧で表示する際に便利です。同様の表示をデスクトップ向けのWebサイトでも使いたいと思ったことはないでしょうか。そこでお勧めなのがSlip.jsです。リスト表示に加えてスワイプ、ドラッグによる並び替えもサポートしたUIライブラリです。## Slip.j...

List

  • 2019/03/17

Partyshare - IPFSを使って簡単にファイル共有

新しい技術がある時、それを文献で読んでもなかなか理解したり、腑に落ちることはないでしょう。開発者としては自分で手を動かして学ぶのが一番早いはずです。手を動かすことで理解度は飛躍的に高まります。今回紹介するPartyshareはP2Pにおけるハイパーメディア分散プロトコルであるIPFSを実際に使ったファイル共有アプリです...

List

  • 2019/03/13

Codecrumbs - システム理解を高める可視化システム

システムが大規模になるとファイルを分割し、各機能が分割して管理されるようになります。一つのファイルで長大なコードが書かれているよりも分かりやすいですが、定義元がどこで、何の変数を見ているのか分からなくなることもしばしばです。そこで使ってみたいのがCodecrumbsです。コードに印をつけることで、コード同士の関連性が可...

List

  • 2019/03/13

Netron - 機械学習のネットワークを可視化

機械学習ではフォーマットの標準化が進んでいます。これまでTensorflowやCaffe、Chainerなど様々なソフトウェアがありましたが、生成されるモデルがONNXというフォーマットに統一されつつあります(他にもあるようですが)。そんなONNXフォーマットのモデルをビジュアル化できるソフトウェアがNetronです。...

List

  • 2019/03/12

RTS - レスポンシブにテキストサイズを変える

レスポンシブWebデザインは標準的に用いられるようになっていますが、多くは幅や表示する項目の並べ替えに特化しています。Web上に最も多いコンテンツはテキストである以上、もっとテキストに気を配るべきではないでしょうか。そこで使ってみたいのがRTSです。レスポンシブにテキストサイズを変更してくれます。## RTSの使い方B...

List

  • 2019/03/11

MySigMail - メールの署名を作成

メールの署名はどういったものを使っているでしょうか。日本ではテキストメールが多いので、アスキーアートのように装飾されたものを使っているかも知れません。逆にとてもシンプルな人もいるでしょう。そんなメールの署名欄をビジュアル的に作成できるのがMySigMailになります。## MySigMailの使い方メイン画面です。左側...

List

  • 2019/03/10

NSFW JS - 職場厳禁な写真を判定

NSFWというのはNot Safe For Workの略で、職場では見るのに相応しくないコンテンツ(写真や動画など)のことを指します。万一そんなものを見ているところを同僚(特に異性)に見られたらどんな仕打ちを受けるか分からないでしょう。そこで使ってみたいのがNSFW JSです。問題のあるコンテンツを表示しないように制御...

List

  • 2019/03/10

Icotar - アイコンを動的に配信するサーバ

SVGも広まってはいますが、それでもなおPNGなどの画像を利用しているケースは多いです。そんな時、デバイスごとに最適なサイズを考えないと過剰にネットワークを消費したり、低解像度な画像を配信したりしてしまいます。そこで使ってみたいのがIcotarです。Material Design