ｐｒｐｒの紹介 ＞ 1.「順次・分岐・反復」

リンク指定の一覧

ｐｒｐｒの紹介 ＞ 1.「順次・分岐・反復」

おまけ【他のHTMLファイルの呼び出し】

・prprで作られた他のHTMLファイルをサブルーティンとして呼び出すことができる。
・<nav>タグ内に<a>タグで <a href="" class="pr41">●●の紹介へ</a> のようにリンク指定する。
・呼び出されたファイルの中で、<a href="" class="fukki">復帰</a> のようにリンク指定する。ここがクリックされると、呼び出した時のファイルの次のスライドが表示される。

・体育大会や文化祭など大きな行事を2人で前半・後半に分けて紹介するときは、戻ってくる必要がないので、サブルーティン呼び出しではなく普通のリンクを使う。
・前半の最後のスライドの<nav>タグの最後に　preditorのリンクボタンで、URL pr42.html　テキスト 文化祭後半へ　などと入力してインサートし、pr42の前の http:// を削除する。

ｐｒｐｒの紹介 ＞ 2.preditor ＞ 編集のコツ

・文章の一部を選択して、B [太字], I [斜体], A [フォントファミリー], T [フォントサイズ], ∂ [色] を適用すると、選択部分の書体・デザインが変化する（日本語の書体では変化が出ないものもある）。
・¶[段落の書式], Ξ [配置], 旧 [番号付き箇条書き], ∈ [インデントを減らす], ∋ [インデントを増やす] を適用すると、選択された段落のスタイルが変化する。スペースやEnterでレイアウトしないこと！
・∞[リンク], 四[画像の挿入], 冊[表の挿入], ー[水平線の挿入], で部品を挿入する。サブメニューでさらに細かく指定できるものもある。 ∬[書式のクリア]  で選択部分の書体・デザインの指定をリセットする。
・⊃[元に戻す], ⊂[やり直す], φ[コードビュー] はデザインを指定する命令ではなく、入力やデザイン指定などの編集操作を元に戻したり、やり直したり、ソースコード表示・コンテンツ表示を切り替えたりするもの。Enter（段落分け）と Shift+Enter（改行）の違いは、ソースコードを見ると、段落タグ<p>と改行タグ<br>の違いだと分かる。

ｐｒｐｒの紹介 ＞ 2.preditor ＞ 画像の挿入の注意点

・画像などの素材には、著作権や肖像権があるので、正しく利用する。自分で作ることができれば、権利を気にせずに使える。人工知能の助けを借りる方法もある。 https://www.autodraw.com/ で適当に絵を描くと、きれいなイラストの候補が示されるので、左上の≡マークをクリックしてDownloadする。Inkscapeに読み込んで、ベクトル化しておくとよい。挿入する画像が図やイラストの場合、積極的にベクトル画像を使う。svgはファイル容量が小さく、拡大縮小しても変化しない。アニメーションにも向いている。

・挿入する画像が写真の場合、決してそのまま使ってはいけない。ファイル容量が大きすぎる。また、顔がはっきり写っているものもNG。

ｐｒｐｒの紹介 ＞ 2.preditor ＞ 画像の挿入の注意点（その２）

・写真が必要なら、「提出フォルダ-作品づくり画像置き場」から探す。写真をダブルクリックするとフォトビューアーで表示されるが、１枚ずつしか見られず時間がかかる。右上の▼[その他のオプション]で「大アイコン」を選び、全体をずらっと表示させてから選ぶとよい。いいものを見つけたら、コピー(CTRL+C)して　同じフォルダで貼り付け(CTRL+V)る。貼り付けたらすぐに、F2キーを押してわかりやすい名前に変更しておく。必ず半角英数で！　→　CTRL+C、CTRL+V の復習はこちら…

・写真ファイルは、EPR（EasyPictureResizer）にドラッグ＆ドロップ（左ボタンを押したままマウスを動かし、移動先でボタンを離す）すること。ファイル容量を減らして通信量の無駄をなくし、撮影時の位置情報などを消去する効果がある。[スタート]をクリックすると、public_html/imgフォルダにs_xxx.jpgという縮小されたファイルが作られるので、画像の挿入には必ずこれを使う。

ｐｒｐｒの紹介 ＞ 2.preditor ＞ 画像の挿入の注意点（その３）

・「スライドに入れる画像を選ぼう！」の　[ファイルを選択] ボタンをクリックし、imgフォルダの中から画像を選ぶ。img/s_xxx.jpgを選択してCtrl+C(コピー)しておき、「画像の挿入－URLによって」で Ctrl+V(貼りつけ)してインサートする。その後、画像の大きさや位置を調整する。

ｐｒｐｒの紹介 ＞ 2.preditor ＞ 画像の挿入の注意点（その４）

・①挿入後の画像を選択すると四隅に■が表示されるので、つまんで画像の大きさを調節する。②８つのサブメニューのうち、左上２番目の「配置」で左や右に寄せる。③画像の横に文章を回り込ませるには、サブメニュー左下の「ディスプレイ」で「インライン」を指定する。「ブレークテキスト」を指定すると、回り込みが解除されて画像の上か下に文字が移動する。④サブメニュー左下２番目の「スタイル」で丸く切り抜いたり、枠線をつけたりできる。…filmクラスのdivを使えば、次のスライドのように文字や画像の重ね合わせもできるが、HTMLではワープロソフトのような自由なレイアウトは難しい。本格的にWebデザインをするにはCSSを勉強する必要がある。

③コピーや比較をしたいウィンドウを左右に並べて操作しやすくする
・ウィンドウが一つしかないときは、CTRL+Nでウィンドウを複製しておく。
・画面のいちばん下のタスクバーの何もないところを 右クリック－ウィンドウを左右に並べて表示(I) をクリックする。もし、3つ以上並んだときは、不要なウィンドウを最小化してからもう一度操作する。
・コピーしたいファイルをクリックして CTRL+C（コピー）、コピー先のウィンドウで CTRL＋V（貼り付け）でファイルがコピーされる。

… ＞ 2.preditor ＞ 編集するときの時短ワザ④⑤

④preditorの場合はウィンドウを上下に並べる
・preditorの表示には広い横幅が必要なので、 右クリック－ウィンドウを上下に並べて表示(T) を使う。

⑤mery同士の場合はタブを無効にして並べる
・meryを２つ並べたいときは、ウィンドウ(W)－タブを有効にする(T)のチェックをはずしてから並べる。

… ＞ 3.アニメーション ＞ ドローイング用SVGの作り方１

・写真やイラストを手に入れる。形が複雑すぎず色がくっきりしているものがやりやすい。トリミングなど調整を加える。なるべく、色がはっきりしている方がよい。それを縮小する。
・Inkscapeを起動し、ファイル（F）-インポート(I)で、写真を読み込む。SHIFT+CTRL+D で、ページサイズをコンテンツに合わせて変更(Z)-ページサイズを描画全体または選択オブジェクトに合わせる(R)をし、ドキュメントのプロパティは閉じる。ときどき、表示(V)-ズーム(Z)-描画全体(D)で見やすくする。

・①（カラー）：画像が選択された状態で、SHIFT+ALT+B(ビットマップのトレース)をし、ライブプレビューのチェックを入れる(ON)。多重スキャンの色数(L)を選択。スキャン回数(A)は、小さめで。平滑化(M)OFF、スキャンを積み重ねる(K)ON、背景を削除(V)OFFにする。[OK]をクリックしてトレースを実行する。SHIFT+CTRL+X(XMLエディター)で、<svg:image～の行を選択し、DELキーで削除する。ファイル(F)-名前をつけて保存(A)-ファイルの種類(T)でプレーンSVGを選択して保存する。

… ＞ 3.アニメーション ＞ ドローイング用SVGの作り方２

・②（モノクロ）：①と同じような操作をするが、多重スキャンの色数(L)のかわりに色の量子化(Q)を選択し、平滑化(M)ON、スキャンを積み重ねる(K)OFF、背景を削除(V)ONにする。<svg:image～を削除後、ノードでパスを編集するためにF2キーを押す。SHIFT+CTRL+Kでサブパスに分解し、プレーンSVG形式で保存する。

・③（合体）：カラーとモノクロのSVGファイルができたら、meryで合体させる。カラーのsvgファイルのグループタグ(gタグ)のIDを変更しておく（<g id="layer1" →　<g id="layer2" ）。モノクロのsvgファイルをmeryで開き、layer2のgタグの部分をそのままコピーし、layer1と</svg>の間に貼り付けて、プレーンSVG形式で保存する。あとは、preditorでfirebaseへアップロードし、URLをコピーして、<div class="tegaki1" src="https://firebase～"のように貼り付ければ動く。

… ＞ 3.アニメーション ＞ モーフィング用SVGの作り方

・モノクロの画像を２つ用意する。影絵のような単純な絵で穴がなくひとつにつながったもの。写真から作るときは、モノクロ化してトーンカーブでコントラストを最大にし、穴は塗りつぶすとよい。
・④（シルエット）：②と同じような操作をするが、色の量子化(Q)のかわりに明るさの境界(B)を選択し、平滑化(M)ON、スキャンを積み重ねる(K)OFF、背景を削除(V)ONにする。<svg:image～を削除後、プレーンSVG形式で保存する。
・⑤（合体）：２つのSVGファイルをmeryで合体させる。２つ目のsvgのgタグのIDを変更（<g id="layer1" →　<g id="layer2" ）し、layer1と</svg>の間に貼り付けて、プレーンSVG形式で保存する。あとは、preditorでfirebaseへアップロードし、URLをコピーして、<div class="henge1" src="https://firebase～"のように貼り付ければ動く。２つ目のsvgがずれて気になる場合は、<g transform="translate のX座標とY座標の補正値を <path d=" の最初の２つの数字に適用して0にする(layer1とlayer2の両方とも)。