GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Doc-Rot is a Catch-22 that Mermaid helps to solve. Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
<!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" href="https://unpkg.com/mermaid/dist/mermaid.min.css"> </head> <body> <div class="mermaid"> graph TD; A-->B; </div> <script src="https://unpkg.com/mermaid/dist/mermaid.min.js" charset="UTF-8"></script> <script> mermaid.initialize({ startOnLoad:true }); </script> </body> </html> 環境に依るかもしれないが、scriptのcharset指定しないとなんかmermaid.min.jsがエラー吐いて死
Top 5 : Best free jQuery and JavaScript Dynamic Gantt Charts for web applications
See our collection from 5 of the best free dynamic (non static gantt charts) Gantt charts JavaScript plugins. If you are working in project management or have a position that involves scheduling tasks and resources, then the therm Gantt chart won't probably sound unknown for you. With a Gantt chart you will have, at your disposal, a very clear view of all the activities scheduled, how long each ac
タスク、プロジェクト管理の表示に便利なガントチャートライブラリまとめ
業務システムでは各人員のタスク管理が重要になります。単発のタスクだけでなく、グルーピングしたり、さらにあるタスクの成果物が他のタスクに関連したりしていると必要になってくるのがガントチャートです。 今回はWebベース、HTML5で作られたガントチャートライブラリをまとめて紹介します。自社システムに組み込む際にぜひ参考にしてください。 Twproject Gantt Webサービスのガントチャートも提供していますが、オープンソース（MIT License）で取得もできます。チャート内での変種機能、クリティカルパス設定、リサイズ、スクロール、SVGによるドロー、ドラッグ&ドロップによる移動などの機能がサポートされています。 Twproject Gantt jQuery.ganttView シンプルな色合いのガントチャートです。ドラッグ&ドロップ、スクロール、イベントのハンドリングなどの機能があり
rustynes - Rust/WebAssemblyで作られたファミコンエミュレータ MOONGIFT
プログラムを覚える上でWikiや掲示板を作ってみるのは良いネタですが、バイナリファイルの扱いを覚えたりする時には何を題材にすると良いでしょうか。敷居は高いですがチャレンジしてみて欲しいのがファミコンエミュレータです。 多くのプログラミング言語でファミコンエミュレータが作られていますが、今回はWebブラウザ上で動作するrustynesを紹介します。 rustynesの使い方 音も流れます。 特に問題なく遊べます。 幾つかのROMが用意されていて、すぐに遊べます。 rustynesはRustで開発されており、WebAssemblyで提供されています。そのため、Webながら申し分ない速度で動作します。ついにWebブラウザであってもここまでのレベルに達したのかと驚くはずです。ぜひお試しを。 rustynesはRust製のオープンソース・ソフトウェア（MIT License）です。 rustynes
OpenPlayerJS - 動画と音楽に対応したメディアプレイヤー
HTML5になってvideo、audioタグが追加されました。これらのタグを使うことで動画や音声ファイルをWebブラウザ上で扱えるようになりましたが、そのUIはとても貧弱です。素のままではとても使いづらいでしょう。 そこで使うのがサードパーティー製のライブラリです。今回はシンプルで軽量なOpenPlayerJSを紹介します。 OpenPlayerJSの使い方 利用例です。ツールはしばらく経つと非表示になります。 動画の速度を変更できます。 音楽だけの再生もできます。こちらもスピード変更が可能です。 OpenPlayerJSは動画再生前の広告再生にも対応しています。字幕表示などの機能はありません。YouTubeなどに比べるとシンプルですが、多くの場合これで十分でしょう。音楽のスピード変更機能は嬉しい人が多そうです。 OpenPlayerJSはTypeScript製のオープンソース・ソフトウェ
Djangoでの環境変数と、Angularを用いたフロントエンドの実装
今回の内容 前回はDjangoの実践的なテストの書き方と、CircleCIを使った継続的インテグレーションについて解説しました。前回までのコードは以下から取得できます。 massa142/modern-django at volume3 第4回となる今回は、まず環境変数について取り上げます。環境変数を用いたsettingsファイルの書き方を紹介した後は、Angularを使ってカンバンボードのUIを実装していきます。 環境変数 環境毎に異なる値としては、データベースの接続に必要な情報やTwitterなど外部サービスの認証情報等が思い浮かぶと思います。これらの設定を定数としてコード上で管理することはもちろん可能ですが、セキュリティと保守性の観点から推奨されません。「The Twelve-Factor App」の教えにのっとり、設定は環境変数から渡すようにしましょう。 「The Twelve-F
Vueの秘密のパフォーマンステク9選紹介 - Qiita
VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu
TypeScript + Vue.js の始め方
こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう！😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います！
サーバーレスを使用して最初の６ヶ月で学んだ６つのこと - Qiita
こちらの記事は6 things I’ve learned in my first 6 months using serverlessの和訳になります。 サーバーレスの世界は適切なツールさえ見つければミドルレイヤーを省けるのでとても良いものです。 10月に行われたServerlessconfの後、自分の会社を全てサーバーレスにすることに決めました。最初の２ヶ月は Python Flask appにLambdaを導入するのに必死でしたが、そのおかげでより良い方法を思いつきました。 そして６ヶ月後、私たちにとって４番目に大きいプロジェクトをサーバーレスでデプロイすることになったのです。以下の内容がデプロイするまでに私たちが学んだ教訓、意見です。 レッスン１ Pythonの使用は避けましょう Flaskは昔ながらのリクエスト、レスポンスのスタイルで、サーバーによって管理されるセッションがあるWeb
岡田を切る技術 - Qiita
これはとある回顧録 何度も諦めかけましたが、数年の歳月を経て遂に岡田を切る技術が一旦の完成へと至りました。その技術を巡る奮闘の歴史と成果について、ここに記録を残していきたいと思います。 画像時代 まずは「切る」という動作が何を指すかを明確にしておきます。 厳密な定義というよりは、切った感を得るために必要そうなふるまいとして定義します。 平面上のある領域が、任意の直線を境界として分割されること 分割された領域は物理法則に準じてふるまうこと 要するに気持ちよく岡田を切ることができれば目標は無事達成です。 物理エンジン 切った感を高めるためにはやはり「物理法則」に準じたふるまいが欲しくなります。つまりブラウザ上で動く物理エンジンが必要です。 世の中にはフルスクラッチで物理エンジンを作れる人間と作れない人間が居ると思われますが、残念ながら私は後者でした。勝ち目の薄い勝負は避け、素直に巨人の方にすが
Canvas上のイメージを画像ファイルとして保存する方法 - JavaScript｜OAR CODE
Canvas上に描画したイメージを画像ファイルとして保存する方法についてです。 流れとしては、 CanvasからBase64データを取得 Base64データからBlobデータに変換 a要素を使ってファイルダウンロード という感じになります。 HTML <div style="width:300px;height:250px;"> <canvas id="myCanvas" width="300" height="250"></canvas> </div> <div> <button onclick="saveCanvas('png');">pngで保存</button> <button onclick="saveCanvas('jpeg');">jpegで保存</button> </div> JavaScript // canvas上のイメージを保存 function saveCanvas
フォームをぐっと使いやすくする！ウィザード型jQueryプラグイン6選【2017年版】
Webサイトのフォームの作成にはjQueryのプラグインが便利。中でも対話形式の使いやすいフォームを作成できるjQueryプラグインを厳選して紹介します。 ページの更新がなく、指示に沿って記入できるjQuery用のウィザード形式のフォームを作成するためのjQueryプラグインがあります。ユーザーデータを一度に入力させる大きなフォームなら、ウィザード形式に変えることで、小さなステップの入力に分割できます。これならユーザーが長い入力フォームにうんざりすることもなくなり、進行状況も示しせます。 この記事ではおすすめjQueryフォームウィザードを6つ、それぞれの特徴を踏まえて紹介します。有料版や自作する方法も少し触れます。jQueryのフォームウィザードを求めている人の助けになれば幸いです。 1．jQuery steps jQuery Stepsはウィザード型のインターフェイスを簡単に作れる気の
Javascript Japanese Keyboard
Javascript Japanese Keyboardを公開したヽ( ･∀･)ﾉ ただの単漢字変換のみ対応しているだけのVirtual Keyboardだけどね(ﾉ∀`) いずれ消しちゃうけどここで動作確認出来る。 漢字選択はマウスオンリー。 対応ブラウザは3DSブラウザとchromeとFireFox。 Androidのchromeでも動いた。 だがしかしIE、てめーは駄目だ(・∀・) XMLHttpRequestとイベントソースとファイル読込のところを いじらないと駄目なようなのでほっとくことにしたｗ 事の起こり 全てはFoto-Haikingを作っていた時に3DSブラウザの仕様というか 3DSの入力システムの壁にぶち当たったことから始まった。 と言っても入力システムの仕様はFoto-Haikingの機能に対して何の問題もなかった。 問題だったのは特に必要もないのに適当に思いついて実装
GitHub - timovn/js-keyboard: JS-based virtual keyboard
JS-based virtual keyboard. You can use it as a bookmarklet by using this link : javascript:s=document.createElement('script');s.id='r6109_vkbsgp';s.type='text/javascript';s.src='http://lehollandaisvolant.net/tout/dl/virtual-kb/keyboard.js?french,false';document.head.appendChild(s);void(null); – Change the french to the name of the layouth you want (the list of supported layout is below) – change t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ガントチャートライブラリ「Gantt-Chart」にテキストを追加する - 情報の科学私記
GitHub - techlab/jquery-smartwizard: The awesome jQuery step wizard plugin
GitHub - nhn/tui.virtual-keyboard
WanaKana.js
12 Awesome jQuery Virtual Keyboard Plugins | Learning jQuery