Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

「テーマUp時の説明部分」の構文規則(syntax)

テーマUp時の「説明部分」に書かれているように、基本は「はてな記法」です。

説明を書くには、一から、はてな記法を覚える羽目になってしまいます。

又、Markdown をある程度知っている人でも、はてな記法とそれとは、構文が似ていないため、ほとんど意味がありません。これは正直ちょっと面倒くさい…|´-`)💦

 

そこで、ここではテーマUpの際の「テーマの説明部分」を、

  • サクッと書き上げたい
  • でも、一からはてな記法を覚えるのは面倒くさい

という方に向けての最低限の事項に絞ったチートシートです。

 

見出し

*h1見出し

h1見出し

**h2見出し

h2見出し

***h3見出し

h3見出し

…(以外同じ要領)

 

リスト

ul

-リスト1

  • リスト1

ol

+item1
+item2
  1. item1
  2. itme2

 

改行

通常の改行と同じ

文章
...
...
文章

(改行は分かりやすいように「...」を挿入しています。実際は「...」は不要。)

文章

文章

 (「はてなダイアリー/ はてな記法」に書かれてある「改行」とは異なるようです --- 改行記法 / はてなダイアリー ---)

使えるHTML

◯ :  <a> <i> <b> <strong> <em>

✖️:  <p><h3>( headnig ) は使えません。正確に言うと、使えるのですが、その部分のお尻になぜか</p>  が挿入されてしまいます。ですので見栄えが非常に悪くなり結局使えません。

 

これで大体はいけるでしょうか。これ以外は試していないので分かりませんw はてな記法を参照されるか、HTMLを試して見て下さい(* ˊ˘ˋ)*_ _))🌟

後、参考までに、僕のテーマの場合のサンプルを以下に。

 

実際の表示

Modernist - テーマ ストア

f:id:DDramonQ:20170420212815p:plain

f:id:DDramonQ:20170420212822p:plain

ソースコード

*特徴
<b><i>●簡易カスタマイズ性</i></b>
( はてなブログの「設定」から簡易カスタマイズ。ただ、CSSを直接カスタマイズするには不向きかもしれません)
<b><i>●シンプル + α</i></b>
<b><i>●日本語フォント</i></b>( Noto Sans Japanese )
<b><i>●タブレット・スマホ観覧も快適</i></b>( スライドメニュー標準搭載 )

詳しくは、デモブログ・デモ記事をご覧下さい(* ˊ˘ˋ)*_ _))🌟
 <a href="#">デモブログ</a>
 <a href="#">デモ記事</a>



*解説・Q&A
**<i>Q&A</i>
<a href="#">スマホ | タブレットで、テーマがうまく表示されない</a>
<a href="#">ヘッダー画像がうまく表示されない</a> 

**<i>解説</i>
<a href="#">解説いろいろ</a> 



*バージョン履歴
**<i>1.5 ( 17.04.19 )</i>
細かい箇所の修正 | レイアウト・デザインの見直し
ソースコードの整理

**<i>1.4 ( 17.01.01 )</i>


**<i>1.3 ( 16.11.25 )</i>
aboutページ | PC表示 | サイドバーをページ下に表示されるように変更
その他細かい修正等 

**<i>1.2 ( 16.10.08 )</i>
細かい箇所の修正・変更
PC観覧/ 記事ページ / ウィンドウ幅によりサイドバー表示・非表示(スライド)
サイドバーの未カスタムパーツ幾つか/ カスタマイズ 

**<i>1.1.1 ( 16.09.30 )</i>
ヘッダー画像変更時、トップページのブログ概要部が重なってしまう現象を解消。 

**<i>1.1.0 ( 16.09.30 )</i>
細かい箇所の修正 



*クレジット
**<i>フォント</i>
<a href="#">Noto Sans Japanese -Google Font-</a>
その他英字 -Google Font-
<a href="#">Fontawesome</a> 

**<i>画像</i> ( ヘッダー画像 )
<a href="#">Unsplash.com ー collection/ Angles</a> 



*テーマ置き場
テーマ(フォントを除く)は、改変・再配布等、ご自由にお使い下さい。商用利用でも構いません。クレジット表記もしなくてOKです(੭ˊ꒳​ˋ)੭✧
<a href="#">テーマ「Modernist」-Github-</a>
ただし、フォントを含む場合は、必ず各フォント元の定めるライセンス)に従い、各自の責任の元再利用して下さい。よろしくお願い致します(。•ㅅ•。) 



*不具合等の報告・連絡について
ご使用の際、不具合等発見されましたら、お手数ですが、<a href="#">当記事</a>へのコメントでご連絡下さい。私も私生活がある為😅、迅速に対応は致しかねますが、なるべく迅速に対応できるよう心がけまする(。•ㅅ•。) 

 

 

【英語学習】英英辞典のセカンドオピニオン的存在!? ..\Vocabulary.com/..

Vocabulary.com

 https://www.vocabulary.com/dictionary/

 f:id:DDramonQ:20170301025922j:image

  • 単語の説明の仕方がユニーク(Colins Cobuildもこの形式に近い)
  • 頻出系単語で説明されている(恐らくw)
  • 日常的な具体例

 

知っている単語が少ない時は、この形式だと意味が取りにくいかもしれません。

ですので、ある程度単語が分かるようになってきた方におすすめです。特に、抽象度が高めの語彙の場合に、その威力を発揮します。

例えば、「property」「implicit」といった比較的抽象的な単語の場合、通常の辞書だと意味が取りにくい事が時々あります。(ソース:私w)

 

例えば、「implicit」「property」を例に、定義を見てみましょう(余談ですが、プログラミング(JavaScript)の説明でよく見かけ、何度も「あれ?💦何だったっけ?」と、辞書を引いた単語です😅💦w)

(例)

implicit

https://www.merriam-webster.com/dictionary/implicit

 f:id:DDramonQ:20170301030032j:image

http://dictionary.cambridge.org/dictionary/english/implicit

 f:id:DDramonQ:20170301030035j:image

 

property

https://www.merriam-webster.com/dictionary/property

 f:id:DDramonQ:20170301030047j:image

http://dictionary.cambridge.org/dictionary/english/property

f:id:DDramonQ:20170301030053j:image

 

 

そういう場合に、vocabulary.comで検索してみると「なるほど」となる事が多いです(私見です😅)

implicit

https://www.vocabulary.com/dictionary/implicit

f:id:DDramonQ:20170301030018j:image

f:id:DDramonQ:20170301030337j:image

 

 property

https://www.vocabulary.com/dictionary/property

f:id:DDramonQ:20170301030330j:image

f:id:DDramonQ:20170301030347j:image 

 

「どのような場面でその単語をを使うのか」、つまり「コンテクスト(文脈)」が分かるような説明の仕方になっています。ですので、言葉による直線的な説明が膨らみをもち、その言葉が使われる場面を想起させ、理解しやすかったです。先にも書きましたが、上記のような抽象度の高めな(単語)概念の場合に、特に威力を発揮します🌟

説明の下に、「既存の定義」も載っているので、なお理解が促進するように感じました⭐️

 

 どこの会社さんかな?

ニューヨーク(🇺🇸)に本社を置く Thinkmap というソフトウェア会社さんがこのサイト(会社)の起源だそうです。

 

Our Story / Our Mission より

https://www.vocabulary.com/about/

Our Story
Vocabulary.com has its roots in the Visual Thesaurus, the interactive thesaurus and dictionary developed by the team at Thinkmap, a software company known for using visualization to facilitate communication, learning, and discovery. As the Visual Thesaurus evolved, we recognized the need for an instructional technology that would empower learners to unpack the complexity and nuances of the English language in a way that was systematic, engaging and adaptive. Our multidisciplinary team of educators, lexicographers, data scientists, and developers, united by a love of words and a good challenge, designed and built Vocabulary.com.

 

翻訳 [google翻訳 + 和馬 ]

google 翻訳

https://translate.google.com/m/translate


会社のあゆみ
Vocabulary.comは、インタラクティブな辞書・類語辞典のサービスを提供している、「ビジュアルシソーラス(類語辞典)」から始まりました。
ビジュアルシソーラスは、Thinkmapというソフトウェア会社が開発し、コミュニケーション、学習、発見を容易にするために、視覚化という方法を用いてきたことで知られています。

ビジュアル類語辞典が進化するにつれて、私たちは学習者が体系的で魅力的で適応性のある方法で英語の複雑さとニュアンスを解き放つことを可能にする指導テクノロジーの必要性を感じました。我々のチームメンバーは、良きチャレンジと言葉を愛する様々な分野出身のものからなり、教育者、辞書編集者、データ科学者、開発者などがいます。それらのチームによってVocabulary.comは設計され設立されました。

 

 

後、google検索の上位にはあまり出てきませんが、Cambridge Dictionary(online) も、個人的に結構分かりやすいです。僕の場合ですが、意味が掴みにくい場合でも、Merriam → Cambridge → Vocabulary で、おおよそ理解できます。

後、前にも一度書いたのですが、画像検索も、単語理解に結構役立ちますよ~٩(⁼̴̀ꇴ⁼̴́٩)♪🌟

 

アプリもあるよ~🌟

僕も購入しました。非常に使いやすいです。

 

f:id:DDramonQ:20170419205149p:plain

f:id:DDramonQ:20170419205155p:plain

 

1種類だけではなかった( ˙◊˙◞ )◞!?💡 "ダブルクォーテーションマーク"🌟

少し前に知りました。このブログの「引用の部分」のクオーテーションマークも、このダブルクォーテーションマーク(以下DQM)を使っています。

 

CharacterUnicode Number source code
Character references (HTML)
 
    Named character references Decimal numeric Hexadecimal numeric
U+201C &ldquo; &#8220; &#x201c;

 

ちなみにキーボードによる直接入力は、以下の方です。

CharacterUnicode Number source code
Character references (HTML)
 
    Named character references Decimal numeric Hexadecimal numeric
" U+0022 &quot; &#34; &#x0022;
0は省略可

 

」(U+201C) のDQMを使用したい場合は、ソースコード(html)に character references の3つの内のいずれかを記述する必要があります。

 

また、文字と同じように、指定フォントによってDQMも変わります。色々あって面白いですね✧(⸝⸝⸝ↂ⃙⃙⃚⃛︎ωↂ⃙⃙⃚⃛︎⸝⸝⸝)✨🌟

Left Double Quotation Mark

Sans Serif

Noto Sans JP
Josefin Sans
Raleway
Roboto Mono
Inconsolata

 

 

 

DQMには、上記2種類(U+0022,U+201c) 以外にもいくつか種類が存在します。その理由は、どうやらComputer の進化とそれに伴う文字群の標準化とが関係しているようですね🌟Unicode は予想以上に奥が深そうでした。Unicode®︎.orgのspec も試しに覗いてみたところ、1000ページ超でした(  Д ) ゚ ゚💦w 

 

Unicode®︎ とは

Unicode -IT用語辞典-

(丸投げでございます|*´-`)w)

 

Character Reference とは

Character References (HTML)

character references とは、簡単に言うと、各文字毎に割り当てられた、文字コードの事です。HTML における各文字のcharcter reference(文字コード)は、W3CのHTML5 仕様書で規定されています。

HTMLを記述する際、直接文字を入力するのではなく、代わりに character reference(文字コード) を入力することによって、文字をディスプレイ表示することができます。

なぜ直接入力だけではなく、そのような方法が存在するのか、その理由は仕様書にも色々書かれていましたが、ここでは割愛します(面倒だからではありません😎✨w)

character references には、以下の3種類があります。(*以下にソース引用有り)

❶Named character references❷Decimal numeric character references❸Hexadecimal numeric character references

(旧)『5.3 Character references(HTML 4.01-W3C-)

5.3 Character references

A given character encoding may not be able to express all characters of the document character set. For such encodings, or when hardware or software configurations do not allow users to input some document characters directly, authors may use SGML character references. Character references are a character encoding-independent mechanism for entering any character from the document character set.

Character references in HTML may appear in two forms:

Numeric character references (either decimal or hexadecimal).

Character entity references.

Character references within comments have no special meaning; they are comment data only.

 

(現)『8.1.4 Character references(HTML 5.1-W3C-)

8.1.4 Character references

In certain cases described in other sections, text may be mixed with character references. These can be used to escape characters that couldn't otherwise legally be included in text.

Character references must start with a U+0026 AMPERSAND character (&). Following this, there are three possible kinds of character references:

Named character references

The ampersand must be followed by one of the names given in the named character references section, using the same case. The name must be one that is terminated by a ";" (U+003B) character.

Decimal numeric character reference

The ampersand must be followed by a "#" (U+0023) character, followed by one or more ASCII digits, representing a base-ten integer that corresponds to a Unicode code point that is allowed according to the definition below. The digits must then be followed by a ";" (U+003B) character.

Hexadecimal numeric character reference

The ampersand must be followed by a "#" (U+0023) character, which must be followed by either a "x" (U+0078) character or a "X" (U+0058) character, which must then be followed by one or more ASCII hex digits, representing a base-sixteen integer that corresponds to a Unicode code point that is allowed according to the definition below. The digits must then be followed by a ";" (U+003B) character.

The numeric character reference forms described above are allowed to reference any Unicode code point other than U+0000, U+000D, permanently undefined Unicode characters (noncharacters), surrogates (U+D800–U+DFFF), and control characters other than space characters.

An ambiguous ampersand is a U+0026 AMPERSAND character (&) that is followed by one or more alphanumeric ASCII characters, followed by a ";" (U+003B) character, where these characters do not match any of the names given in the named character references section.

 

上記+僕の経験をまとめると…

  • HTML で character(文字など) を表示する方法は…

    (i)ソースコードに "文字を直接" 入力

    (ii)ソースコードに"character reference" を入力

  • 「html entity」「entity name」というのは昔(4.01以前?) の呼び名 + 略称。

    (旧:HTML4.01)引用にもある「character entity reference」の事だと思われる

    (新:HTML5.1)狭義には「named character reference」の事を指しており、広義には、それを含む全体「character reference( 全3種: Named | Decimal numeric | Hexadecimal numeric )」の事を指している模様。

元々、呼び名が体系的でなかった事や、使う人が省略して使っていたりすることもあって、ややこしく分かりにくかった…(๑ˊ•ω•;)💦 やっと理解しました。

Using Character Reference in CSS

CSSの場合は、character reference の3種類のうち、❸hexadecimal numeric character reference16進数のみ使用が可能。
【例】:

.foo:before {
	content:'\201c';

「\(back slash)(バックスラッシュ)」 + 「hexadecimal numeric charcter reference(unicode numberそのまま)」。

4.1.3 Characters and case(CSS 2.1-W3C-)

4.1.3 Characters and case

The following rules always hold:

All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]).

In CSS 2.1, a backslash (\) character can indicate one of three types of character escape. Inside a CSS comment, a backslash stands for itself, and if a backslash is immediately followed by the end of the style sheet, it also stands for itself (i.e., a DELIM token).
First, inside a string, a backslash followed by a newline is ignored (i.e., the string is deemed not to contain either the backslash or the newline). Outside a string, a backslash followed by a newline stands for itself (i.e., a DELIM followed by a newline).

Second, it cancels the meaning of special CSS characters. Any character (except a hexadecimal digit, linefeed, carriage return, or form feed) can be escaped with a backslash to remove its special meaning. For example, "\"" is a string consisting of one double quote. Style sheet preprocessors must not remove these backslashes from a style sheet since that would change the style sheet's meaning.

Third, backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:

with a space (or other white space character): "\26 B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single white space character. by providing exactly 6 hexadecimal digits: "\000026B" ("&B") In fact, these two methods may be combined. Only one white space character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must be doubled.

If the number is outside the range allowed by Unicode (e.g., "\110000" is above the maximum 10FFFF allowed in current Unicode), the UA may replace the escape with the "replacement character" (U+FFFD). If the character is to be displayed, the UA should show a visible symbol, such as a "missing character" glyph (cf. 15.2, point 5).

Note: Backslash escapes are always considered to be part of an identifier or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not). The identifier "te\st" is exactly the same identifier as "test".

4.4.1 Referring to characters not represented in a character encoding(CSS 2.1-W3C-)

4.4.1 Referring to characters not represented in a character encoding

A style sheet may have to refer to characters that cannot be represented in the current character encoding. These characters must be written as escaped references to ISO 10646 characters. These escapes serve the same purpose as numeric character references in HTML or XML documents (see [HTML4], chapters 5 and 25).

The character escape mechanism should be used when only a few characters must be represented this way. If most of a style sheet requires escaping, authors should encode it with a more appropriate encoding (e.g., if the style sheet contains a lot of Greek characters, authors might use "ISO-8859-7" or "UTF-8").

Intermediate processors using a different character encoding may translate these escaped sequences into byte sequences of that encoding. Intermediate processors must not, on the other hand, alter escape sequences that cancel the special meaning of an ASCII character.

Conforming user agents must correctly map to ISO-10646 all characters in any character encodings that they recognize (or they must behave as if they did).

For example, a style sheet transmitted as ISO-8859-1 (Latin-1) cannot contain Greek letters directly: "κουρος" (Greek: "kouros") has to be written as "\3BA\3BF\3C5\3C1\3BF\3C2".

Note. In HTML 4, numeric character references are interpreted in "style" attribute values but not in the content of the STYLE element. Because of this asymmetry, we recommend that authors use the CSS character escape mechanism rather than numeric character references for both the "style" attribute and the STYLE element. For example, we recommend:

<SPAN style="font-family: L\FC beck">...</SPAN>

rather than:

<SPAN style="font-family: L&#252;beck">...</SPAN>

 

 

最後に、DQMに関連する興味深い記事(英語)のリンクも置いておきます。いや~想像以上に奥が深かった~w✨0(:3 )~ ('、3_ヽ)_

Re:リクアニ + % (modulo: "割り算の余り"の算出操作記号)

 

リクアニ・メソッドのコールバックの argument(時間) を可視化してみました。

下中央に表示されている4桁の数字は、
windom.requestAnimationFrame( callback(DOMHighResTimeStamp) )
DOMHighResTimeStamp (時間:以下 TimeStamp) です。つまり、ページロードと共にリクアニ・メソッドが開始され、その callback function の argument である TimeStamp が表示されるようにしてあります。

単位はミリ秒(ms)です。

TimeStamp (時間:ms)の基準点は、ページロード開始時です (正確には、window object の document object が作成された時window object の document property とも言う

 

 

Start!

DOMHighResTimeStamp(ms)

document object creation ~

(ms:millisecond)

DOMHighResTimeStamp(ms)

document object creation ~

    DOMHighResTimeStamp - window.performance.now()(ms)
    ( = duration)

    button click ~

      duration % 2000

      ( = reminder of duration / 2000)

        duration % 2000 / 4

        ( = "reminder of duration / 2000" / 4

          • 中央カウンター : 20秒後に停止
          • スタートボタンクリック : テキスト出力アニメーション : 3秒後に停止

          します🌟もう一度起動の際はページをリロードしてね🌟

          • 黄色の背景部分は、ボタンクリックから1秒間隔毎に引かれています。

           

           

          表の補足説明

          1行目: document object creation ~
          簡単に言うと、ページロード開始からの時間を表しています。
          2行目: duration
          ボタンクリックからの経過時間
          3行目: duration % 2000
          W3C のリクアニのSampleコード内にあった% (Modulo)がどのような値になるのか。「÷4」を取り除いた簡易版Show W3C Code!

          JavaScript

          var requestId = 0;
          
          function animate(time) {
             document.getElementById("ani").style.left =
                (time - animationStartTime) % 2000 / 4 + "px";
             requestId = window.requestAnimationFrame(animate);
          }
          function start() {
             animationStartTime = window.performance.now();
             requestId = window.requestAnimationFrame(animate);
          }
          function stop() {
             if (requestId)
                window.cancelAnimationFrame(requestId);
             requestId = 0;
          }
          4行目: duration % 2000 / 4
          W3C のリクアニのSampleコード内にあった% (Modulo)がどのような値になるのか。「÷4」有り

           

          このデモで知りたかったこと / 分かる事

          1. DOMHighResTimeStamp
          2. アニメーション開始からの時間の算出方法( window.performance.now()の使用 )
          3. operator演算子(操作記号)% (modulo)の計算式((

            modulo とは、プログラミングにおいて、余りの値を算出する operator演算子(操作記号)です。

            例えば、5 ÷ 3 = 1 余り2 の式で、余りの値:2 を使いたい時に、コードでは
            var a = 5 % 3 // a = 2
            と記述します。

            余りを知りたい・使いたい時に使うのが% ( modulo )と言うわけです。

            ** 割り算の「余りの値」は、英語では reminder と言います。

            ))
          4. リクアニの1秒間のフレーム数(デバイス・実行環境により異なる)

           

          position: sticky

          因みに、今回のメイン「リクアニ・メソッド」とは関係ないのですが、表のヘッダー部分がページアウトしそうになると位置が固定される、position: stickyも使っています。以前記事で紹介もしました。JavaScript を使わずに、Bootstrapで言う所の「affix(sticky) navbar」を実現することができるCSSのpositionプロパティ値です。これも勉強になりました(*´ω`*)🌟

          色々盛り込み過ぎて、分かりにくくなってしまいました…すみません(๑˃꒳˂๑)💦

           

          以下にソースコードを🌟

          HTML

          <div id="dStart">Start!</div>
          
          <div id="flexbox">
          
             <div class="itm">
                <div class="title">
                   <p><code><r>DOMHighResTimeStamp</r></code>(ms)</p>
                   <p>document object creation ~</p>
                </div>
                
                <ol id="d1"> <!-- TimeStamp 出力部分 -->
                </ol>
             </div>
             
             <div class="itm">
                <div class="title">
                   <p><code><r>DOMHighResTimeStamp</r> - window.performance.now()</code>(ms)<br>
                   ( = duration)</p>
                   <p>button click ~</p>
                </div>
                
                <ol id="d2">
                </ol>
             </div>
             
             <div class="itm">
                <div class="title">
                   <p><code>duration % 2000</code></p>
                   <p>( = reminder of <code>duration / 2000</code>)</p>
                </div>
                
                <ol id="d3">
                </ol>
             </div>
             
             <div class="itm">
                <div class="title">
                   <p><code>duration % 2000 / 4</code></p>
                   <p>( = "reminder of <code>duration / 2000</code>" / 4</p>
                </div>
                
                <ol id="d4">
                </ol>
             </div>
             
          </div>

          CSS

          /*--- button ---*/
          #dStart {
             position: fixed;
             bottom: 55px;
             left: 55px;
             z-index: 10;
             color: #fff;
             background: #555;
             padding: 16px;
             }
          
          /*--- flexbox ---*/
          #flexbox {
             display: -webkit-flex;
             display: -moz-flex;
             display: -ms-flex;
             display: -o-flex;
             display: flex;
             width: 95%;
             margin: 3rem auto;
             border: 1px dashed #ddd;
             }
          #flexbox .itm {
             width: 25%;
             height: auto;、	border: 1px solid #aaa;
             }
          #flexbox .title {
             position: -webkit-sticky;
             position: -moz-sticky;
             position: -ms-sticky;
             position: -o-sticky;
             position: sticky;
             top: 100px;
             background: #fff;
             font-size: 0.75rem;
             letter-spacing: -.4px;
             line-height: 1.5;
             text-align: center;
             border-bottom:1px solid #aaa;
             }
          #flexbox .title p:first-child {
             height: 4em;
             }
          #flexbox .title p:nth-child(2) {
             height: 4em;
             background: #ccc;
             border-top: 1px dotted #aaa;
             }
          #flexbox .title code {
             font-size: inherit;
             }
          #flexbox ol {
             display: block;
             margin: 0;
             }
          #flexbox ol li,
          #flexbox ol li a {
             background: #f6f4f2;
             font-size: 12px;
             letter-spacing: -.3px;
             line-height: 1.25;
             }
          #flexbox div:nth-of-type(3) {
             border-left: 3px solid #ccddff;
             }
          #flexbox li.ye {
             background: yellow;
             }

          JavaScript

          'use strict';
          
          var _ = console.log;
          
          var d1 = document.getElementById('d1'),
              d2 = document.getElementById('d2'),
              d3 = document.getElementById('d3'),
              d4 = document.getElementById('d4'),
              btn = document.getElementById('dStart');
          
          var drawingTimeAndModulo = function() {
              var frameStart = window.performance.now();
              var counter = 0;
              var modulo = function(a) {
                  return a % 2000;
              };
              var modulo2 = function(a) {
                  return a % 2000 / 4;
              };
              
              var id = window.requestAnimationFrame(function ani(loadStart) {
                  var duration = loadStart - frameStart;
                  
                  if (duration > 3000 ) {
                      cancelAnimationFrame(id);
                  } else if ( counter >= 0 && duration > (counter+1) * 1000 ) {
                      d1.insertAdjacentHTML('beforeend', '<li class="ye">'+ loadStart.toFixed(2) +'</li>');
                      d2.insertAdjacentHTML('beforeend', '<li class="ye">'+ duration +'</li>');
                      d3.insertAdjacentHTML('beforeend', '<li class="ye">'+ modulo(duration) +'</li>');
                      
                      counter++;
                      id = requestAnimationFrame(ani);
                  } else {
                      d1.insertAdjacentHTML('beforeend', '<li>'+ loadStart.toFixed(2) +'</li>');
                      d2.insertAdjacentHTML('beforeend', '<li>'+ duration +'</li>');
                      d3.insertAdjacentHTML('beforeend', '<li>'+ modulo(duration) +'</li>');
                      id = requestAnimationFrame(ani);
                  }
              });
              
              var id2 = window.requestAnimationFrame(function ani2(loadStart) {
                  var duration2 = loadStart - frameStart;
                  
                  d4.insertAdjacentHTML('beforeend', '<li>'+ modulo2(duration2) +'</li>');
                  if (duration2 > 3000 ) {
                      cancelAnimationFrame(id2);
                  } else {
                      id = requestAnimationFrame(ani2);
                  }
              });
          };
          
          btn.addEventListener('click', drawingTimeAndModulo);

          js binからソースコードのdownload や そのままオンライン編集・実行 もできます~🙌🌟

          JS Bin on jsbin.com

           

           

           

           

           

          ブログに色々詰め込んでみた☺️✨(自己満マン)

          まだまだ試行錯誤中ですが、

          「操作ナビゲーション(モバイル系のみ)・メニュー」

          今持てる全てを出し切りました🌟 (๑ ˃̶̤̀д˂̶̤́ )◞~♪

           

          メニューは試行錯誤しまくりでしたが、何とか実装する事ができました🌟

          こういう透けっちン💋💕 なアニメーションを以前どこかのHPで見かけて、「うぉ~カッケ~いつか俺もやってみたい~!!!✨✨♪」と思っていました。

          それから幾分時間は経ちましたが、何とか形にはなりました。まだまだ詰めどころ等色々ある気がしますが、今はとりあえず大満足です(つ´ω`c)✨♪

           

          やはり自分で何かを作ってみるといのは、他者評価云々より、自分が楽しくて嬉しい🌟😊

          はてなブログの "もくじ" で『scroll to id アニメーション with jQuery』

          (17.3.24追記)
          無駄をひとつ見つけました🌟 コードをシンプルにスマートに~((ノ")`ω´(ヾ)

          もう既出でしょうか。。

          ページ内をジャンプする際の「jsスクロールアニメーション」を、はてなブログのもくじ用にカスタマイズしたものです。コードあまり綺麗ではありません。すみません(๑˃꒳˂๑)💦

          【js/後半】window.requestAnimationFrame() を解説してみた🌟

          では後半です。

          invoke - 要請する(実行する)

          function - 関数

          parameterパラメーター(共数) - パラメーター

          argument引数(実述) - 引数

          ニュアンス的には「引数」だとどうもピンと来にくく、「実述」の方が翻訳的にしっくりくるのですが…個人的に…しかも造語ですが…w

          後半ではrequestAnimationFrame(callback)のcallback function についてです。その解説に入る前に、必須知識としての、「function parameterパラメーター(共数)」「function argument引数(実述)」 についてまとめおきます。

          function parameterパラメーター(共数) と function argument引数(実述)

          function parameterパラメーター(共数)とは、functionを定義する際に、関数とセットで予め定義しておく変数名です。

          function getSum (num1, num2) {
              return num1 + num2;
          }

          そして実際に関数をinvokeする際には parameterパラメーター(共数) に値を代入して関数を実行します。この際、実際に代入する値のことを argument引数(実述) と呼びます。正式には代入と言わず、「渡すpass」という語が通常使われています。英語では「argument引数(実述) is passed to the function(引数が関数に渡される)」と言い、日本語でも「関数に引数を渡す」という表現がよくされています。

          var sum1 = getSum(2, 3); // var sum1 = 5

          この場合だと、getSum関数のparameterパラメーター(共数)は2つで、argument引数(実述)が 2 と 3 だ」とか「getSum関数にargument引数(実述)として数値を渡す」とかいうような言い方をします。

          function にparameterパラメーター(共数) を設定し、様々な argument引数(実述) を function に渡すことによって、ルーティンワークを効率化したりと、様々な振る舞いが可能になります。

           

           

          さて、それではrequestAni..(callback)callback function について解説していきます。

           

           

          requestAnimationFrame()のcallback function の parameterパラメーター(共数)

          ではもう一度アニメーションのコードとdemoを。

          JS Bin on jsbin.com

           

          CSS

          #ani {
             position: absolute;
             width: 100px;
             height: 100px;
             background: crimson;
             }

           

          HTML

          <div id="ani"></div>

          JavaScript

          var elm = document.getElementById("ani");
          var n = 0;
          
          var id = requestAnimationFrame(function animate() {
          
             elm.style.left =  2*n + "px";
             if (parseInt(elm.style.left) > 200) {
                cancelAnimationFrame(id);
             } else {
                n++;
                requestAnimationFrame(animate);
             }
          
          });

          (未読の方は、拙過去記事  【js|前半】window.requestAnimationFrame()を解説してみた🌟 - Kazuma Labolatory's をご覧下さい)


          requestAnimationFrame(callback)は、このcallback functionに予め argument引数(実述) が内蔵(built-in)されています。どいうことか、まずは実際にdemoを見てみましょう。

           

          JS Bin on jsbin.com

           

          JavaScript

          var elm = document.getElementById('ani');
          var n = 0;
          
          var id = requestAnimationFrame(function animate(e) {
              elm.style.left =  2*n + "px";
              n++;
              
              elm.innerHTML = typeof e + '<br>' + e;
              
              if (parseInt(elm.style.left) > 200) {
                  cancelAnimationFrame(id);
              } else {
                  id = requestAnimationFrame(animate);
              }
          });

           変更点は、function animate()function animate(e)にしたのと、elm.innerHTML = ...を追加しただけです。elm(赤ブロック) に
          「 parameterパラメーター(共数) eのタイプ」
          「e そのもの」

          がそのままアウトプットされています。

          これから分かる通り、requestAni... の parameterパラメーター(共数)(argument引数(実述)) e のタイプは数値です。

          そして、その下に変化しながら表示されている数値、これは表しているのは「時間」です。animation 開始時(callback開始時) を0:: ページ下部補足 :: ページロード時を0として、増加していく時間です。ミリ秒単位で返値されます。つまり 1000だとアニメーション開始 ページロード開始から1秒たった事を表しています。

          また、小数点が付いていますが、この時間はマイクロ秒単位で正確な時間です。1/1000 秒 のさらに 1/1000 秒です。

          requestAni... に parameterパラメーター(共数) を設定すると、argument引数(実述)としてマイクロ秒単位で正確な時間を取得することができます。この場合だと、animate() に e という parameterパラメーター(共数) を設定することによって(割り当てる名前identifier(識別名)はどんな名前でもOK)、実際にfunction が実行された際に、function body関数本体({}の中身) の e に アニメーション実行時間が逐次返値されるということです。

          正式な言い方だと、requestAnimationFrame メソッドの callback function は、一つの argument引数(実述) を伴い、DomHighResTimeStampを返値する、ということです。

          RequestAnimationFrame |「Timing control for script-based animations」 -W3C-

          DomHighResTimeStamp |「High Resolution Time Level 2」 -W3C-

           

          DomHighResTimeStamp の用途は、各自が定義するfunction次第で様々な使い方ができます。簡単な一例ですと、「アニメーション開始から3秒後にアニメーションを終了する」funcionを、この argument引数(実述) を使って作ったりすることができます。

           

           

          失礼しました_(:D」L)_💦
          ページロード時を0 (基準点)とした時間(正確にはWindow Object の document Objectが新規作成された時。要参照)。上記デモは、ページロードと共にアニメーションがスタートするので、ほとんど分かりませんが、例えば「クリックイベント」でDOMHightResTimeStampを使うと、よく分かります。
          因みに、クリックによってアニメーションが開始されるような場合、アニメーション開始からの経過時間を知りたい場合は、window.performance.now()DOMHightResTimeStampの差によって求めます。

          【js】pure JavaScipt で jQuery のToggleアニメーションを実現してみた

          基礎編

           

          • list1-1
          • list1-2
          • list1-3

          HTML

          <button id="btn1">button1</button>
          <ul id="list1">
             <li>list1-1</li>
             <li>list1-2</li>
             <li>list1-3</li>
          </ul>

          CSS

          #list1 {
             transition: all .45s ease;
             }
          #btn1 {
             transition: all .2s;
             }

           

          JavaScript

          "use strict";
          
          var _ = console.log;
          
          var btn1 = document.querySelector('.entry-content #btn1');
          var list1 = document.querySelector('.entry-content #list1');
          var list1_H;
          
          list1.style.overflowY = 'hidden';
          list1_H = list1.getBoundingClientRect().height;
          btn1.list1_Height = list1_H;
          list1.style.height = 0 + 'px';
          
          btn1.addEventListener('click', function(e) {
              e.preventDefault();
                  // _(this.textContent);
              var eBtn = this; // === 'ev.target'
              var eList = eBtn.nextElementSibling;
              var eListH_now = eList.getBoundingClientRect().height;
                 //  _(eListH_now);
              if (eListH_now !== 0) {
                  eList.style.height = '0';
              } else {
                  eList.style.height = this.list1_Height + 'px';
              }
          });

           

           

          JS Bin on jsbin.com

           

           

          関連項目

          ●Object(物体) のプロパティ
          -- Adding New Property / JavaScript Object (w3schools.com)

          https://www.w3schools.com/js/js_properties.asp
          this キーワード

          - this の使用場面 : 主にConstructer function内, Object のメソッド*1

          - this が表すもの : excution context の Object

           

           

           

          応用編

           

          • list2

          • list3-1
          • list3-2

          • list4-1
          • list4-2
          • list3-3

          HTML

          <button class="btn">button2</button>
          <ul class="list">
             <li>list2</li>
          </ul>
          <button class="btn">button3</button>
          <ul class="list">
             <li>list3-1</li>
             <li>list3-2</li>
          </ul>
          <button class="btn">button4</button>
          <ul class="list">
             <li>list4-1</li>
             <li>list4-2</li>
             <li>list4-3</li>
          </ul>

          CSS

          .list {
             transition: all .45s ease;
             }
          .btn {
             transition: all .2s;
             }
          .btn.clicked {
              box-shadow: inset 0 0 6px 1px rgba(255,255,255,0.7);
              }

           

          JavaScript

          "use strict";
          
          var _ = console.log;
          
          var btns = document.querySelectorAll('.entry-content .btn');
          var lists = document.querySelectorAll('.entry-content .list');
          var i = 0;
          
          var toggleList = function (ev) {
              /************************************
              this === ev.target
              ************************************/
              ev.preventDefault();
              
              var evBtn = this;
              var evList = evBtn.nextElementSibling;
              var evListH_now = evList.getBoundingClientRect().height;
                 // _(now_listH);
              if (evListH_now === 0) {
                  evList.style.height = this.siblingListH + 'px';
                  evBtn.classList.add('clicked');
              } else {
                  evList.style.height = 0;
                  evBtn.classList.remove('clicked');
              }
          };
          
          for (i = 0; i < lists.length; i++) {
              var btn = btns[i];
              var list = lists[i];
              var listH;
              
              list.style.overflowY = 'hidden'; 
              listH = list.getBoundingClientRect().height;
              btn.siblingListH = listH;  // --- (i)
              list.style.height = 0; // -- (ii)
              btn.addEventListener('click', toggleList);  // -- (iii)
          }

           

           

          JS Bin on jsbin.com

           

           

          -- (i) 各btn(button) object の プロパティに、そのすぐ下に位置するulリストの「通常時の高さ(listH)」 を割り当てておく。list open の時に使うため。
          【理由】
          addEventListener(Type, callback)callback function の argument引数(実述)、は 'Event' object 一つのみ。したがって、listHを argument としてcallback function に渡す事ができない。--- 下の (iii) 参照)
          ❷また、別の方法

          for ( ) {
              ...
              var listH = ...
              ...
              ...
              addEventListener('click', function(event) {
                  listH = ...
              });
          }

          の 形でcallback function 内から、変数listHにアクセスする方法では、function内から参照できる変数は、"最後のループ"の変数のみ。これは、Jsエンジンのエグゼキューション・プロセスexecution processと関連あり。

           

          -- (ii)
          list.style.overflowY = 'hidden'
          ❷ listの高さを取得
          list.style.height = '0'
          順番が大事。

          ulを 後でopenする時のために、通常時の高さを図っておく。ただし、overflowを設定してから高さ取得しないと誤差が出る。
          overflow設定前の値の方が、5-7pxほど小さくなり、これでやってしまうとopen時、完全に開かない。

           

          -- (iii) addEventListener(type, callback)
          callback(Event)

          - callback の parameter は一つ。Event

          Event --- イベントに関連する情報を含んだobject。Event.type, Event.target, Event.preventDefault()などのメソッドが良く使われる。

          又、function context (this の値)は EventTarget object;
          ( 要参照-- 1.3 Event Listener Registration | W3C DOM
          https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-registration
          特に
          「1.3.1 Event Registration Interfaces」の 後半: Interface EventListener
          https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener

           

          :::::::::::::::::::::::::::::::: p.s:::::::::::::::::::::::::::

          **何故かは分からないのですが、どうもはてなブログの何かが原因で、nextElementSibling がうまく作動しませんでした。なので、この記事のソースコードはサンプルコードやJS Binとは違う、別のコードでToggleを実装しています。

          localhostだと、内臓ブラウザでもChrome, safari(iOS)共に上手く作動していました。。

          うーん...いまいち原因がよくわからないので、モヤモヤしています...w(;´・ω・)??

          *1:Object のプロパティの値がfunction のもの

          Google Font / early access (日本語) : 全9種

          Google Font / early access

          - https://fonts.google.com/earlyaccess

          - https://googlefonts.github.io/japanese/

           

          右側のテスト文章部分は、「クリック」すれば、文章を編集できます🙌🌟宜しければ、お試し下さい(フォント・ウェイトは変えられませんが😅)

          後、零細ブログなので←、大丈夫だとは思いますが、もしアクセスが極端に多くなった際は、Googleサーバー負担を考慮し、この記事を削除予定でいます。まぁ前者の意味で、ほぼ大丈夫だと思いますが😅w って、誰が零細ブログやねん!( ノ*`д´)ノ┻┻w

           

           

           

          ゴシック体

          M+

          "Mplus 1p"
          1,3,4,5,7,8,9

          link rel

          @import url(//fonts.googleapis.com/earlyaccess/mplus1p.css);

          @import

          <link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

          - 1 -

          このフォントは「M+」フォントです。テスト文章です。

          木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。

          1234567890

          abcdefghijklmnopqrstuvwxyz

          ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

          Rounded M+

          "Rounded Mplus 1c"
          1,3,4,5,7,8,9

          link rel

          @import url(//fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

          @import

          <link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />

          - 2 -

          このフォントは「Rounded M+」フォントです。テスト文章です。

          木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。

          1234567890

          abcdefghijklmnopqrstuvwxyz

          ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

          Noto Sans Japanese

          "Noto Sans Japanese"
          1,2,3,4,5,7,9

          @import

          @import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

          - 3 -

          このフォントは「Noto Sans Japanese」フォントです。テスト文章です。

          木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。

          1234567890

          abcdefghijklmnopqrstuvwxyz

          ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

          **Noto Sans Japanese と Noto Sans JP は同じ書体です。フォントウェイト(太さ)数に違いがあるだけです。

          Noto Sans JP

          "Noto Sans JP"
          1,3,4,5,7,9

          @import

          @import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);

          - 3-2 -

          このフォントは「Noto Sans JP」フォントです。テスト文章です。

          木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。

          1234567890

          abcdefghijklmnopqrstuvwxyz

          ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

          さわらびゴシック

          "Sawarabi Gothic"
          400

          link rel

          @import url(//fonts.googleapis.com/earlyaccess/sawarabigothic.css);

          @import

          <link href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css" rel="stylesheet" />

          - 4 -

          このフォントは「さわらびゴシック」フォントです。テスト文章です。

          木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。

          1234567890

          abcdefghijklmnopqrstuvwxyz

          ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

          明朝体

          はんなり明朝

          "Hannari"
          400

          link rel

          @import url(//fonts.googleapis.com/earlyaccess/hannari.css);

          @import

          <link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />

          - 5 -

          このフォントは「はんなり明朝」フォントです。テスト文章です。

          木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。

          1234567890

          abcdefghijklmnopqrstuvwxyz

          ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

          こころ明朝

          "Kokoro"
          400

          link rel

          @import url(//fonts.googleapis.com/earlyaccess/kokoro.css);

          @import

          <link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet" />

          - 6 -

          このフォントは「こころ明朝」フォントです。テスト文章です。

          木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。

          1234567890

          abcdefghijklmnopqrstuvwxyz

          ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

          さわらび明朝

          "Sawarabi Mincho"
          400

          link rel

          @import url(//fonts.googleapis.com/earlyaccess/sawarabimincho.css);

          @import

          <link href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css" rel="stylesheet" />

          - 7 -

          このフォントは「さわらび明朝」フォントです。テスト文章です。

          木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。

          1234567890

          abcdefghijklmnopqrstuvwxyz

          ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

          その他

          ニコモジ

          "Nico Moji"
          400

          link rel

          @import url(//fonts.googleapis.com/earlyaccess/nicomoji.css);

          @import

          <link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />

          - 8 -

          このフォントは「ニコモジ」フォントです。テスト文章です。

          木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。

          1234567890

          abcdefghijklmnopqrstuvwxyz

          ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

          ニクキュウ

          "Nikukyu"
          400

          link rel

          @import url(//fonts.googleapis.com/earlyaccess/nikukyu.css);

          @import

          <link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />

          - 9 -

          このフォントは「ニクキュウ」フォントです。テスト文章です。

          春夏秋冬四字熟語

          1234567890

          abcdefghijklmnopqrstuvwxyz

          ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

           

          一気に試したい人用

          @import url(//fonts.googleapis.com/earlyaccess/mplus1p.css);
          @import url(//fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
          @import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
          @import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
          @import url(//fonts.googleapis.com/earlyaccess/sawarabigothic.css);
          @import url(//fonts.googleapis.com/earlyaccess/hannari.css);
          @import url(//fonts.googleapis.com/earlyaccess/kokoro.css);
          @import url(//fonts.googleapis.com/earlyaccess/sawarabimincho.css);
          @import url(//fonts.googleapis.com/earlyaccess/nicomoji.css);
          @import url(//fonts.googleapis.com/earlyaccess/nikukyu.css);

           

           

          因みに、このブログは「Nato Sans Japanese(400)」を使っています。

          「にくきゅう」や「ニコモジ」は第2フォント指定に「rounded M+ 」を入れておくといい塩梅で面白いかもしれませね🌟

          カラー・スペース(色空間)外観/ 変換方法 まとめ

          Basic

          List of color spaces and their uses --Wikipedia.en --

          https://en.m.wikipedia.org/wiki/List_of_color_spaces_and_their_uses

          Color Models: RGB, HSV, HSL --Wikibooks.en --

          https://en.m.wikibooks.org/wiki/Color_Models:_RGB,_HSV,_HSL

          HSL and HSV --Wikipedia.en --

          https://en.m.wikipedia.org/wiki/HSL_and_HSV

           

           

          Color Conversion (theory)

          Charles Poynton

          http://www.poynton.com

          【pdf】 Colour Space Conversions

          http://www.poynton.com/PDFs/coloureq.pdf

          Math behind colorspace conversions, RGB-HSL -- niwa.nu --

          http://www.niwa.nu/2013/05/math-behind-colorspace-conversions-rgb-hsl/

           

           

          Color Conversion (source code -js -)

          color-conversion-algorithms.js / @mjaokson -- GitHubGist --

          https://gist.github.com/mjackson/5311256

           

           

          Recommend article and Others

          Mastering Multi-hued Color Scales -- vis4.net --

          https://www.vis4.net/blog/posts/mastering-multi-hued-color-scales/

          デモも付いていて、分かりやすい✨ 

          RapidTables.com

          - rgbToHsl

          http://www.rapidtables.com/convert/color/rgb-to-hsl.htm

          - hslToRgb
          http://www.rapidtables.com/convert/color/hsl-to-rgb.htm

          #hue and chroma / HSL and HSV -- Wikipedia.en --

          https://en.m.wikipedia.org/wiki/HSL_and_HSV#Hue_and_chroma

          図付きで分かりやすい

          【Books】 Computer Graphics and Geometric Modelling - Agoston, Max K.(2005) --Springer --

          http://www.springer.com/la/book/9781852338176

           

           

           

          【js・備忘録】コンストラクター / プロトタイプ

          国民的アニメ『サザエさん』の名前を使って、Constructor, prototype  のコードを書いてみました🌟( 現在学習中ですので、拙い部分もあるかと思います。ご注意下さい🌟(*ฅ•̀ω•́ฅ*)

           

          あ、あとサザエさんの子供を、タラちゃん以外に2人、「たら子・たら次郎」という名前で勝手に作ってみました ₍₍(꒪່౪̮꒪່)⁾⁾w🌟

           

           

           

          Constructor ( function )

           

          
          "use strict";
          
          var d = document.getElementById('d');
          
          /*=========================*
              Constructor fn
          /*=========================*/
          var Sazae = function(firstName) {
              this._parent = this.constructor.name;
              this.lastName = "Isono";
              this.firstName = firstName;
              this.getInfo = function() {
                  return [this._parent, this.lastName, this.firstName];
              }
          }
          
          var tarao = new Sazae('tarao');
          
          d.innerHTML = tarao.getInfo();
          
           

           

          Prototype

          
          /*========================*
              prototype❶
          /*========================*/
          var d2 = document.getElementById('d2');
          
          var Sazae2 = function(firstName) {
             this.firstName = firstName;
             Sazae2.prototype._parent = this.constructor.name;
             Sazae2.prototype.lastName = "Isono";
             Sazae2.prototype.getInfo2 = function() {
                return [this._parent, this.lastName, this.firstName];
             }
          }
          
          var tarako = new Sazae2('tarako');
          
          d2.innerHTML = tarako.getInfo2();
          
           

           

          
          /*========================*
              prototype❷
          /*========================*/
          var d3 = document.getElementById('d3');
          
          var Sazae3 = function(firstName) {
             this.firstName = firstName;
          }
          
          Sazae3.prototype._parent = 'Sazae3';
          Sazae3.prototype.lastName = "Isono";
          Sazae3.prototype.getInfo3 = function() {
             return [Sazae3.prototype._parent, Sazae3.prototype.lastName];
          }
             
          var tarajirou = new Sazae3('tarajirou');
          
          d3.innerHTML = tarajirou.getInfo3();
          d3.innerHTML += ', ' + tarajirou.firstName;
          

           

           

           

          【初学者向け】Chroma.js の使い方

          [17.03.15] - 細かい誤りを修正しました🌟

          chroma.jsとは?

          アメリカの新聞「The New York Times」でデータビジュアリゼーション(データの視覚化)を専門とされるグレガー・エイッシュ(Gregor Aisch)さんが、視認性の良い色をマッピングするためのツールとして作成されたもののようです。グレガーさんのHPの一つvis4.netを訪サイトしてみると、美麗なインフォグラフィックスが沢山掲載されています。

          準備

          • chroma.jsをダウンロード
          • インポート (HTML)
          HTML
          <!DOCTYPE html>
              <html>
              <head> 
              </head>
              <body>
              
              
              <script src="chroma.jsファイルのurl"></script>
              <script> 
              // これから解説するchroma.js 実行コード 
              </script>
              </body>
              </html>

           

          分かりやすさ優先のため、chroma.jsの機能の一部しか説明しておらず、また、不正確・不十分な説明の箇所もあります。ご了承下さい。 chroma.jsには、他にも沢山の機能が実装されています。
          正確性・全機能を優先される場合は、chroma.js Documentationページをご覧下さいませ(•ᵕᴗᵕ•)⁾⁾🌟

          使い方

          chroma.scale().hex()

           

          パレット数: 30

          0
          1

           

          chroma.scale() はざっくり説明すると、「任意の2色を左右端に位置付け、グラデーションを実現するfunction」です。この記事では解説しませんが、2色以上にも対応しており、カラフルなグラデーションを作成することもできます。
          chroma.jsの醍醐味でもある「グラデーションパレット」を作成するためにも、先ずはこのグラデーションから一色を取得する方法を見ていきましょう。

           

          ★基本: 単色
           

           

          HTML
          <div id="elm"></div>
          JS
          var scl = chroma.scale(['crimson', '#fafcee']);
          var val = scl(0.5).hex(); //  val => #eb8895
          
          
          // もしくは一行で書くなら
          var val = chroma.scale(['crimson', '#fafcee'])(0.5).hex() // val => #eb8895

          先ずはscale([color1, color2])でグラデーションさせる両端の色を指定します。そして、先ほど見たような2色間のグラデーションで、どのあたりの色を取得するかをscl()内に数値を記述します。

           

          0
          1

           

          0~1までの値を区番(domain)と言い、左(0) → 右(1)となっています。0~1の間の区切り方は任意ですので、10段階中の左辺りを取得したいならなら0.3、100段階中の右端辺りなら0.75。幾らでも細分化可能です。(ホント素晴らしい機能ですね✨)

           

          取得した値を背景色にする

          指定した色を、ブロック要素の背景色にしたい場合は、element.style.backgroundでvalを割り当てればOKです。

           

          HTML
          <div id="elm"></div>
          JS
          var elm = document.getElementById('elm');
          var scl = chroma.scale(['crimson', '#fafcee']);
          var val = scl(0.5).hex();
          
          elm.style.background = val; // 背景 => #eb8895 💮
          
          
          
          // 分かりやすさのために分けましたが、var val に分けなくてOK
          /*=====================================*/
          
          var elm = document.getElementById('elm');
          var scl = chroma.scale(['crimson', '#fafcee']);
          
          elm.style.background = scl(0.5).hex(); // 背景 => #eb8895 💮

           

           

          • chroma.scale().hsl() | chroma.scale.lab() ...etc

            .hex() の他にも、.hsl(), .lab() などでも値を取得できます。カラー値変換もchroma.jsのメイン機能の一つです。ディスプレイによる色表示の方法には、カラースペース(色空間)(or カラーモデル) と呼ばれる「使用する色の範囲」を定めたスキームscheme*1がいくつかあります。そしてそれぞれのスキーム毎に色の範囲が定められています。

          • Color Space --- Wiki
          • chroma.js で扱えるカラースペースはchroma.js公式github-wiki-をご覧下さい。ほぼ全て? のカラースペースを扱え、更にDeomまで付いています✨
            chroma.js -github/wiki- Colors
            chroma.js -github/wiki- Color Spaces

          ★★★応用: グラデーションパレット作成

           

          グラデーションパレット(10区画)作る場合

          先の応用です。()内にscl(0.1), scl(0.2), scl(0.3)... 1.0 を代入したものを各要素の背景色にし、左から順に並べればOK。

           

          力技で、実現すると…

          HTML
          <style>
          .elm {
             display: inline-block;
             width: 10%;
             height: 200px;
             }
          </style>
          <body>
          <div class="elm" id="elm1"></div>
          <div class="elm" id="elm2"></div>
          <div class="elm" id="elm3"></div>
          <div class="elm" id="elm4"></div>
          <div class="elm" id="elm5"></div>
          <div class="elm" id="elm6"></div>
          <div class="elm" id="elm7"></div>
          <div class="elm" id="elm8"></div>
          <div class="elm" id="elm9"></div>
          <div class="elm" id="elm10"></div>
          
          <script>
          var e1 = getElementById('elm1');
          var e2 = getElementById('elm2');
          var e3 = getElementById('elm3');
          var e4 = getElementById('elm4');
          var e5 = getElementById('elm5');
          var e6 = getElementById('elm6');
          var e7 = getElementById('elm7');
          var e8 = getElementById('elm8');
          var e9 = getElementById('elm9');
          var e10 = getElementById('elm10');
          
          var scl = chroma.scale(['crimson', '#fafcee']);
          
          
          e1.style.background = scl(0.1);
          e2.style.background = scl(0.2);
          e3.style.background = scl(0.3);
          e4.style.background = scl(0.4);
          e5.style.background = scl(0.5);
          e6.style.background = scl(0.6);
          e7.style.background = scl(0.7);
          e8.style.background = scl(0.8);
          e9.style.background = scl(0.9);
          e10.style.background = scl(1.0);
          </scrit>

          となります。

          JavaScriptで実現する場合の一例は、以下になります。

          HTML
          <div id="elm"></div>
          JS
          var elm = document.getElementById('elm');
          var scl = chroma.scale(['crimson', '#fafcee']);
          var i;
          
          for (i = 1; i <= 10; i++) {
              var pale = document.createElement('div');
              pale.style.width =  10 + '%';  // 1パレット幅 = 100% × (1 / 欲しいパレット数) 
              pale.style.display = 'inline-block';
              pale.style.height = '160px';
              pale.style.background = scl(i/10);  // scl(1/10), scl(2/10), scl(3/10)...
              pale.innerHTML = scl(i/10);  // カラー値が分かるように、値をhtmlにも出力
              elm.appendChild(pale);
          }

          pale.style.background = scl(i/pales).hex()としなくても可。デフォルト設定値が、rgbカラースペース

          これをもう少し煮詰め、スマートにしたものが以下になります。

          JS
          var elm = document.getElementById('elm');
          var scl = chroma.scale(['crimson', '#fafcee']);
          var pales = 10;
          var i;
          
          for (i = 1; i <= pales; i++) {
              pale = document.createElement('div');
              pale.style.width = (100/pales) + '%';  // 1パレット幅 = 100% × (1 / 欲しいパレット数) 
              pale.style.display = 'inline-block';
              pale.style.height = '160px';
              pale.style.background = scl(i/pales);  // scl(1/10), scl(2/10), scl(3/10)...
              pale.innerHTML = scl(i/pales);  // カラー値が分かるように、値をhtmlにも出力
              elm.appendChild(pale);
          }

          思考の足あと🐾

          ●パレット10個作る → for loop で '新要素' を作成 [ document.createElement('div') ]
          ●要素10個 → 幅100%とした時、1要素の幅は10% になる [ 100% ÷ 10(パレット数) ]
          ●一つづつの要素の背景を1ループ毎に0.1, 0.2となるように [ scl(x) :: (1ループ目) x = 0.1 | (2ループ目) x = 0.2 になるように、「ループ毎に変化する値」 を上手く活用できれば… → i を使う ]
          ●作ったバレットをどこかくっ付ける( 親要素.appendChild(付け要素);

           

          煮詰め前・後js | 見比べ用

          js1
          js2
          var elm = document.getElementById('elm');
          var scl = chroma.scale(['crimson', '#fafcee']);
          
          var i;
          
          for (i = 1; i <= 10; i++) {
              var pale = document.createElement('div');
              pale.style.width =  10 + '%';  // 1パレット幅 = 100% × (1 / 欲しいパレット数) 
              pale.style.display = 'inline-block';
              pale.style.height = '160px';
              pale.style.background = scl(i/10);  // scl(1/10), scl(2/10), scl(3/10)...
              pale.innerHTML = scl(i/10);  // カラー値が分かるように、値をhtmlにも出力
              elm.appendChild(pale);
          }
          var elm = document.getElementById('elm');
          var scl = chroma.scale(['crimson', '#fafcee']);
          var pales = 10;
          var i;
          
          for (i = 1; i <= pales; i++) {
              pale = document.createElement('div');
              pale.style.display = 'inline-block';
              pale.style.width = (100/pales) + '%';  // 1パレット幅 = 100% × (1 / 欲しいパレット数) 
              pale.style.height = '160px';
              pale.style.background = scl(i/pales);  // scl(1/10), scl(2/10), scl(3/10)...
              pale.innerHTML = scl(i/pales);  // カラー値が分かるように、値をhtmlにも出力
              elm.appendChild(pale);
          }

          このように書き換えると、始めのvar pales = の右側を「作成したいパレット数」に変えるだけで、パレット作成数を簡単に調整できます。

          パレット数: 5

           

          パレット数: 15

           

          パレット数: 30

           

          iOS( iPad ) で "HTMLソースコード" を見る方法:: + 簡単コピー + スムーズ・スクロール

           

          Apple ToolBox さんを参照 + カスタマイズしてみました🌟

          http://appletoolbox.com/2014/03/how-to-view-webpage-html-source-codes-on-ipad-iphone-no-app-required/

          javascript:(function(){
              var a = window.open().document;
              a.write('<div></div>');
              var b = a.body.appendChild(a.createElement('textarea'));
              b.style.width = '100vw';
              b.style.height = '100vh';
              b.style.WebkitOverflowScrolling = "touch";
              b.appendChild(a.createTextNode(document.documentElement.innerHTML))
              })();

          f:id:DDramonQ:20170223223633j:image

          f:id:DDramonQ:20170223223645j:image

           

          • アプリ要らず
          • 早い + 全文コピー容易

          ずっと不便だなぁと思ってましたが、こんな便利な方法があるとは✨(⁼̴̀ૢ꒳​⁼̴́ૢ๑)

          W3C Specや EcmaScript Spec等の、テキストが多いページを、PC要らずで保存したい時に、大変重宝しました🌟

           

          実際の使い方は、Apple ToolBoxさん or  検索でおなしゃすです|*´-`)(丸投げw)

          シンプル&明快。プログラミング本の著者さん🌟

          『Think Python』, 『Thnk Java』辺りを参照させて頂く事が多いのですが、本当に分かりやすい。かつシンプル。

          Parameter, Argument についても、大変分かりやすく解説されてあります。

          文構造もシンプルでロジカル。単語も、よく使われる単語で書かれているので、大変理解しやすかったです。

          著者: Allen B. Downey( アレン・B・ダウニー)

          🇺🇸マサチューセッツ州のオーリン・カレッジでコンピューター・サイエンスの教授をされています。*1

           

          『Think』シリーズ ~ コンピューター・サイエンティストのよう考えるには ~ 『Think』Series --- how to think like a computer scientist ---

           

          Other

          ダレンさんが自ら立ち上げられた Greent Tea Press.com に、彼の他の書籍も置いてあります🌟

           

          Green Tea Press.com

          http://greenteapress.com/wp/

           

          教科書のマニフェスト*2

          アレン・B・ダウニーさんが、Green Tea Press に掲示されていた『Textbook Manifesto』を引用・翻訳してみました。この「Textbook manifesto も非常にシンプルで明快で素敵だと感じました(*´ω`*)✨ 色々と本当に有難うございます(* ˊ˘ˋ)*_ _))🌟

          ( I appreciate your FreeBooks, especially, "Think" series. It's easy to understand, plain explanation, and futhermore, free!! Because your books was not only easy to understand, but also explain fundamentas, More and more I have loved programming very much!:) Very very thanks.(* ˊ˘ˋ)*_ _))🌟✨♪ )

           

           

          Textbook Manifesto

          http://greenteapress.com/wp/textbook-manifesto/

          Allen B. Downey January 2010, updated February 2016


          My textbook manifesto is so simple it sounds stupid. Here it is:
          Students should read and understand textbooks.
          That’s it.  It’s hard to imagine that anyone would disagree, but here’s the part I find infuriating: the vast majority of textbook authors, publishers, professors and students behave as if they do not expect students to read or understand textbooks.
          Here’s how it works. Most textbook authors sit down with the goal writing the bible of their field. Since it is meant to be authoritative, they usually stick to well-established ideas and avoid opinion and controversy. The result is a book with no personality.
          For publishers, the primary virtue is coverage. They want books that can be used for many classes, so they encourage authors to include all the material for all possible classes. The result is a 1000-page book with no personality.
          For most professors, the cardinal virtue is course materials; they want a course-in-a-box. And judging by the email I get, what they really want is solutions to the exercises. Unfortunately, price is usually not an issue. The result is an expensive 1000-page book with no personality.
          For students, these virtues are irrelevant because textbooks are unreadable and, usually, unread.
          Here’s what happens. The professor chooses a 1000-page book and assigns students to read 50 pages a week. They can’t and they don’t, so the professor spends class time explaining what the students couldn’t read. Before long, the students learn that they shouldn’t even try. The result is a 1000-page doorstop.
          What’s the solution?
          Easy, it’s the opposite of everything I just said. Authors need to write books students can read and understand. That means 10 pages a week, or 140 pages for a semester long class. And it means writing for actual students, not the imaginary ones from 50 years ago who were “well prepared.” Actual students.
          Publishers: I don’t know what to tell you. Your role in developing and distributing textbooks is no longer required. You are now in the publicity business.
          Professors: Choose books your students can read and understand. If you can’t find one, write one. It’s not that hard. Then require students to read, and check whether they understand.
          How? Among other things, reading quizzes. Ask your students to read a chapter and then ask them questions about it. If a few students don’t understand, blame the students. If more than a few don’t understand, fix the book.
          Students: You should go on strike. If your textbook costs more than $50, don’t buy it. If it has more than 500 pages, don’t read it. There’s just no excuse for bad books.
          Translation
          Thanks to Joshua Haase, who translated this manifesto into Spanish. Here is his translation.
          About free books
          If you are thinking about writing a free book, here are reasons you should and suggestions about how: Free Books: Why Not?.

           

          (翻訳) 教科書のマニフェスト

          Allen B. Downey(アレン・B・ダウニー)

          2010.1 | 更新: 2016.2

           

          この教科書のマニフェストは馬鹿に聞こえるくらいシンプルです。それは…

          生徒は教科書を読み、それを理解すること

          それだけです。これに反対する人を想像する方が難しいでしょう。しかし本当に多くの教科書の著者や出版社、教授や生徒は、生徒が教科書を読み、理解する事を想定していないかのような行動をしています。これはとても悲しい事です。
          仕組みはこんな感じです。多くの教科書の著者は、その分野のバイブルを書こうというゴールを元に書き始める。正確性や権威性を意識するあまり、大抵よく知れたアイデアを盛り込み、矛盾や個人的な意見を避ける。結果、個性のない本が出来上がる。
          出版社にとっての先ず大事になる規範は、網羅性です。出版社は、出版予定の教科書が多くの授業で使われる事を望むあまり、著者に、想定出来うる全ての授業のために、全ての範囲を盛り込むようにと勧める。結果、個性のない1000ページの本ができてしまう。
          ほとんどの教授にとって、重要な規範はコースの教材です。彼らはコースインボックスを望んでいます。私が受け取った電子メールで判断するなら、彼らが本当に望んでいるのは、演習の解決です。残念ながら、大抵の場合、価格は気にされません。その結果、個性のない高価な1000ページの本が出来上がります。

          生徒の規範といえば、関係がない事です。なぜなら教科書が読めるようなものではないからであり、その結果、生徒たちは大抵教科書を読まない。
          事実はこんな感じです。教授は1000ページの本を指定し、週に50ページ読むよう生徒に課します。
          生徒が読めないのと読まないのとで、教授は講義で、生徒が読まなかったその内容を解説します。その結果、生徒は、教科書は読 もうとするべきではないんだということを学びます。結果、1000ページの"ドア止め"が出来上がる。


          解決策
          とても簡単で、私が言ったことの逆をする事です。著者は生徒が読み理解できる本を書く事が必要です。つまり、週に10ページ読め、一期の授業で140ページ進められる本という事だ。
          そして、実際の生徒のために書く、のであり、50年前の"準備万端"の生徒という空想のもののために書くのではありません。あくまで実際の生徒のために書くのです。

          出版社: 何を言えばよいか分かりません。教科書の研鑽と配布の役割はもはや必要とされていません。今やあなたたち出版社は公共のビジネスの中にいます。

          教授: 生徒が読み理解できる本を選びましょう。もし見当たらない場合は、書きましょう。そう難しくはありません。生徒に読んでもらい、生徒が理解できているかチェックをすれば良いのです。
          どうでしょうか。後はリーディングクイズでしょうか。生徒にチャプターを読んでもらい、そのチャプターについてのクイズを出すのです。もし理解していない生徒が少ないのなら、生徒に文句を言ってもいいでしょう。もしその生徒が少なくはないのなら、本を書き直しましょう。

          生徒: ストライキしましょう。もし教科書が$50(約¥5000~¥6200) より高かったら買わずにいましょう。
          500ページより多いのなら、読まないでおきましょう。悪い本には弁明の余地はありません。

           

           

          *1:Professor of Computer Science at Olin College of Engineering, MA, US

          *2:マニフェス
          --- cambridge dictionary
          --- コトバンク

          This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
          Background Photos is downloaded by Unsplash.com. Thanks!
          |*´-`)チラッ
          Please Click Me
          本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️