カテゴリ: このブログの作り方

概要
この記事は「使い方説明書」の内容に追加された機能を解説するための動画です(音声なし)
WEBページ内の
単語ごとに別々の商品情報を埋め込む機能と
その単語に対応するデータがある場所を
データベースに登録し
いつでも表示させる機能の2つを新しく追加しました!!!


具体的な方法
ブログなどWEBページに埋め込まれた単語タイトルの商品ボックスのURLアドレスを
ローカルサーバーのSQLite3データベースに登録し、WEBブラウザで使用します
どのWEBページからでもその単語タイトルの内容を表示できます。

まず、最初に埋め込みデータを作成し、ブログにアップロードします
検証用のHTMLファイルもアップロードします
ブログにアップロードした
HTMLファイルをSafariブラウザで開いて「埋め込みデータの表示」を確認します

Ⓔ◎以下のWEBページを開き「AD_Ⓤ」ブックマークレットをお気に入りバーにドロップします
   http://localhost/data/Export/AD_WEB_PAGE/Ⓔブックマークレットを登録します.html
①◎埋め込みデータを単語タイトル***ごとに作成します
 ①◎商品ボックス一覧を作成してから「AD_Ⓤ」をクリックします
   Ⓐ保存先フォルダを指定します「A」
   Ⓑ埋め込み用の検索キーワード「data-title」に何も設定していない場合、一括して設定します
   Ⓒ個別にを設定する場合は
     「6」キーで編集モードに変更後に
     「SHIFT+OPTION」を押しながらバーコード画像を「クリック」します
   Ⓓ複数ある場合は分散してそれぞれの末尾に追加されます!!!
 ②◎内容の編集
   内容を変更したい単語タイトルのHTMLファイルを直接開いて、編集後に「AD_Ⓤ」をクリックします
②◎作成した「保存先フォルダ」をブログにアップロードします(Cyberduckアプリを使用します)
③◎ブログで表示する「HTMLファイル」にブログ内でのフォルダの場所を埋め込みます
   <title>Ⓑ◎ブログにアップロード</title>
   <DIV>すもももももももものうち<BR>
   中居正広のミになる図書館<BR>
   ダウンタウンDX<BR>
   MeCabの形態素解析の結果が保存されている場合<BR>
   そちらの読みを読み上げます</DIV>
   <DIV id="AD_STORE_ITEMS_IMPORT_WEB_PAGE" class="display_none"
    data-path="http://snowjobs.blog.jp/data/Export/AD_WEB_PAGE/content_blog"></DIV>
④◎ブログに「HTMLファイル」をアップロードします
   http://snowjobs.blog.jp/data/sample_test/2017_04_04/ブログにアップロード.html
⑤◎Safariブラウザで表示します
  「商品検索_mecabブックマークレット」をクリックし
    マウスポインタを対象の「文字列」に移動後に「1」キーを押します

これで埋め込んだ商品ボックスの表示されます!!!
以上で「埋め込みデータの作成と表示」の説明を終了します。


次は、上記の方法で埋め込まれた商品ボックスをデータベースに登録し、利用する方法を解説します
どのWEBページからでも
データベースに登録した商品ボックスを表示させることができます

データベースの利用環境
①◎下記のような空要素が埋め込まれたブログなどのWEBページで、SQLite3データベースに保存できます
   <DIV id="AD_STORE_ITEMS_IMPORT_WEB_PAGE" class="display_none"
     data-path="http://snowjobs.blog.jp/data/Export/AD_WEB_PAGE/content_blog"></DIV>
②◎データベースから取り込んだ(パスの)ファイルの内容はどのWEBページからでも表示できます
③◎ローカルサーバーを起動しておく必要があります
④◎インターネットに接続していない場合は、ローカルデータのみ表示できます


実際の操作(SAMPLE)
①◎MacOSXのSafariブラウザで下記のHTMLファイルを表示します
    http://snowjobs.blog.jp/data/sample_test/2017_04_04/ブログにアップロード.html
 Ⓐ以下の操作で、埋め込まれた商品ボックスを表示します
  「商品検索_mecabブックマークレット」をクリックし
    「すもも」の上にマウスポインタを移動後(または選択後)に「1」キーを押します
②◎データベースの操作
 Ⓐデータベースに登録 「ESC」+「OPTION」キー
   ①◎1つのみ追加します(埋め込まれた商品ボックスを表示中に)
   ②◎表示されたものすべて***を追加します
 Ⓑデータベースの内容を表示します 「1」 +「OPTION」キー
 Ⓒデータベースの内容を表示中に  「ESC」+「OPTION」キー
   ①◎データベースに再度アクセスして表示内容を最新の状態にします
   ②◎データベースの内容を以前の内容に戻します(PATH_A==)確認後にPATH_Bに変更します
   ③◎データベースから削除(PATH_A==)
 Ⓓ下記のWEBページでデータベースに登録した内容が表示されるか確認します「1」+「OPTION」
    https://www.google.co.jp/search?q=すもももももももものうち&ie=utf-8&oe=utf-8&hl=ja

使用したアプリのダウンロード先
ブログなどWEBサーバーにファイルをアップロードするアプリ「Cyberduck.app」
   https://cyberduck.io/index.ja.html?l=ja(Cyberduck for Mac)5.4.0.23761
SQLite3データベースの内容を表示するアプリ「DB Browser for SQLite.app」Ⓔ***③☆☆☆
   http://sqlitebrowser.org(Mac .dmg--v3.9.1)
 表示フォントの変更
   環境設定「Data Browser」「Font」「Hiragino Maru Gothic ProN「12

このWEBページは
誰でも簡単に
今まではWEBページ単位だった
広告など含む情報コンテンツの表示を
文字列の単語***単位で
個別に
また目的別***
表示が可能になったことを意味します

さらにデータベースに登録したものは
(そのとき見ているWEBページ内に同じ文字列が存在すれば)
いつでもすぐに表示できます

例えば
あなたの作成した情報コンテンツを
違う誰かがデータベースに登録しストックすることができます
いつでもそれを表示できます
そこから簡単にプリント操作に移行できます(A4サイズ2レイアウト)

もっとよくするには...
埋め込みデータのフォルダを
新規に作成した場合や変更があった場合
手動でWEBサーバーにアップロードする必要があります。
この操作を自動で行えれば
さらに便利になります

QRコードは「商品購入ページ」に瞬時にアクセスするためのものですが
バーコードは家庭内で使用する物の在庫状況を確認したりするためのものです!!!
しかし商品管理のための統合ツールは「使い方説明書」にはありません
いまのところ
バーコードは有効に使われていません

ブックマーク
スマートフォンでは文字数を制限されるためブックマークを表示できません
→ フリーフォント

◎フォントのリンク先(MacOSX)

▢▢▢

◎FONT FREE - 無料で使える日本語フォント投稿サイト
◎実用フリー無料フォントリンク集

Ⓐ◎特別な使い方

◎Font Changer1.01 △ウインドウズのシステムフォントを変更します***③☆☆☆
◎Phont △さまざまなIOSアプリで使用できるようにフォントをインストールします⇨▢***③☆☆☆

Ⓑ◎ヒラギノフォント

①◎ヒラギノ丸ゴ W3 StdN V8.00 △ヒラギノ丸ゴW4より少し線の細い特別なフォントです***③☆☆☆
②◎ヒラギノ丸ゴ W4 StdN V8.00(MacOSX に標準搭載 △ヒラギノ丸ゴW4ProN)

Ⓒ◎源ノ角ゴシックJP△7(Source Han Sans)
Ⓓ◎源柔ゴシックP 丸ゴジック△7

Ⓗ◎EPSONフォントセット△8

Ⓗ◎Windows用 EPSON TrueTypeFont Ver3.0△8書体一括のみとなっています
◎エプソン純正のフォントセット ttf30.exe
◎Keka0.1.4.2圧縮解凍ソフト △マックではこちらをお使いください***③☆☆☆

①丸ゴシック体 △16

①◎ぬかみそフォント△現在はダウンロードは停止中です
②◎ぬかみそ闇夜フォント
③◎EPSON 丸ゴシック体M
③◎EPSON 丸ゴシック体B△ボールド 太め
④◎FGBゼロ丸ゴシック ***☏☏ ⓜ
④◎FGBゼロ丸ゴシック △1000円***☏☏ ⓜ

⑤◎HC丸ゴジック△2

Ⓗ◎和文フリーフォント2 | けものもふもふ △HCフォント***③☆☆☆
④◎HC丸ゴジック-poo5△ABC
④◎HC丸ゴジック-too5 △ABC

⑥◎Rounded M+ⓟ △①thin ②light ③regular ④medium×1p2p △8
⑦◎和田研細丸ゴシック2004絵文字P (2015/06/18) 4.3.7.0 ⟶ ㋣
⑦◎和田研中丸ゴシック2004絵文字P (2015/06/18) 4.3.7.0 ⟶ ㋣***③☆☆☆

②角ゴシック△15

①◎03スマートフォントUI
①◎03スマートフォントUI △横書き専用プロポーショナルフォント(サポート外)
②◎ぼくたちのゴジック
③◎01フロップデザインフォント
④◎フォントポにほんご
⑤◎07やさしさゴシックボールド 太め
⑥◎07やさしさゴジック
⑦◎超極細ゴシック体***③☆☆☆
⑧◎EPSON 角ゴシック体B△ボールド 太め
⑨◎FGBウルトラ△以下はログイン後にダウンロードが可能となります
⑨◎FGBゼロコミック
⑨◎FGポップ ***☏☏ ⓜ
⑨◎FGモダン
⑨◎FGラブリー
⑨◎FGレトロ
⑨◎FGゼロ

⑨◎M+ OUTLINE FONTS の公開試用版△4

Ⓗ◎プロポーショナルフォント△28
◎固定幅フォントは1M 2M 1MNです△15
①◎mplus-1p-thin.ttf △ウルトラスリム
②◎mplus-1p-light.ttf △ライト
③◎mplus-1p-regular.ttf △レギュラー
④◎mplus-1p-bold.ttf △ボールド

③明朝体△6

②◎はんなり明朝
③◎ナヌム明朝体 △ひらがながキレイ△右端の上から4番目の緑ボタン[수동설치 버전(모든OS용)]--OTF
④◎02うつくし明朝体 - フロップデザイン
⑤◎EPSON 明朝体B△ボールド 太め
⑥◎花園明朝Ⓐ

④毛筆タイプの明朝体③

①◎GL-アンチックPlus (アンチゴチ体)
②◎XANO明朝 △エックス アノ---
③◎出島明朝

⑤◎特殊フォント

①◎じゃぽねすく---[入場]⇨左サイドバー[字形_]⇨[字形入口]⇨[上3左3]
②◎ピグモ00
③◎モフ字

⑥◎手書き風⑥

①◎KFひま字
②◎あずきフォント ⓟプロポーショナル △ブラウザのテキストエンコーディング⇨[日本語 Shift JIS]
③◎隼 文字(Falcon Font)
④◎JKゴシックL △女子高生風?の可愛い極細フォント
⑤◎瀬戸フォント
⑥◎ちはやゴシック | Font | Welina***③☆☆☆
⑦◎てあとりずむ △漢字ぼちぼち
⑧△るりいろフォント---リンク切れ

⑦◎映画の字幕風フォント③

①◎よもぎフォント***③☆☆☆
②◎しねきゃぷしょん △映画の字幕風フォント***③☆☆☆
③◎キネ丸ボールド***③☆☆☆
④◎てあとる16 △教育漢字

⑧◎ロゴデザイン④

①◎GD高速道路ゴシックJA OTF△漢字一部
②◎07ロゴたいぷゴシック
③◎国鉄方向幕書体 ***♔♔♔
④◎国鉄っぽいフォント△ぽいフォント---ブラウザのテキストエンコーディング⇨[日本語 Shift JIS]

⑨教科書体

①◎EPSON 教科書体M

⑨楷書体 △年賀状の宛名書きなどに最適な書体です

①◎EPSON 楷書体M

◎フォントのリンク先(ウインドウズ用)

◎サイト

◎FONT FREE - 無料で使える日本語フォント投稿サイト
◎実用フリー無料フォントリンク集

A◎特別な使い方

◎Font Changer1.01 △ウインドウズのシステムフォントを変更します***
◎Phont △さまざまなIOSアプリで使用できるようにフォントをインストールします***

B◎ヒラギノフォント

1◎ヒラギノ丸ゴ W3 StdN V8.00 △ヒラギノ丸ゴW4より少し線の細い特別なフォントです***
2◎ヒラギノ丸ゴ W4 StdN V8.00(MacOSX に標準搭載 △ヒラギノ丸ゴW4ProN)

C◎源ノ角ゴシックJP△7(Source Han Sans)
D◎源柔ゴシックP 丸ゴジック△7

H◎EPSONフォントセット△8

H◎Windows用 EPSON TrueTypeFont Ver3.0△8書体一括のみとなっています
◎エプソン純正のフォントセット ttf30.exe
◎Keka0.1.4.2圧縮解凍ソフト △マックではこちらをお使いください

1丸ゴシック体 △16

1◎ぬかみそフォント △現在はダウンロードは停止中です
2◎ぬかみそ闇夜フォント
3◎EPSON 丸ゴシック体M
3◎EPSON 丸ゴシック体B△ボールド太め
4◎FGBゼロ丸ゴシック
4◎FGBゼロ丸ゴシック△1000円

5◎HC丸ゴジック△2

H◎和文フリーフォント2 | けものもふもふ △HCフォント
4◎HC丸ゴジック-poo5△ABC
4◎HC丸ゴジック-too5 △ ABC

6◎Rounded M+△1thin2light3regular4medium×1p2p △8
7◎和田研細丸ゴシック2004絵文字P (2015/06/18) 4.3.7.0_ト
7◎和田研中丸ゴシック2004絵文字P (2015/06/18) 4.3.7.0_ト

2角ゴシック△15

1◎03スマートフォントUI
1◎03スマートフォントUI △横書き専用プロポーショナルフォント(サポート外)
2◎ぼくたちのゴジック
3◎01フロップデザインフォント
4◎フォントポにほんご
5◎07やさしさゴシックボールド 太め
6◎07やさしさゴジック
7◎超極細ゴシック体
8◎EPSON 角ゴシック体B△ボールド太め
9◎FGBウルトラ △以下はログイン後にダウンロードが可能となります
9◎FGBゼロコミック
9◎FGポップ
9◎FGモダン
9◎FGラブリー
9◎FGレトロ
9◎FGゼロ

9◎M+ OUTLINE FONTS の公開試用版△4

H◎プロポーショナルフォント△28
◎固定幅フォントは1M 2M 1MNです△15
1◎mplus-1p-thin.ttf △ウルトラスリム
2◎mplus-1p-light.ttf △ライト
3◎mplus-1p-regular.ttf △レギュラー
4◎mplus-1p-bold.ttf △ボールド

3明朝体△5

1◎はんなり明朝
2◎ナヌム明朝体 △ひらがながキレイ△右端の上から4番目の緑ボタン[수동설치 버전(모든OS용)]--OTF
3◎02うつくし明朝体 -フロップデザイン
4◎EPSON 明朝体B△ボールド太め
5◎花園明朝A

4毛筆タイプの明朝体3

1◎GL-アンチックPlus(アンチゴチ体)
2◎XANO明朝 △エックスアノ
3◎出島明朝

5◎特殊フォント

1◎じゃぽねすく---[入場]→ 左サイドバー[字形_]→ [字形入口]→ [上3左3]
2◎ピグモ00
3◎モフ字

6◎手書き風6

1◎KFひま字
2◎あずきフォントPプロポーショナル △ブラウザのテキストエンコーディング→ [日本語 Shift JIS]
3◎隼 文字(Falcon Font)
4◎JKゴシックL △女子高生風の可愛い極細フォント
5◎瀬戸フォント
6◎ちはやゴシック|Font|Welina
7◎てあとりずむ △漢字ぼちぼち
8△るりいろフォント---リンク切れ

7◎映画の字幕風フォント3

1◎よもぎフォント
2◎しねきゃぷしょん △映画の字幕風フォント
3◎キネ丸ボールド
4◎てあとる16 △教育漢字

8◎ロゴデザイン4

1◎GD高速道路ゴシックJA OTF△漢字一部
2◎07ロゴたいぷゴシック
3◎国鉄方向幕書体
4◎国鉄っぽいフォント△ぽいフォント---ブラウザのテキストエンコーディング→[日本語 Shift JIS]

9教科書体

1◎EPSON 教科書体M

9楷書体 △年賀状の宛名書きなどに最適な書体です

1◎EPSON 楷書体M


通常のブックマークの操作と同じで「フォルダ」をクリックして開閉します
フォルダやリンクをドラッグしてテキストエディタなどに文字情報をペーストできます

前回作ったフリーフォントのリンク集をウェブページで操作できるようにしたものです
  フリーフォントのリンク集をブラウザのブックマークにまとめて保存します

この動画は(音声なし)
ONE PIECE82 ジャンプコミックスのブラウザだけで作る簡単バーコードプリント
 http://bit.ly/2eCamT0
などの記事の最後尾にある「SafariブラウザでA4サイズ1枚に2ページをプリント」の内容を動画にしたものです

最後尾の(下の部分が簡易版説明書になっています)
MacOSX Safari 8.0.5 A4サイズ1枚に2ページをプリント」ボタンをクリックして内容を表示してから
 文字列をマウスオーバーすると画像が表示されたりします。
 (注意: PC/Macでアクセスしてください。iPhoneなどモバイル端末では機能しません)

書き出したPDFファイル
  http://snowjobs.blog.jp/download/file/2016_12_19/かっぱ.pdf

この動画は(音声なし)
ONE PIECE82 ジャンプコミックスのブラウザだけで作る簡単バーコードプリント
 http://bit.ly/2eCamT0
などの記事の最後尾にある「キーボードの使い方」の内容を動画にしたものです

最後尾の(下の部分が簡易版説明書になっています)
キーボードの使い方」ボタンをクリックして内容を表示してから
 文字列をマウスオーバーすると画像が表示されたりします。
 (注意: PC/Macでアクセスしてください。iPhoneなどモバイル端末では機能しません)

この動画は(音声なし)
ONE PIECE82 ジャンプコミックスのブラウザだけで作る簡単バーコードプリント
 http://bit.ly/2eCamT0
などの記事の最後尾にある「ドロップ操作について」の内容を動画にしたものです

最後尾の(下の部分が簡易版説明書になっています)
ドロップ操作について」ボタンをクリックして内容を表示してから
 文字列をマウスオーバーすると画像が表示されたりします。
 (注意: PC/Macでアクセスしてください。iPhoneなどモバイル端末では機能しません)

注意事項
WEBメニューの各項目のイメージは
最初「ウェブページのサムネイル画像」を表示しますが
すぐには作成されません。

しばらく?待ってから
メニューバー「開発」「キャッシュを空にする」のあとに
マウスオーバーしてください。

この操作で更新を確認できます。

↑このページのトップヘ