2022-08-03の作業記録

TTHを進める水曜日

一行日記/読書日記
作業記録の共有
TH+chapter06のカード作り
Textbox+外部ファイルの読み込み処理を書く
メルマガ+sub2（定番商品/3200文字の原稿）
Honkure+『物語のカギ』
BCB+note01の項目２を固める
PT+項目１つ文章化

9:00

おはようございます。毎日やるやると言いながら、THのカード作りが進められておりません。

今日は、とりあえず3枚くらいを書くことを目標にしてみたいと思います。

あとで読む:対談本って作るのが難しい - by 魚住惇⌨️『教師のiPad仕事術』 - こだわりらいふ Newsletter

モーニング・ダイアリー:

昨日は、

『物語のカギ: 「読む」が10倍楽しくなる38のヒント』
『プレゼント』
漫画『アオアシ(6)~(15)』

を読みました。

10:00

Textbox:

若干気になっているので、少しコードを書いておきます。

＊　＊　＊

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    const f = document.getElementById('sliderfileinput');
    f.addEventListener('change', evt => {
        let input = evt.target;
        if (input.files.length == 0) {
            console.log('No file selected');
            return;
        }
        const file = input.files[0];
        const reader = new FileReader();
        reader.onload = () => {
            const pre = document.getElementById('sliderfileoutput');
            pre.innerHTML = reader.result;
        };
    reader.readAsText(file);

これでテキストファイルが読み込めるようになりました。

あとは読み込んだ内容を処理して、HTML要素を生成する処理です。

＊　＊　＊

イメージとしては、見出しと本文が並んでいるテキストファイルを読み込み、見出しをh3に、本文をpにして、それをモーダル風に一枚一ページで表示させ、スライドか左右のカーソルで「次のページ」を表示するようにすること。

問題は、「次のページ」を表示するアルゴリズムか。

＊　＊　＊

「スライドショー」で検索してみる。

【JavaScriptの実践】スライドショーの作り方 | ワードプレステーマTCD

操作のたびに、メインのinnerを入れ替える方法。逆に言えば、操作するまではDOMとしては描写されない。

【JavaScriptの実践】スライドショーの作り方 | ワードプレステーマTCD

これも同じ。

【JavaScript入門】即実践できる！スライドショーの作り方 | 侍エンジニアブログ

スライドショー｜文系大学生のためのJavaScript入門

これも同じ。

まあそうか。

一応すべての要素をDOMとして描写しておいて、ポジションを移動させることで見えるものを変化させていく、という紙芝居方式もあると思う（ページ数が多いと邪魔だけども）。

あるいは、中心の一枚と、左右のページを描写して、左右のページはかすかに見える程度にしておく、というやり方もある。7wrinerの応用。

まあ、でも、基本は「見えている部分だけ」を描写して、あとは中身を差し替える、というのが良さそうか。

その辺は、もうちょっと図を使って考えてみることにする。

11:00

TH:

とりあえず、3枚だけカードを書きます。

＊　＊　＊

本当に軽く進めました。ここから、じわじわと進めていきましょう。

14:00

メルマガ:

subの2を書きます。

＊　＊　＊

3200文字の原稿を書きました。これでメルマガの本編部分はOKです。

19:00

ぐったり疲れていましたが、少し記事を書きましょう。

Honkure:

記事を書きます。

＊　＊　＊

publish:Honkure:『物語のカギ: 「読む」が10倍楽しくなる38のヒント』（渡辺祐真/スケザネ） – Honkure

← → Top