WYSIWYGモードも備わったOSSのライブプレビュー機能付きMarkdownエディタ・「TOAST UI Editor」
TOAST UI Editor TOAST UI EditorはWYSIWYGモードも備わったライブプレビュー機能付きMarkdownエディタです。MarkdownモードとWYSIWYGモードとのスイッチが可能、リアルタイムでプレビュ...
Resource - Webディレクター向け
成功したスタートアップのプロジェクト立ち上げ当時のプロモーションビデオを収集している・「Startup Demo Videos」
Startup Demo Videos Startup Demo Videosは成功したスタートアップの当時のデモビデオを収集しているプロジェクトです。DropboxやGoogleのストリートビュー、SnapchatやiPhoneなど...
オープンソースなGoogle Inboxのデスクトップアプリ・「Inboxer」
Inboxer InboxerはGoogle Inboxの非公式デスクトップアプリです。OSSとしてソースコードも公開されています。Electronベースなので各OSで動作するようですね。公式のデスクトップアプリがまだないから作った、...
美しいグラデーションをリスト化、編集やCSSコードのコピーも出来る・「CSS GEARS」
CSS GEARS CSS GEARSは美しいグラデーションを公開しているプロジェクトサイトです。各グラデーションは編集も可能で、CSSコードをコピーする事も可能です。マウスホバーで左右にボタンが出ますので、カラーコードを直接編集する...
画像にインスタグラムのようなフィルターを付与できるスタイルシート・「Instagram.css」
Instagram.css Instagram.cssはインスタグラムのようなフィルターを画像に付与できるスタイルシートです。以前ご紹介したCSSフレームワークのSpectre.cssと同じ開発者の方が公開したCSSで、CSSgram...
30秒で理解できるものだけを集めたJavaScriptコードスニペット集・「30 seconds of code」
30 seconds of code 30 seconds of codeは「30秒で理解できるJavaScriptコード」をまとめたスニペット集です。理解力に欠ける自分の脳では30秒は難しかったですが、シンプルながら便利そうなコード...
オープンソースのBootstrap4テーマビルダー・「bootstrap.build」
bootstrap.build bootstrap.buildはBootstrap4のテーマビルダーです。OSSとしてソースも公開されています。コアの設定だけでなく、各コンポーネントの設計も可能で、コンポーネントごとに設定ページも分け...
インライン用のオープンソース国産WYSIWYGエディタ・「Lite Editor」
Lite Editor See the Pen Lite Editor - demo by appleple (@appleple) on CodePen. Lite Editorはインライン要素に特化したオープンソース国産WY...
チームで情報を管理、共有するためのオンラインツール・「Tixio」
Tixio Tixioはチームで情報を管理、共有できるツールです。ブックマークの延長・・みたいな印象でした。ボードに任意のウィジェットを作成、複数リンクをグルーピングする、みたいなもの。グループは一括で開くこともできます。また、簡易的...
オープンソースのファイルアップローダー・「Uppy」
Uppy UppyはOSSとして公開されているファイルアップローダーです。Googleドライブ、Dropbox、Instagram等との併用が可能で多言語にも対応しています。デフォルトのUIではリネームやキャプションの設定、ライセンス...
ポモドーロタイマー付きのOSSな国産Todoアプリ・「Pentazemin」
Pentazemin Pentazeminはポモドーロタイマー付きのTodoアプリです。日本の方が開発されたアプリでオープンソースとして公開されています。今やるべきことへフォーカスし集中することを助けるためのタスク消化を支援するアプリ...
ドラッグ&ドロップにも対応の、JavaScript製タイムスケジューラー・「jq.schedule.js」
jq.Schedule jq.ScheduleはJS製のタイムスケジューラーです。jquery及びjquery UIが必要です。日本の方が作成されています。タスク管理系のアプリや従業員のシフト管理ツールなど、利用幅は多々ありそうですね...
ウェブアクセシビリティを重視した使いやすいモーダルウィンドウ・「Modaal」
Modaal Modaalはウェブアクセシビリティを重視した使いやすいモーダルウィンドウです。WCAG 2.0の達成基準レベルAAをクリアしているそうで、全ての人にとってアクセスブルであると謳っています。jQuery依存っぽいのでこの...
コンポーネントやプラグインを豊富に同梱したBootstrap 4ベースのフリー管理画面テンプレート・「Pike Admin」
Pike Admin Pike Adminはコンポーネントやプラグインを豊富に同梱したBootstrap 4ベースの管理画面テンプレート。MITライセンスで商用でも無料で利用可能です。ルーマニアの開発者さんのようですね。管理画面に求め...
商用でも無料で使えるSVGで描かれた様々なイラストを公開する・「unDraw」
unDraw unDrawは商用でも無料で使えるSVG製のイラストを公開しているプロジェクトサイトです。ギリシャのイラストレーターさんが作成、公開しているもので、色の変更をしてからのDLも可能となっています。MITライセンスだそうで商...
画像を解析してパスを生成、単色のSVGに変換してくれる・「Tracy」
Tracy Tracyは任意の画像を解析してパスを生成、単色のSVGに変換してダウンロードできるツールです。基本的には紙で書いたものを即SVGにする、というのが目的のようです。トレースするからTracy、って事なんですかね。色の選択は...
手軽にインフォグラフィックやプレゼン等を作成、ダウンロードしたりembedで公開できる・「Visme」
Visme Vismeは手軽にインフォグラフィックやプレゼンを作成、ダウンロードや以下のようにembedでの公開が可能なWebサービスです。 Created using Visme. Free Online Presentati...
LESSベースの軽量でモダンなUIフレームワーク・「Petal」
Petal Petalは軽量でモダンなUIフレームワークです。よく使われるような各種コンポーネントやレイアウト、フォーム回りやユーティリティクラスやアイコン、バッジやカード、アラートなどWebアプリ向けのUIなども用意されており、それ...
オープンソースのTrelloライクなカンバンボードシステム・「Restyaboard」
Restyaboard RestyaboardはTrelloのようなカンバンボードを実装できるオープンソースのソフトウェアです。Webサイト上でもTrelloとの特徴の比較表が作られており、ざっくりとした違いを把握できます。後発故、R...
clip-pathで要素を斜めにカットするCSSライブラリ・「Angled edges」
Angled edges Angled edgesは要素を斜めにカットするためのCSSライブラリです。clip-pathを使っています。class付与で上デモのように手軽に斜めにカットできます。斜めにカットしなくちゃいけないシーン...
シンボルや矢印、絵文字などの特殊文字をクリックでコピー出来るシンプルで使いやすいツール・「⌘+C」
⌘+C ⌘+Cは特殊文字をコピー出来るWebサービスです。よくあるやつですけど個人的に見やすくて使いやすい印象でした。勿論、絵文字も揃ってます。こうして一覧を見ると絵文字は相当な数が用意されているんですね。 ⌘+C
CSSで作られた複雑なアニメーションエフェクトのスピナー集・「Epic Spinners」
Epic Spinners Epic SpinnersはCSSで作られた複雑なアニメーションエフェクトのスピナーのセットです。コピー&ペーストで利用できるようにしてあります。以下動作サンプルを1つだけ。 本スピナーは同じ...