Liam ERDで生成したER図をCloud Run on GCSで公開する
はじめに Liam ERD というツールを教えてもらいました。見た目がカッコいいので、いつでもみれるように Google Cloud 上に deploy します。 BigQuery, Cloud Spanner, Redshift, Snowflake など多数のクラウドサービスにも対応してるようです。 ゴール Cloud Run で Nginx をホストして、発行されるデフォルト URL にアクセスしてみられるようにします。 https://nginx-viewer-000000000.asia-northeast1.run.app/erd/dist/ 方法 1. 準備 Cloud Storage, Service Account を用意します。 # 利用する Google Cloud Project ID を指定する PROJECT_ID=xxxxxxxxx gcloud storag
図で理解する Flexbox
Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。 仕組み・使い方を理解しようと思い、図を使って整理してみた。 ※ CSS Grid についても整理してみました Flexbox Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央寄せ・上寄せなど細かな位置も調整できます。 コンテナ・アイテム Flexboxを使う上で必要となる要素が「Flexコンテナ」と「Flexアイテム」です。 Flexコンテナの中にFlexアイテムを複数並べてレイアウトします。 <div class="container"> <div class="item">１</div> <div class="item">２</div> <div class="item"
立体的な表現で見やすいネットワーク図がブラウザ上で作成できる「Isoflow」
ネットワークの構成を視覚的に把握しやすいアイソメトリック図で表現でき、作成した図面を共有して相手に見せることができるオンラインサービスが「Isoflow」です。 Isoflow https://isoflow.io/ まずはお試しですぐに図面の作成画面に行くことができます。「CREATE A DIAGRAM」をクリック。 表示されたキャンバス上の好きな位置のマス目をクリックするとノード部品が設置されます。 ノードが設置されると左側にダイアログが出現するので、Label入力欄で名前を付けます。ノードのアイコンを変更するため「Node icon」をクリック。 アイコン一覧が表示されるので目的のアイコンの絵をクリックして変更します。 さらにノードを増やした後、ノードアイコンをクリック。 ノードのサブメニューが表示されるので「Connect」をクリック。 ノードを接続するためのポインタをマウスで動
Webアプリパターンの歴史 - SST、AJAX、CSR、SSR、SSG、そしてISR - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに (1/2) Webアプリの動作するパターンをまとめました。歴史を振り返ることで JAMStack といったモダンなスタックがどういった点で有用なのか理解していきましょう。 発表者：@kimizuy 日々スプラのXPをどう上げるかに頭を悩ませています。ブログもあります。 はじめに (2/2) これは2020年9月16日開催のりあクト！ TypeScriptで始めるつらくないReact開発 第3版Ⅰ. 言語・環境編 読書会のLT用資料として作成しました。 ※ 続きの会も企画する予定です。どちらかというと初学者〜中級者向けです。興味
CSS Flexboxで実装する時に役立つチートシート、高解像度で印刷して机の脇に貼っておくと便利です
Flexboxのチートシートの一部 displayプロパティ Flexboxを使用するには親要素にdisplay: flex;（または、display: inline-flex;）を適用すると、その子要素がFlexアイテムになります。 flex-directionプロパティ FlexアイテムがFlexコンテナでどのように配置されるか明示します。方向は2種類で、横列（row）の水平、縦列（column）の垂直に配置できます。 flex-wrapプロパティ Flexコンテナが複数のFlexアイテムを一行（no-wrap）、または複数行（wrap）に配置することをコントロールします。 Flexboxの各プロパティの詳しい説明は、下記の記事をご覧ください。 CSS Flexboxの基礎知識と使い方をやさしく解説
【翻訳】 図解 プロダクトづくりの構造 - ykmc09 blog
訳者注 本記事は、Dan Schmidt 氏のブログ記事「A Visual Vocabulary for Product Building」をご本人の許可のもと日本語訳したものです。 ninjinkunさん、Koshiro Kumikoさんにレビューにご協力いただきました。的確かつ、建設的で思いやりのあるアドバイスとフィードバックに感謝します。 同一著者の関連記事としてこちらもぜひ合わせてご覧ください：【翻訳】プロダクトマネジメントトライアングル 以下、翻訳本文です。 プロダクトビルダー（訳注：プロダクトをつくる人たち）が自分のプロダクトに当てはめられるような、成功するプロダクトをつくる方程式はありません。これは、プロダクトが置かれている常に変化するコンテキストに、プロダクトづくりの詳細が大きく左右されるからです。あるプロダクトで成功した戦略が別のプロダクトではまったくあわないこともありま
図解 EC サイトの画面機能 | DevelopersIO
こんにちは！事業開発部の早川です。 早くも入社して 5 ヶ月が経ちました汗 引き続き、 prismatix の導入支援を行っています。 今回は、 EC サイトの画面機能についてお伝えします。 想定される読者 EC / CRM に関心のある方。 API / マイクロサービスという言葉は知っている (ただしマイクロサービスのイメージはあまりわかない) 方。 prismatix にご興味をお持ちの方ﾁﾗｯ 目標 本記事をご覧いただいた後、以下のように感じていただけていることを目標とします。 EC サイトの画面機能を整理できた気がする。 事例を通じて、マイクロサービスの活用イメージが少しわいた気がする。 prismatix に興味を持った / 話を聞いてみたいﾁﾗﾁﾗｯ 目的 EC サイトの機能を整理する過程において、機能レベルの関係性を把握できるような資料はあまり公開されていないと感じました。
新しくプロダクト開発に入ったときにやっていること | wapa5pow blog
年度が代わり新しい環境に行く人も多いですね。新しい環境・プロダクトだといろいろ戸惑うことがあります。自分は数年ごとに転職し、副業も複数のところでしているので初めての環境に関わることが結構あります。そのなかで素早くチームになじんでプロダクトに貢献できるようにやっていることがあるのでそれを紹介したいと思います。 自分がウェブやアプリのエンジニアなのでその文脈で話します。 「プロダクトのあるべき姿と現状を把握する」と「短期的・長期的に貢献できることを探す」ことを意識してやっています。 プロダクトのあるべき姿と現状を把握する 関わるプロダクトがユーザの何を解決しているのか理解することは開発する上で非常に大切です。機能を開発する上でもただ開発するだけでなくその機能自体が必要なのかどうか、必要ならどのような機能にすればユーザが問題を解決しやすいかという何を開発するかに密接にかかわっています。 1. ア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
わたヤク@AI臨床研究 on X: "作図における神ツール「Draw.io」ですが、VS Codeの拡張機能『Draw.io Integration』を入れることでローカルで動かせるだけでなく、何とGemini CLIを使って自然言語で作図できちゃいます。引用してる方法で手書きメモから図への変換も可能。画像は患者フロー図の日本語文章を英語に変換したところ。 https://t.co/2bS37YctGl"
GitHub - Uniswap/the-compact: The Compact is an ownerless ERC6909 contract that facilitates the formation and mediation of reusable resource locks.
GitHub - takaakit/uml-diagram-for-ddd-example-in-evans-book: UML diagram for the DDD example—a cargo shipping system—from Eric Evans' book
https://x.com/gorilla0513/status/1818926160056910023?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw
GitHub - eras/tlsd: Generate (message) sequence diagrams from TLA+ state traces
https://x.com/Taiyo_AiAA/status/1797561162491682939
GitHub - superform-xyz/superform-core
たいよう 📱 ICT LABO on Twitter: "2020年12月31日にツイートした、一番思い入れのある図解。 これは完全にバズ狙ったけど、その5日前に楽しみながら出したChrome 拡張図解がバズるという想定外もありました(笑) LIFE SHIFTはホントに名著です🍵 https://t.co/YgT2lmJAAF"
SiK on Twitter: "復習して覚えて、理解を深めよう！ 私の"米シリコンバレーDevOps監修！超Kubernetes完全入門(2020)【優しい図解説とハンズオン】"コース修了証書 https://t.co/7I53KPo2cQ @udemyより #駆け出しエンジニアと繋がりたい"
Excalidraw — Collaborative whiteboarding made easy
Killed by Google 🌻🇺🇦 on Twitter: "I got a DM, "How could you diagram and then set it up and not show us?" Fine. https://t.co/oC9xx5sWqR https://t.co/A8KJ3dqDL3"
猫森うむ子🐱⚡️フリーランス15年×図解ブログ on Twitter: "これから図解を始めたい人は、インフォグラフィック機能がますます充実したCanvaがおすすめ😺⚡️ 複数SNS用にリサイズができるCanva Proを使っても、Adobeよりコスパがいい⚡️ いずれデザインを仕事にもしたいという… https://t.co/CseKXSgc2D"