プログラミング言語 - TypeScriptの記事一覧
TinaCMS - React製のWebサイト編集ツール
Webサイトを構築する際、見た目と作成環境がかけ離れていると、修正して結果を確認するという作業を何度も繰り返さないといけません。WYSIWYGなエディタもありますが、CMSのように決まった形ではないので複雑なデザインは作業量が増えてしまいます。今回紹介するTinaCMSはWebサイト上で使える編集機能を実現します。項目...
Meriyah - 最新のECMAScript仕様も使えるJavaScriptパーサー
JavaScriptが色々なプラットフォームで使われるようになっています。JavaScriptから別な言語に変換するパーサーなどを作りたいと思ったら必要なのがパーサーです。コードを解析することで、別な使い方が生まれます。今回紹介するMeriyahはJavaScriptで作られた（実際にはTypeScriptですが）Ja...
takenote - シンプルなMarkdown対応のメモソフトウェア
Markdownベースのメモソフトウェアが増えています。多くが3ペイン構成になっており、左側にフォルダ、中央にファイル一覧、そして右側がエディタとなっています。メモを一カ所にまとめておくことで、すぐに探し出せたり、メモできるのが便利です。今回紹介するtakenoteもそんなメモソフトウェアの一つです。シンプルなMark...
Markdown - Markdown記述をサポートするツールバー
Markdown記法はそれほど複雑ではないものの、括弧の順番を忘れてしまったり、テーブルの文字寄せの書き方を調べたりすることがあります。慣れていない人にとってはまだまだ難しい記法と言えるでしょう。そこで使ってみたいのがMarkdown（以下、Markdown（WYSIWYG）とします）です。同名のライブラリなのが気にな...
webp-hero - WebP非対応ブラウザでも表示するpolyfill
WebPはGoogleがメインで開発を進めている画像フォーマットです。写真やイラストなど用途を区別せずに使えるフォーマットで、とてもサイズが小さく済むのが特徴です。しかし、対応しているブラウザが限られるのが難点です。そこで使ってみたいのがwebp-heroです。WebP非対応ブラウザでも表示可能にするpolyfillラ...
Sh**t! I Smoke - 副流煙の問題を可視化するアプリ
日本では決められた場所以外での喫煙は禁止されていますが、海外ではまだまだ屋外での禁煙規制は弱いのが実情です（逆に屋内は制限されています）。副流煙の問題であったり、ポイ捨てや他の人に火が当たったりする危険があり、歩きタバコは問題になっています。そんな中注目したいのがSh**t! I Smokeです。今自分がいる場所にお...
React SlideShow UI - Slideshare/Speakerdeck風の表示を行うReactコンポーネント
スライドを共有するSlideshareやSpeakerdeckのようなサービスを作りたいと思ったことはないでしょうか。個人的には以前作ったことがあるのですが、その頃はFlashに変換してビューワーで表示するのが基本でした。今であればPDFや画像化して表示することでしょう。今回紹介するReact SlideShow UI...
Kanban Board - リッチなWebカンバンシステム
カンバンシステムはTrelloの登場以降、様々なシステムが作られています。シンプルなものもあれば、ものすごくリッチなものもあります。導入する場合には自分たちの組織にあったものを選定する必要があるでしょう。今回紹介するKanban Boardはタグやカレンダー連携などの機能を備えたカンバンシステムです。## Kanban...
Jasper - GitHub用のIssue管理を強力にサポート
GitHubのIssueはプロジェクトやオープンソース・ソフトウェアが成長するために必須の機能です。しかし、その数が増えるとついつい見過ごしてしまったりします。その結果、数ヶ月放置されるなんてことも少なくありません。その結果、開発者を失望させてしまいます。そうならないために使ってみたいのがJasperです。まるでメーラ...
Glitch Studio - グリッチ画像を自在に作成
グリッチには何とも言えない魅力があります。古く言えばファミコンカセットを中途半端に差し込んだ時の画像と言うか、普通ではない状態だからこそ感じる面白さがあります。今回紹介するGlitch Studioはそんなグリッチ画像を様々なフィルタを通して作成できるソフトウェアです。## Glitch Studioの使い方画像を開き...
MarioHTML - Web製のマリオブラザーズ
マリオブラザーズは登場以来、世界中の人たちに愛されるキャラクターになっています。そして、開発者にとってはマリオブラザーズ風のゲームを作るのが楽しみの一つにさえなっています。今回紹介するMarioHTMLはWebブラウザ上で遊べるマリオになっています。## MarioHTMLの使い方ゲーム画面です。土管には入れませんが、...
Featmap - Webでユーザストーリーマッピング
ユーザーストーリーマッピングという考え方があります。左右にユーザ体験の価値を時系列とし、上下に優先順位を指定してストーリーを並べていきます。類似したストーリーは優先順位に沿って上下に並べます。そんなユーザーストーリーマッピングによってストーリーの漏れを防ぐことができます。Featmapはまさにそのためのソフトウェアにな...
hashids.js - 数字からYouTube風のID文字列を生成
WebサービスでユニークなURLを提供する際に、IDを数字のまま出してしまうとデータ件数が何件あるのかバレてしまいます。そこでランダムな文字列を作ってIDの代わりにしたりします。しかし、数字のIDとランダムな文字列、二つ管理するのは面倒です。そこで使ってみたいのがhashids.jsです。数字からYouTube風なID...
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の使い方初期設定...