プ譜エディターは書籍『予定通り進まないプロジェクトの進め方』(著: 前田考歩、後藤洋平)で 紹介されているプロジェクト譜(以下、プ譜)を Web ブラウザで編集・表示するためのエディターです。
プ譜エディターのStorybookページをご覧ください。
プ譜エディタおよびTailwind CSSインストール
npm install @goto-lab/pufu-editor
src/App.js
import { ProjectScore } from "@goto-lab/pufu-editor";
function App() {
return (
<div className="p-4">
<ProjectScore />
</div>
);
}
export default App;
参考: Install Tailwind CSS with Create React App
- 編集モード: プ譜の編集(デフォルト)
- フィードバックモード: プ譜の編集+コメントを追記できるモード
- プレビューモード: 編集不可の表示モード
- ダークモード: ダークモード表示
- モバイルモード: モバイル向け表示
- 言語選択: 日本語と英語のラベル表記
設定例
フィードバックモード & ダークモード
※ダークモードはTailwindcssのダークモードのClassを利用
<ProjectScore feedback={true} dark={true}/>
プレビューモード & モバイルモード & 英語表示
<ProjectScore preview={true} mobile={true} lang="en"/>
- JSON の取得
- JSON ファイルのダウンロード
- 画像ダウンロード(形式: PNG、SVG)
import {
ProjectScore,
getScoreJson,
downloadScore,
} from "../components/ProjectScore";
//uniqueKeyを設定
<ProjectScore uniqueKey="sample1"/>
//uniqueKeyを指定してエクスポート
//json取得
const json = getJson("sample1");
//ダウンロード
download("sample1", "json");
download("sample1", "svg");
download("sample1", "png");
本モジュールはBSDライセンス (3-clause BSD License)にて提供致します。 原則として、重要な場所にコピーライト表記を記載いただければ、自社サービスの事例紹介やオウンドメディアでのプロジェクトストーリー紹介など、自由に利用いただくことができます。
本モジュールを本格的に商用利用したい、つまり、プ譜が収益やユーザーの獲得における主要な要素となるような事業、製品、サービス等を展開したいご意向がある場合は、上述の利用の対象外となるため、是非、お気軽に、当社の連絡窓口(info@gotolab.co.jp)まで、ご一報いただけると幸いです。 過去の取り組みを通じて蓄積されてきた事例情報や知識、ノウハウのご提供、事業提携、ネットワーキング支援等、幅広くご相談のうえ、良い形での協力関係を構築させていただきたく存じます。
「キックプ譜」及び「プ譜エディタ」は、「予定通り進まないプロジェクトの進め方」の共著者である前田氏と、開発者である山下氏の両名と一緒に進めている取り組みです。 紛争や誤用、悪用等の防止のため、プ譜は株式会社ゴトーラボにて商標登録しております。利用者は、プ譜エディターを利用した場合、本項目の内容に同意したものとみなします。