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

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

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

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

もっと見る

List

  • 2017/06/25

jquery-rsSliderLens - レンジ入力を格好良く変身させる

HTML5になってWebフォームのコントロールは増えていますが、それでもなお標準のままではあまりにチープです。そこでスタイルシートなどを駆使してデザインを変更するのはよくあることです。今回注目するのはレンジコントロールです。一定の範囲内にあるデータを指定するのに便利ですが、表示があまりよくありません。そこで使ってみたい...

List

  • 2017/06/24

kityminder - 高機能なWebベースのマインドマップ

マインドマップは思考整理ために必須ツールです。紙や画面に書き出すことで、思考の漏れを省き、網羅的に考えられるようになります。コツとしてはいきなり深く考えるのではなく、満遍なくドリルダウンしていくことです。今回はWebブラウザで使えるkityminderを紹介します。十分使える機能が揃っています。## kityminde...

List

  • 2017/06/24

That's Text - Safariのテキスト編集を外部エディタで行う

Webブラウザのテキストエリアでの文字入力というのは非常にストレスがかかります。普段使っているプログラミングエディタと全く異なり、殆ど機能がありません。メモ帳レベルの機能しかありません。これで長文を書いて欲しいと言われたらがっくりしてしまうでしょう。そこで使ってみたいのがThat's Textです。Safariのテキス...

List

  • 2017/06/23

EmojiPanel - Webベースの絵文字パレット

絵文字は多くのWebサービスで使われるようになっています。自分のサービスでも取り入れたいと考える方も多いでしょう。スマートフォンやmacOSであれば絵文字入力が行えますが、その他のOSでは別途仕組みを用意しなければなりません。そこで使ってみたいのがEmojiPanelです。Webベースで絵文字入力ができるパレットです。...

List

  • 2017/06/22

SecureLogin - 別なデバイスで許可して認証する

認証の仕組みはWebがはじまった当初から大して進化していません。IDとパスワードという二つの認証情報をベースに鍵ファイルを使ったり、スマートフォンを使った二段階認証と発展版が出ていますが、大きくは変わっていません。新しいログインの仕組みとして登場したのがSecureLoginです。簡単に言えば二つのデバイスを組み合わせ...

List

  • 2017/06/19

Prettier Markdown - Markdown中のJavaScriptコードを整形

Markdownで書いていて、コードを実際のプログラムからコピペすると、インデントの調整が必要になります。さらに普段書いているコードとドキュメント用のコードで若干形を変えたい時には修正が必要になります。その結果、スペースとタブが折り混ざる状態になったりします。そうしたコードにまつわる問題を解決してくれるのがPretti...

List

  • 2017/06/19

Safari Text2Link - URL風の文字列をクリッカブルに

Webブラウジングしていて、URLがテキストで書かれているケースがあります。2ちゃんねるなどではhttpではなくttpを使って自動リンクされないようにしている場合もあります。はっきりいってユーザビリティの低い仕組みに他なりません。そこで使ってみたいのがSafari Text2Linkです。URL風の文字列をクリック可能...

List

  • 2017/06/17

Yomu - 英和辞書付きのPDFビューワー

PDFは閲覧用ドキュメントフォーマットとしてよく使われています。日本語のドキュメントはもちろん、英語圏でもよく使われます。DRMを嫌う層の多い英語圏では、電子書籍をDRMのないPDFとして配布しているケースもよくあります。そんな英語のPDFを読む機会の多い方に使ってみて欲しいのがYomuです。英和辞書機能がついたPDF...

List

  • 2017/06/17

agitodo - クロスプラットフォームで動作するTodo/カレンダー

個人的にはカレンダーとタスク管理は融合しておくべきと考えています。かといってGoogleカレンダーのようにスケジュール管理の付属機能の一つにタスク管理がある形ではありません。あらゆるスケジュールはタスクであり、すべてのタスクは期限を持っているべきです。そんなコンセプトで開発されているのがagitodoです。スケジュール...

List

  • 2017/06/16

Hardbin - P2Pを使ったスニペットサービス

オンラインで情報を発信したいと思ったら、サーバを借りたり、クラウドに立てる必要があります。またはどこかのネットサービスを使う手もありますが、そのデータはネットサービスが終了する際に消失してしまったりします。そうした面倒さやリスクを避けて使えるテキストスニペットサービスがHardbinです。## Hardbinの使い方メ...

List

  • 2017/06/16

tScroll - 多彩なテキストアニメーションライブラリ

単なるテキストだと見過ごされてしまうかも知れません。そこで必要になるのが目立たせるための工夫です。文字の色を変えたり、フォントを変えたりすることもできますが、ちょっと安っぽくなってしまうこともあります。そこで使ってみたいのがtScrollです。文字をアニメーションさせることで印象づけるテクニックが使えます。## tSc...

List

  • 2017/06/15

roulette - 抽選で当てよう

集まった人たちに対して景品を出したりする時、その抽選をする仕組みが必要です。ビンゴであればビンゴマシーンが必要ですし、ごく少ない人数であればあみだくじでも良いでしょう。そこで使ってみたいのがrouletteです。何が当たるか楽しみな抽選ソフトウェアです。## rouletteの使い方最初の画面です。!

List

  • 2017/06/15

Gist HTML Preview - GistのHTMLを取得してプレビュー

Gistはちょっとしたコンテンツを載せておくのに便利ですが、セキュリティ上の制限も幾つかあります。例えばHTMLを書いてもソースが表示されるだけでHTMLページとして表示はできません。そこで使ってみたいのがGist HTML Previewです。Gistで書かれたHTMLを表示してくれるソフトウェアです。## Gist...

List

  • 2017/06/14

Ory - 段組まで変えられる高いカスタマイズ性を持ったWYSIWYGエディタ

一昔前のCMSというとユーザの見る画面と管理画面がはっきりと分かれていました。セキュリティ上はやりやすいかも知れませんが、管理者としてはユーザがどう見えているかを逐一確認する必要があって不便でした。最近ではユーザの見ている画面上でそのまま編集できるものが増えています。その最新作と言えるのがOryです。## Oryの使い...

List

  • 2017/06/14

png2svg - PNGをSVGに変換

SVGもドロー系フォーマットとして一般的になりつつあります。モダンなWebブラウザは表示に対応していますし、JavaScriptと組み合わせればFlash風なインタラクティブ性を持ったコンテンツも作成できます。そんな中紹介したいのが画像をSVGに変換するというpng2svgです。## png2svgの使い方png2sv...

List

  • 2017/06/12

PathFinding.js - 様々なアルゴリズムで最適な経路を探索

ある点からある点までの最短距離を調べるアルゴリズムがあります。簡単なものであれば人間の目で見た方が早いですが、込み入った図になると最短距離を見つけるのも容易ではありません。そこで使ってみたいのがPathFinding.jsです。最短経路の調査を様々なアルゴリズムを用いて検証できます。## PathFinding.jsの...

List

  • 2017/06/11

svgbob - アスキーアートをSVGに変換

READMEなどテキストファイルには罫線を駆使したアスキーアートが載ることが多々あります。一度だけであれば良いのですが、メンテナンスもしづらいですし、見やすいものではありません。しかし技術者としてはドローソフトウェアでいちいち描いたりするのも面倒です。そこで使ってみたいのがsvgbobです。## svgbobの使い方一...

List

  • 2017/06/09

Shop.js - Eコマース用のUIコンポーネント

Webデザインフレームワークは多数ありますが、多機能なものほど縛りが強く、自分の思うようにデザインできないことがあります。そんな中、最近ではWeb Componentという概念によって、一つのコンポーネント単位でのUIも出てきています。今回紹介するShop.jsはECサイトで使われる要素を小さなUIコンポーネントとして...

List

  • 2017/06/09

glsl2img - GLSLファイルを画像に変換

3Dやグラフィックスを描くのに使われるのがシェーディング言語になります。その一つで知られるのがGLSL(OpenGL Shading Language)で、OpenGLの中で使われているシェーディング言語です。そんなGLSLが書かれたファイルを画像に変換するのがglsl2imgです。## glsl2imgの使い方まず一...

List

  • 2017/06/07

Naumanni - 日本製のMastodonクライアント

Mastodonが一気に注目を集めています。ブームは去った感がありますが、残った人たちが使い続けていくことでTwitterとは異なる生態系が形成されていくことでしょう。そんな中必要になるのが専用クライアントです。元々MastodonではTweetDeck風のUIが提供されていますが、より便利に使えるようになるのがNau...