プログラミング言語 - TypeScriptの記事一覧
Bibliotheca - Webベースの蔵書管理
個人、企業や公共団体などに限らず書籍を多数保管している人は多いです。それらを個人で楽しむだけでなく、他人に貸与する人もいるでしょう。そこで必要になるのが蔵書管理です。管理しておけば、誤って二冊買ってしまうなんて事態も防げます（好んで二冊、三冊買う場合は別です）。そこで使ってみたいのがBibliothecaです。Webベ...
DeckDeckGo - リモートコントロールもできるPWAのHTMLスライド
HTMLによるスライドは人気があります。Webブラウザだけで再生できるのでプラットフォームに依りませんし、最近ではPresentation APIもGoogle Chromeに搭載され、発表者ノートも使えるようになっています。今回はPWAとして作られたスライドアプリ、DeckDeckGoを紹介します。## DeckDe...
Filterizr - CSS3を使ったデータのフィルタリング、ソートライブラリ
Web上で情報を並べて表示する機会はとても多いです。そんな時、常に発生するのが並び替えや絞り込みのニーズです。データを消したり、並び替えて表示したりするのは意外と大変です。そこで使ってみたいのがFilterizrです。データのソート、フィルタリングに特化したライブラリです。## Filterizrの使い方利用例です。カ...
ViperCard - HyperCardをWeb上で再現
HyperCardは1987年に誕生したアプリケーション開発プラットフォームです。リンクで別なカードに移動したり、音声を鳴らす、オブジェクトを動かすなど当時から高レベルなアプリケーションとなっていました。そんなHyperCardを現代に蘇らせたのがViperCardです。しかもプラットフォームを固定しないWebベースで...
Shortcuts JS - iOSのショートカット機能用ファイルを生成するJavaScript
iOS12から、iPhoneの操作を自動化するショートカット機能が追加されました。自作もできるのですが、簡易的なプログラミングであるために敷居が高く感じてしまっている人も多いでしょう。逆にプログラマにとってはGUIで面倒だと思ってしまっているはずです。そこで使ってみたいのがShortcuts JSです。JavaScri...
jsii - JavaScriptから各種言語へ変換
一つの言語で書いたコードが他でも活かせれば開発効率は向上するでしょう。ロジックの共有化をすることで、プログラミング言語の選択肢が広がり、UIや利用層によって最適な言語が選択できるようになります。今回紹介するjsiiはJavaScriptからJavaや.NETへ変換できるライブラリです。## jsiiの使い方生成した例で...
graphql-cli - GraphQLを使った開発時に便利なCLIツール
GraphQLは注目度が高い技術であり、周辺ツールが充実してきています。それらのツールを組み合わせることで、GraphQLを使った開発がさくさくと進められるようになるでしょう。今回紹介するgraphql-cliは名前の通り、ターミナル上で便利なGraphQLツールになります。## graphql-cliの使い方初期設定...
GraphQL Zeus - GraphQL用のクライアントライブラリを生成
GraphQLの最も優れている点はWeb APIながらスキーマが用意されている点ではないでしょうか。それによってREST API以上に関連ツールが作りやすくなっています。動的にスキーマを読み込んでも良いですし、あらかじめコードを生成することもできます。今回紹介するGraphQL Zeusは後者に該当します。スキーマファ...
Argdown - 文章構造を可視化する記法
文章を構造化して書くのは難しいものです。特に長文になったりすると全体像を一目で把握するのが難しくなり、読み飛ばしてしまったりすれば意味を取り違えてしまうことになります。そこで使ってみたいのがArgdownです。文章構造を解析し、ビジュアル化してくれるソフトウェアです。## Argdownの使い方例です。左側が文章、右側...
Moveable - マウスでドラッグ/リサイズ/回転を実現
Webアプリケーションとしてドローアプリを作りたい、または一部の機能としてDOMを移動したりサイズ変更するような機能を設けたいと思うことがあります。しかし、DOMをインタラクティブに操作するのは困難です。そこで使ってみたいのがMoveableです。マウスでDOMを簡単に操作できるようになります。## Moveableの...
GraphQL Editor - Webブラウザ上でGraphQLを設計
GraphQLではAPIをスキーマとして表現します。データベースのテーブルと対になることも多いですが、それ以外のデータも扱えます。また、すべてのカラムを公開すれば良いわけではないので、入力制御も必要でしょう。そんなGraphQLのスキーマをWeb上で設計できるのがGraphQL Editorです。## GraphQL ...
Jay - 高機能なJavaScript用REPL
Node.jsではインタプリタを用意していますが、あまり機能的ではありません。ライブラリを別途用意したり、ネットワークなどの非同期処理を書くのも面倒だったりします。それならばとスクリプトをファイルに書いて実行している人も多いでしょう。そこで使ってみて欲しいのがJayです。標準のものに比べると圧倒的に高機能なREPLです...
Scene.js - JavaScriptでタイムラインベースのアニメーション
アニメーションの基本はタイムラインベースでしょう。様々なオブジェクトをいつのタイミングで動かすのか、どこに動かすのかをタイムラインに沿って決めます。その結果、複雑なアニメーションが実現できます。今回紹介するScene.jsはWeb上でのアニメーションを実現するライブラリです。## Scene.jsの使い方JavaScr...
TradingView - ファイナンス系グラフライブラリ
世の中には様々なグラフ、チャートがあります。その一つとしてファイナンス系があります。FXや株などで表示されるグラフは特殊で、さらにデータをリアルタイムに処理するのが重要です。今回紹介するTradingViewはまさにそういった用途で使われるグラフライブラリになります。## TradingViewの使い方ローソクチャート...
Terminus - TypeScript製のターミナル
AtomやVisual Studio Codeの登場によって、Web技術を使っても十分ローカルアプリケーションとして利用できるというのが分かっています。そこで様々なソフトウェアがHTML/JavaScript/CSSで作られています。今回紹介するTerminusもその一つです。よりモダンなターミナルを提供します。## ...
ぺぺロミア - React Native製の旅行計画アプリ
旅行の計画を立てるのはとても楽しいですよね。計画を立て始めた時、実際にでかける前から旅行ははじまっていると言えるでしょう。それはプライベートに限らず、出張なども同様です。移動などでミスして出張した意味がなくなるようなことがないよう、きちんとした計画を立てるべきでしょう。そんな旅行計画を立て、Web上でも共有できるスマー...
ken-burns-slideshow - ケン・バーンズ効果を実現できるWebコンポーネント
ケン・バーンズ効果という演出を知っていますか。複数を写真がある時、それを単に差し替えるだけでなく、ズームや左右上下にゆっくりとアニメーションしながら切り替えることで、単なる写真に命を与えると言われています。ケン・バーンズ監督が映画の中で使っていたことでそう呼ばれています。そんなケン・バーンズ効果を手軽に実現できるWeb...
Mongoku - クールなUIのMongoDB管理
MongoDBはNoSQL、ドキュメント型データベースとして注目を集めました。位置情報を扱うのに便利なデータベースでしたが、現在はMySQLやPostgreSQLも扱えるようになり、絶対にMongoDBでないといけない場面は減っているかも知れません。とはいえ個人的には今なお使っているのでMongokuのような管理UIは...
barba.js - スムーズなページ遷移を実現
Webページを素早く表示したいというニーズは強くあります。AMPのような技術しかり、PWAのCache APIもそうです。遅くて良いことなどありません。とにかくWebページは高速に表示すべきです。そしてそのためのライブラリも多数あります。今回紹介するbarba.jsは高速、かつスムーズなページ遷移を可能にするライブラリ...
OpenPlayerJS - 動画と音楽に対応したメディアプレイヤー
HTML5になってvideo、audioタグが追加されました。これらのタグを使うことで動画や音声ファイルをWebブラウザ上で扱えるようになりましたが、そのUIはとても貧弱です。素のままではとても使いづらいでしょう。そこで使うのがサードパーティー製のライブラリです。今回はシンプルで軽量なOpenPlayerJSを紹介しま...