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

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

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

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

もっと見る

List

  • 2017/07/24

jquery-rsSlideIt - 2D/3Dでダイナミックなスライド切り替え

よりインパクトのあるスライドを目指すならば一つ一つのスライドはもちろん、そのスライドの切り替えにもこだわると良いでしょう。ダイナミックなアニメーションがあると目を引くプレゼンテーションにつながるはずです。今回紹介するjquery-rsSlideItはjQueryプラグインとして作られたスライド切り替えライブラリです。#...

Missing

  • 2017/07/23

Aperture - nodeを使ってコマンドラインでスクリーンキャプチャ

コンピュータの操作を記録するソフトウェアは幾つもあります。昔はあまり選択肢がなかったですが、今ではOS標準のソフトウェアでレコーディングできたりします。その多くのソフトウェアはGUIで、マウス操作を使って録画しなければなりません。もっとプログラマブルにレコーディングをしたければApertureを使ってみましょう。コマン...

None

  • 2017/07/23

google-apps-script - Google Apps Scriptをローカルで開発/管理

Google Apps Scriptを使うとGoogleスプレッドシートやドキュメントなどの自動操作ができるようになります。若干特殊なJavaScriptにはなりますが、デバッグ実行もできるので開発もしやすいです。難点はコードをすべてWeb上で書くという点です。開発をローカルで行いたいという方はgoogle-apps-...

List

  • 2017/07/22

Github Stars Manager - GitHubのスターを付けたリポジトリをタグで管理

皆さんがGitHubのスターを何のためにつけていますか。応援として使っている方もいるでしょう。スターを付けているリポジトリを取得することもできるので、ブックマークとして使っている方もいます。ただ、あまり便利に使える訳ではありません。そこで一緒に使っていきたいのがGithub Stars Managerです。GitHub...

List

  • 2017/07/21

jQuery Images Compare - 二つの画像をスライダーで比較

JPEGなど圧縮率によって画像の粗さやサイズが変わるフォーマットの場合、実際にその保存方法によってどう変わっているか比較してみないと分かりづらいでしょう。その時、ウィンドウを切り替えながら比較しても画面がチカチカしてしまってははっきりと分かりません。そこで使ってみたいのがjQuery Images Compareです。...

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システムで手軽に使え...