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

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

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

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

もっと見る

List

  • 2017/07/21

eCards - 送ろう!Web上でeカード作成

誕生日やクリスマスなどに、西洋ではグリーティングカードを送ります。日本でも売られてはいますが、年賀状ほど有名ではないでしょう。そして、最近ではもっと手軽にeカードが使われるようになっています。今回紹介するeCardsはWeb上でeカードを作成できるソフトウェアになります。## eCardsの使い方メイン画面です。テーマ...

List

  • 2017/07/17

asciicast2gif - asciicastをアニメーションGIFに

ターミナルの入力をそのまま記録、再現してくれるasciicastは便利なサービスですが、ブログなどに埋め込みたいと思ってもJavaScriptが許可されていないケースも多いでしょう。GitHubのREADMEもそうです。そうした時にリンクだけ貼るのでは面白くありません。そこで使ってみたいのがasciicast2gifで...

List

  • 2017/07/17

JSON-Splora - GUIのJSONビューワー/エディタ

JSONの構造を確認するのは意外と面倒です。配列とオブジェクトを見分けるのも大変ですし、構造を間違えるとデータが取れなかったり、プログラムがエラーになってしまいます。構造が簡単に分かるようになっているとプログラミングも捗るでしょう。そこで使ってみたいのがJSON-Sploraです。GUIでJSON構造が簡単に分かるよう...

List

  • 2017/07/16

VMS - Vue.js製のCMS

CMSは常に新しいものが登場します。それはプログラミング言語だったり、フレームワークだったりします。CMSがあることで、そのプログラミング言語やフレームワークの使い方が分かるようになります。CMSは殆どの方が機能について理解していますので、コードの理解も早いでしょう。今回はVue.jsを使ったCMS(管理画面)のVMS...

None

  • 2017/07/15

jsonsmash - ファイルシステムのような操作ができるJSONビューワー

Web APIを伴う開発を行う際にはJSONファイルを使うことが増えています。XMLに比べると冗長性がなく、サイズが小さくて済むのですが、改行などもなく見づらいのが難点です。そのため、データのある場所を間違えてしまって、うまく動かないなんてこともよくあります。そこで構造を確認するために使ってみたいのがjsonsmash...

None

  • 2017/07/14

Godzilla - ES2015のJavaScriptをGoに変換

JavaScriptがあらゆる領域で使われるようになっています。Webブラウザはもちろんのこと、サーバサイドやIoT、スマートフォンアプリなどもJavaScriptで作れるようになっています。それだけにJavaScriptさえ覚えておけば大丈夫という風潮があるのも確かです。しかしシステムには向き不向きがあります。もしG...

List

  • 2017/07/14

GraphiQL.app - GraphQLの実行環境アプリ

REST APIに変わる(かも知れない)のがGraphQLです。クライアント側から欲しいデータカラムについて指定できるので、拡張性が高かったり、エンドポイントも一つで済むのが利点です。まだまだ情報が多いとは言えませんが、今後広まっていく仕組みでしょう。そんなGraphQLのクライアントがGraphiQL.appです。G...

List

  • 2017/07/12

React Native Web Player - React NativeをWebでプレビュー

ReactはWebだけでなく、スマートフォン開発においても使えるフレームワークになっています。一度書けばすべての環境で動作する、という訳ではありませんが一度Reactの書き方に慣れてしまえば様々な環境に対してソフトウェアが開発できるようになります。そんなReactのスマートフォン版であるReact NativeをWeb...

List

  • 2017/07/10

kingraph - 家系図/組織図ジェネレータ

組織図であったり、家系図といった図を描こうと思ったらどんなツールを使っているでしょうか。ドローツールも使えますが、編集したりするのが面倒だったりします。Excel職人の方はやはりExcelを駆使して作り上げてしまうかも知れません。今回はWebベースで使える家系図を作れるkingraphを紹介します。## kingrap...

List

  • 2017/07/10

share-this - Medium風にテキストをシェアする

オンラインのコンテンツはシェアされることで広まっていきます。Facebook、Twitter、Redditなど様々なサイトでシェアされ、さらに拡散されていきます。しかしシェアするというのも多少なりとも面倒なものです。そこで使ってみたいのがshare-thisです。Webサイト内に仕込んでおくことで、シェアが手軽になりま...

List

  • 2017/07/09

ecola - タッチスクリーン用のツリーエディタ

この操作は新しい!デスクトップとタブレット、スマートフォンではユーザ体験が全く異なります。同じ操作を行うにしても、デスクトップらしい操作、タブレットらしい操作があります。特に大きな違いとしてタッチディスプレイが当たり前な操作かどうかがあります。今回紹介するecolaは特にタッチスクリーンを対象としたツリーエディタになり...

List

  • 2017/07/08

decaffeinate - CoffeeScriptからES6へ変換

CoffeeScriptはJavaScript代替言語として一世を風靡しましたが、言語トレンドの移り変わりは非常に速く、今はECMAScript 2015(ES6)やTypeScriptで作るのが流行になっています。もうあまりCoffeeScriptを使う人はいないのではないでしょうか。そうした中にあって扱いに困るのが...

List

  • 2017/07/07

chirp - Electron製のTwitterアプリ

Electronを使うとWebサイトをアプリ化するのが簡単になります。さらにネイティブのOSに関連した機能も使えるので、単なるWebアプリケーションに比べてリッチな機能が実現できます。しかもマルチプラットフォームで動作するのが魅力です。今回紹介するchirpもそんなソフトウェアの一つです。マルチプラットフォームで動作す...

List

  • 2017/07/06

flubber - 違いは細かいところに現れる。スムーズなアニメーションライブラリ

HTML5の表現力が上がったことで、SVGなどを使ってプログラマブルなドローが実現できるようになってきました。パスを編集するだけで形を変更できるので、ある形から別な形に変更するのも難しくはありません。しかし、それが自然かどうかは別です。もし自然なモーフィングを求めているならばflubberを使ってみましょう。## fl...

List

  • 2017/07/04

appr-wrapper - Apple Payを手軽に実装できるJavaScriptライブラリ

Appleの提供する決済システムApple PayはiOS、macOSユーザにとっては便利な決済方法となっています。通常Webサービスレベルで提供されるところが、OSと関連した形で使えるのが特徴です。また、決済に対して障壁の少ないApple IDが使えるのも利点です。そんなApple PayをWebシステムで手軽に使え...

List

  • 2017/07/03

UpUp - Webのオフラインアクセス機能を簡単に実装する

HTML5になって追加された機能の一つにオフラインアクセスがあります。しかし扱いが非常に難しく、あまり使われていません。しかしネットワークがない場所(飛行機など)で情報が確認できないのは非常にストレスでどうにか改善したいと考えている人も多いでしょう。そこで使ってみたいのがUpUpです。オフラインアクセスを簡単に実装でき...

List

  • 2017/07/02

mokuji.js - HTML文書の目次を自動生成

HTMLは基本的には構造化されたドキュメントです。見出しや小見出しをHタグで定義することでクローラーやシステムにとっては構造化された文書であると判断できます。人間の目ではスタイルシートで自由に見た目を変更できてしまうので分かりづらいかも知れません。しかし開発者向けのドキュメントなどできちんと構造化されているならばmok...

List

  • 2017/07/02

StatiCrypt - HTMLをパスフレーズで暗号化

もしあなたがスパイで、本国に安全にメッセージを送らないといけないとしよう(そんなシチュエーションがあるかどうかはさておき)。メッセージはテキストだけでなく、文字装飾がないと分からないものだったとしたら、HTMLで送るのが良さそうだ。しかし素のHTMLではネットワークをモニタリングされていたら読まれてしまうかも知れない(...

List

  • 2017/06/30

SmartPhoto.js - 横スライドする画像ビューワー

画像とレスポンシブデザインの相性はあまりよくありません。最適なサイズで見せたいと思ってもパーセントで指定せざるを得ないですし、テキストのように自由に改行ができる訳でもありません。特に写真をメインにしたサイトでは悩みのタネでしょう。そこで使ってみたいのがSmartPhoto.jsです。特にモバイルデバイスに最適化されたレ...

List

  • 2017/06/28

docsify - 動的/静的両方に対応したドキュメントジェネレータ

APIやSDK、ライブラリなどにドキュメントは必須です。しかも読みやすく、分かりやすいドキュメントでなければなりません。デザインに凝るのではなく、可読性を重視して作られるべきです。そういったドキュメントはなかなか作るのは難しいでしょう。そこで使ってみたいのがdocsifyです。ドキュメントサイトを作るためのフレームワー...