HandyFlowyでプレゼン SlideShow
あるいはWorkFlowyをスライドスタイルにする方法。
Cardyの副産物
HandyFlowy 1.0Cardyで試行錯誤しているときに生まれました。PowerPointのようなスライドスタイルです。キーワードを羅列しその順に解説すればプレゼンになる。iPadの画面に合わせてあります。iPhoneではモダン広告みたいなデザインですけど、使い方次第かな。
MemoFlowy経由で登録→ http://tinyurl.com/z3ck5t6
WorkFlowyをスライド・スタイルに
スクリプトを走らせると、黒地に白文字の画面に変わります。フォントが大きく、行間も広い。中央のコントローラーを右斜め上にスワイプすると平行移動できます。兄弟トピックに表示が切り替わる。この平行移動は「人に見せること」を想定してますね。
トピックを開いたりズームしたりすると、関係性を視覚化できる。ボールドやイタリックで色がつきます。駆使すれば、通常のスライドより説得力が出そう。
切り替えはトグル式
この拡張スクリプトはトグル式になっています。SlideShowをもう一度走らせるとスタイル解除。つまり必要なときだけ使える。今日はエイプリルフール
実用的かと言えば、まだまだ疑問の残るレベルです。でも「ウソから出たマコト」という諺もある。WorkFlowy単体でプレゼンできる日も来るかもしれません。操作的にはスライドショーを想定してそうだし。画像表示に対応すれば化けるんですけどね。スクリプト本体
トグル式の雛形は下記の通り。appendChild()でスタイルを貼り付けるときidを設定しておく。すると、そのidのremoveChild()でスタイルが解除されます。if(document.getElementById("SlideShow")){
document.body.removeChild(SlideShow);
}else{
e=document.createElement("style");
e.id="SlideShow";
e.innerHTML="body{background:black;}#header{display:none;}#documentView{background:none;}.page{color:white;background:none;font-family:Hiragino Sans;line-height:1.4em;}.parent>.name>.content{color:gray;background:none;font-size:small;margin:1px;}.parent>.name>.parentArrow{display:none !important;}.selected{border-top:none;}.project.selected>.name .content{color:white;font-size:150%;font-weight:bold;line-height:1.4em;text-align:center;margin-top:50px;margin-bottom:50px;}.project.selected>.children>.project{word-break:break-all;background:none;padding:5px;margin:0px;margin-bottom:5px;border:0;}.project.selected>.children>div>.name .content{color:white;font-weight:normal;font-size:x-large;line-height:1.4em;padding-bottom:10px;}.contentTag{color:white !important;text-decoration:none !important;}.contentLink{color:white !important;text-decoration:none !important;}.contentUnderline{color:aqua;border:0;}.contentBold{color:red;border:0;}.contentItalic{color:yellow;}.notes>.content{color:lime !important;font-size:large !important;line-height:1.4em !important;}.bullet{background-image:none;}.bullet:before{content:'🔸';}.project.open>.name>.bullet{border:none;background:none;}.bullet,#bulletBucket .bulletBucketBullet{background:none;}.children{position:relative;margin:0px;border:0px;}.selected>.children>.project .project{font-size:large !important;margin-left:30px;margin-bottom:10px;border:0;}.project.highlighted::before,.project.moving::before,.project.tapped::before,.draggableNameClone::before {background:none !important;}#moveDropLine{background:yellow;}";
document.body.appendChild(e);
}