【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜 - Qiita
draw.io はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。 「こんな使い方あるよ！オススメだよ！！」という方はぜひ編集リクエストをいただければ追記していく予定です 😊 ※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメです。 ツイッター公式アカウント 公式ブログ ショートカット ショートカット集です。机の上に置いて覚えましょう。 Line / 線 まずは最も頻繁に使う Line(線)の使い方からご紹介します。 矢印をまっすぐに揃える ちまちまと矢印の線をドラッグして微調整し
ゲームのパワーアップ感覚でどんどんクーポン・会員割引・SNSやGoogleショッピング連携などのアドインを追加して「イージーマイショップ」の売る力を上げまくってみた
簡単にネットショップを開設可能で、面倒な在庫管理も自動でやってくれるネットショップ作成サービス「イージーマイショップ」は、「セット割り引き」「定期購入」「オーダーメイド注文」「会員限定割り引き」など、見に来た人がネットショップを何度も利用したくなるようなさまざまなオプションに対応しています。さらに、FacebookやInstagramといったSNSと連携できるほか、GoogleショッピングやYahoo!ショッピングと連携させることも可能とのことで、ネットショップを作った後、「売上げをどんどん増やしていくにはどうすればいいのか？」という疑問を解決するさまざまな機能を使ってみました。 ネットショップ開業はイージーマイショップ | セット販売やオーダーメイド商品に強いネットショップ構築 https://www.easy-myshop.jp/ イージーマイショップのネットショップはどうやって開設す
GlideならPWAを5分で作れるというのでBeatles DBというアプリを作ってみた - クモのようにコツコツと
令和からアクティブに行こう！ということで初めて勉強会に参加してみた。「PWA Beginners 勉強会 #5」、PWAは前から記事などで気にはしていたけど実際にどんなものなのか知っておきたく。当日、「Glide」を使ってスプレッドシートから5分でアプリを作る実演があったので自分も早速やってみました。それではいきましょう！ 【目次】 PWAとは？ Glideで5分でアプリ作成の実演を見た！！ 準備したスプレッドシート（Beatles DB） Glideのアカウントを作る！ GlideでPWAを作るっ！！ Beatles DBアプリ完成！！！ 最後に ※参考：PWA Beginners 勉強会 #5 - connpass PWAとは？ PWAは「Progressive Web Apps」の略。Progressiveは「進歩的な,革新的な」といった意味。私にとって印象深いのはプログレッシブ・ロ
現役デザイナー直伝！最高のアニメーションを作成する7つの小技テクニックまとめ
アイデアをカタチにするツールはたくさんありますが、個人的に最高のアニメーションツールは引き続きAfter Effectsと言えるでしょう。ただし、利用できるプラグインが多すぎて、どれを使って良いのか迷ってしまうのが悩みどころ。 今回は、現役デザイナーがウェブサイトやアプリのアニメーション作成で実践しているプラグインやツールを、7つのシンプルな手順を追ってご紹介します。このガイドラインでは、デザイナーとデベロッパーが一緒にプロジェクトを進める効果的な方法をマスターできます。 No.1 SketchかFigmaでデザイン開始 レイヤーにきちんと名前を付けているか確認しましょう。After Effectsに取り込んでしまうと、レイヤーを見つけるのが難しくなってしまいます。 AEUXプラグインを利用することで、SketchまたはFigmaで作成したレイヤーをAfter Effectsにボタンひとつ
これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア（無料）とオンラインサービス（無料と有料）です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
無料＆一瞬でDropbox上にウェブサイトを作成できるサービス「Small Victories」
自分のウェブサイトを作って公開するにはサーバーが必要ですが、自分で構築するのはかなり面倒ですし、レンタルすればお金がかかります。しかし、Dropboxのアカウントを持っていればクリックからたった数秒でDropbox上にウェブサイトを作成できて公開できるのが「Small Victories」です。実際にどれくらい簡単に作れるのか試してみました。 Small Victories http://smallvictori.es/ まずはSmall Victoriesのサイト中段にある「Connect to your Dropbox!」をクリック すると連携認証画面になるので「許可」をクリック こんなページに飛ばされます。 自分のDropboxページに戻ってみると「アプリ」というフォルダが作成されているのでこれをクリック 「smallvictori.es」というフォルダをクリック すると中には画像フ
TwitterのAPI 1.1で取得したユーザーのJSONデータからAtomフィードを作成する
Twitter API 1.1で取得した、任意のユーザーのタイムライン（JSONデータ）からAtomフィードを作成する方法を紹介します。 Twitter API 1.1で取得したJSONをAtomに変換したサンプル １．Twitterアプリケーションの作成 Twitterアプリケーション開発のページを開き、Twitterのアカウントでサインイン。 右上にある「Create a new application」をクリック。 「Application Details」のName、Description、Websiteを設定。Callback URLの設定は不要です。 下の方にある「Yes, I agree」をチェックし、CAPTHCAを入力して「Create your Twitter application」をクリック。 次の画面の下にある「Create my access token」をクリ
マインドマップを作成してWord/Excel/PowerPointなどと連携可能なフリーソフト「Edraw MindMap」
マインドマップに限らずブレインストーミングやSWOT分析などを作成する際に使えるソフトがこの「Edraw MindMap」です。作成した図はPowerPointや各種画像ファイル、PDFなどにエクスポートが可能。クリップアートも豊富に用意されており、これまでとは違ったプレゼン資料などが作成できます。日本語入力も大丈夫です。 作成例、インストール、操作＆機能については以下から。 Free Mind Mapping Software, Freeware, Create mindmaps for brainstorming, problem solving, rational analysis, and decision marking. http://www.edrawsoft.com/freemind.php ◆作成例 実際にこのソフトを使って作れる図はこのような感じ、かなり多種多様。 ◆イ
Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」:phpspot開発日誌
Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」 2011年06月14日- Official Demo page for MyQRCode jquery plugin Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」。 Google Chart API でQRコードを作る際にURLが長くなってなんとなく後でHTMLの可読性が悪くなり保守性が悪くなってしまったりしそうですが、このプラグインを使えばシンプルに、しかも動的にQRコードを出すことができます。 直接Canvasなどを使って描画するスタイルのものもありますが、ブラウザが対応していなければ表示できないので、クロスブラウザを保証したい場合は無難に<img>タグに頼るのがよさそうですね。 コードは次のように
PHP＆jQuery＆CSS3でMacのPhotoboothを作るチュートリアル:phpspot開発日誌
Photobooth with PHP, jQuery and CSS3 | Tutorialzine PHP＆jQuery＆CSS3でMacのPhotoboothを作るチュートリアル。デモのダウンロードも可能。 デモページはこちらで、なかなかカッコいい。 ページの下部にカメラがあり、クリックするとWEBCAMのFlashインタフェースが開き、写真をとってそのままUPみたいな流れのものが作れます。 カメラ付きのMacbookやAirでも当然使えます。 下部のレンズのクリックでカメラが出ます（当PCにはカメラがついていないので何も表示されておりません） 画像をクリックするとLightBox風にポップアップします。 チュートリアルのわりにチュートリアルらしからぬクオリティ。 これを応用してプロフィール写真の撮影等、サービスに応用してみてもよさそうですね。 関連エントリ CSS3で実装されたボタ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Googleスプレッドシートでチケット販売も可能なイベントページを作成出来る・「Slick.events」
IDEA * IDEA