Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

W3C 仕様書用、『目次階層Nice.js』作って見た

W3C の仕様書の「目次の階層が深い & 枝が多い」 ので、全体像が把握しづらい。。そこで、階層構造を把握しやすいように、show/hide 出来るjsを書いてみました。

W3C全ての仕様書で試してはいませんが、幾つか試した所、問題なくいけました。ですので、恐らく←いけますw 目次が ul / ol で構成されており、目次のhtmlが特殊でなければ。。w

記事タイトルのネーミングがダサいのは、気にしないで下さい( ´・∀・` )w

f:id:DDramonQ:20170520214907p:plain

 

Demo

Demo

W3C specTable Toggle -Github-

 

 

導入手順

❶htmlファイルと同フォルダ*1 に specTableToggle.css, js を保存

 

f:id:DDramonQ:20170520213213p:plain

 

❷htmlファイル → ヘッダ : css, js ファイル を Import する為の記述

<link rel="stylesheet" href="specTableToggle.css">
<script src="specTableToggle.js"></script>

 

f:id:DDramonQ:20170520213232p:plain

 

❷htmlファイル → 目次の最上位階層 ul/ol にid付加

<ul id="tableOfContents">

 or

<ol id="tableOfContents">

f:id:DDramonQ:20170520213805p:plain

 

 

仕様書によって、目次の最上位要素が ul であったり ol であったりします。

そのに、 id="tableOfContents"を追加すればOK🌟

 

 

オプション

spec.hide()

●初めから、サブ階層を隠しておきたい場合は、

<script src="specTableToggle.js"></script>

以降に

<script>spec.hide()</script>

と記述。

f:id:DDramonQ:20170520213630p:plain

 

【見本】

spec.hide()...

❶無

f:id:DDramonQ:20170520213322p:plain

❷有

f:id:DDramonQ:20170520213347p:plain

 

 

 

階層の深さに関係なく、「liが子要素を持ち & その子要素が ul/ol 」であれば、<li>をクリックすれば、その子要素の ul/ol が "hide/ show" されます。

f:id:DDramonQ:20170520213555p:plain

 

 

*1:同じディレクトリ

最近設立された、日本のWebサイト2つ✨

Tech系サイト

MIT Technology Review 日本版

https://www.technologyreview.jp

f:id:DDramonQ:20170516234750p:plain

● 2016.10.1日本版 スタート(KADOKAWA, Spicebox.Inc, copilot.inc 共同)

●編集長 中野克平さん

●MIT とは、Massachusetts Institute of Technology の略で、アメリカ🇺🇸 マサチューセッツ州の私立大学。Times Higher Education の大学ランキングでも、常に上位。かの、ノーム・チョムスキー、マービン・ミンスキーもMIT卒。

特に、MITのメディア・ラボは、日本のTVや本でもよく取り上げられている。

●本家サイト(en) は、1899年に創刊*1

 

WJP ( web professional.jp ) -KADOKAWA-

https://www.webprofessional.jp/about/

f:id:DDramonQ:20170516234816p:plain

●MIT Tech Review日本 版編集長でもある 中野克平さん が、2016.07.20 にこのサイト創設。

●"Webとデジタルを一生の仕事にするための武器を手に入れる。

WPJは、デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援する

パスファインディング・メディアです。" ~ 御サイトTopより~

●世界的に有名な、オーストラリア🇦🇺の Web Developer向けサイト「SitePoint」と提携。SitePointのピックアップ記事を全文日本語で読める。ナチュラルで読みやすい日本語翻訳✨。

ソース:

http://web-tan.forum.impressrd.jp/n/2016/07/21/23406

http://www.spicebox.co.jp/news/release/2016/08/mit/

+
和馬の知識+私見w

 

 

 

最後に、各本家サイトのリンクも置いておきます🌟

MIT Technology Review

f:id:DDramonQ:20170516235313p:plain

 

SitePoint – Learn HTML, CSS, JavaScript, PHP, Ruby & Responsive Design

f:id:DDramonQ:20170516235210p:plain

 

 

*1: MIT Technology Review/ About us -https://www.technologyreview.com/about/-

【引用】コールバック関数の分かりやすい説明

callback function
-javascript is sexy.com-

Understand JavaScript Callback Functions and Use Them

march. 4 2013

(Learn JavaScript Higher-order Functions, aka Callback Functions)

In JavaScript, functions are first-class objects; that is, functions are of the type Object and they can be used in a first-class manner like any other object (String, Array, Number, etc.) since they are in fact objects themselves. They can be “stored in variables, passed as arguments to functions, created within functions, and returned from functions”.

Because functions are first-class objects, we can pass a function as an argument in another function and later execute that passed-in function or even return it to be executed later. This is the essence of using callback functions in JavaScript. In the rest of this article we will learn everything about JavaScript callback functions. Callback functions are probably the most widely used functional programming technique in JavaScript, and you can find them in just about every piece of JavaScript and jQuery code, yet they remain mysterious to many JavaScript developers. The mystery will be no more, by the time you finish reading this article.

Callback functions are derived from a programming paradigm known as functional programming. At a fundamental level, functional programming specifies the use of functions as arguments. Functional programming was—and still is, though to a much lesser extent today—seen as an esoteric technique of specially trained, master programmers.

Fortunately, the techniques of functional programming have been elucidated so that mere mortals like you and me can understand and use them with ease. One of the chief techniques in functional programming happens to be callback functions. As you will read shortly, implementing callback functions is as easy as passing regular variables as arguments. This technique is so simple that I wonder why it is mostly covered in advanced JavaScript topics.

 

 

 [翻訳: 和馬]

JavaScriptコールバック関数を理解し、使う

2013年4月

(JavaScriptの高次階層関数、別名:コールバック関数 を学ぶ)

JavaScriptでは、関数はファーストクラスの物体です。つまり、関数は物体タイプであり、他の物体タイプ(文字列(string)、配列(Array)、数値(Number)など)と同様にファーストクラスの方法で使用できます。それらは「変数に保存する、関数に引数として渡す、関数内で作成する、関数から返得する」ことができます。

関数はファーストクラスの物体なので、関数を別の関数に引数として渡し、渡された関数を後で実行したり、後に実行される関数の返得値とすることもできます。JavaScriptにおいて、これらがコールバック関数の本質です。この記事の残りの部分では、JavaScriptのコールバック関数のすべてについて学習します。コールバック関数は、おそらくJavaScriptで最も広く使用されている関数的プログラミングの技法であり、JavaScriptやjQueryコードの大部分で見つけることができます。しかしながら、未だに多くのJavaScript開発者にとっては、コールバックはよく分からないものとされてます。あなたがこの記事を読み終わる頃には、もはや謎ではなくなっているでしょう。

コールバック関数は、関数的プログラミングと呼ばれるプログラミングのパラダイムから派生しています。根幹基礎的なレベルにおいて、関数的プログラミングでは、関数を引数として扱う事を規定しています。関数的プログラミングは、特別に訓練されたマスタープログラマーの難解な技術と考えられてきましたが、今日では幾分それが薄れてきています。しかしながら未だにそう思われいる節があります。

幸いにも、関数的プログラミングの技法は、あなたと私のような単なる人間がそれらを容易に理解して使用できるように解明されています。関数的プログラミングの主な技術の1つはコールバック関数です。この短い記事を読めば、皆がいつもしているように変数を引数として渡すのと同じくらい、コールバック関数を使うのが簡単だと分かります。このテクニックはとてもシンプルで、なぜ高度なJavaScriptの主題になっているのかが不思議です。

callback function -javascript is sexy.com-

 

既存訳 words 和馬訳
オブジェクト object 物体
関数型プログラミング functional programming 関数的プログラミング
パラメーター parameter 共数
第一級関数 first-class function ファーストクラス関数
オブジェクト型 type object 物体タイプ
戻り値 return value 返得値

プログラミングにおける、「ファーストクラス」の意味

先ずは、通常での "first class" の定義を見てみます。

Definition

「first class」 -Merriam Webster-

meaning of "First-class" in Programming

WikiWikiWeb/FirstClass

First Class

A language construct is said to be a FirstClass value in that language when there are no restrictions on how it can be created and used: when the construct can be treated as a value without restrictions.

FirstClass features can be stored in variables, passed as arguments to functions, created within functions and returned from functions. In dynamically typed languages, a FirstClass feature can also have its type examined at run-time.

Languages vary as to what is FirstClass. Some, such as the CeeLanguage have only basic types (ints, pointers; in particular, arrays are not truly FirstClass though the array/pointer equivalence lets you fake it in most situations). In ObjectOriented languages such as CeePlusPlus, objects are FirstClass but classes are not, while in SmalltalkLanguage or RubyLanguage, for example, all references including references to class objects are FirstClass. In FunctionalProgramming, functions are FirstClass.

Some authors, such as Raphael A. Finkel in AdvancedProgrammingLanguageDesign, also define the terms SecondClass and ThirdClass (pg76); different authors have varying definitions of exactly what properties things should have to be considered first, second, or third class, but the terms are typically broadly similar to Finkel's.

 

 

[翻訳: 和馬]

ファーストクラス

言語の構成要素*1 は、その作成・使用のされ方に制約がない場合、その言語の FirstClass値と言われます。つまり、構成要素が何の制約も受けずに「値」として扱われる場合、その構成要素(値)を、FirstClass値と呼ぶ事ができます。

FirstClass(値)は、「変数に割り当てる」「関数に引数として渡す」「関数内で作成されたFirstClass値を、関数の返値にする」事ができます。また、動的なタイプの言語では、FirstClass値は型も持ち、実行時に調べることが出来ます。

何がFirstClassなのかは、言語によって異なります。 CeeLanguageのようなものは、基本的な型(int、ポインタ)しか持たないものがあります。特に、配列/ポインタの同等性によってほとんどの状況で偽装できますが、配列は実はFirstClassではありません。 CeePlusPlusなどのObject指向言語では、ObjectはFirstClassですがclassはFirstClassではありません。Smalltalk、Rubyでは、クラスオブジェクトへの参照を含むすべての参照がFirstClassです。 関数的プログラミングでは、関数はFirstClassです。

AdvancedProgrammingLanguageDesignのRaphael A. Finkelのような著者の中では、セカンドクラス(SecondClass)とサードクラス(ThirdClass) という用語も定義されています。第1クラス、第2クラス、第3クラスのプロパティの正確な定義は、著者により様々ですが、これらの用語は一般的にFinkelに似ています。

::: 語彙 :::

配列 - array
関数 - function
関数的プログラミング - functional programming
型 - type
引数 - argument

これは凄く重要ですね ✨(⁼̴̀ૢ꒳​⁼̴́ૢ๑) きっちり説明してありますね✨✨(⁼̴̀ૢ꒳​⁼̴́ૢ๑)♪♪

JavaScript で 、「Fnuction is FirstClass Object」という記述をよく見かけたのですが、つまりその意味は、「JavaScriptでは、 function は FirstClass(値) だ」という事ですね。要するに、『関数を、"変数に割り当てる・引数として関数に渡す・関数の返値にする" 事ができる』という事なのですね✨(⁼̴̀ૢ꒳​⁼̴́ૢ๑) しっかり理解しました🌟

WikiWikiWeb

ちなみに、このWikiWikiWeb (Wiki.c2.com) は、Wikipedia の源流とも言えるWebサイトさんです。何となく聞いた事はありましたが、まさか今回参照したサイトさんがそれで、サイトやWikiediaを参照し、はっきり理解しました。

WikiWikiWebは、Ward Cunningham(ワード・カニングハム) というプログラマの方が始められ、Web developer, engeneer 向けに、知識コンテンツ(ソフトウェアデザインパターン等)を共有する目的のWebサイトらしいです。詳しくは本家サイトメインページ等ををご覧くださいませ(。•ㅅ•。)⭐︎

WikiWikiWeb -MainPage-

WikiWikiWeb/Wiki histry

WikiWikiWeb -Wikipedia.en-

*1:language construct

前記事(引用) の執筆者 ジェニファー・ゴルベック教授

前記事で "Psychology Today" の「荒らし者・行為」への、科学的な対処法」を引用・翻訳させて頂きました。

今回はその記事の著者さんを紹介したいと思います。

著者: ジェニファー・ゴルベック(Ph.D) さん

ジェニファー・ゴルベック(Ph.D) はコンピューター科学者でありメイランド大学の教授です。

Jennifer Golbeck, Ph.D., is a computer scientist and professor at the University of Maryland.

In Print:  (ソーシャルウェブ分析)Analyzing the Social Web

Online:  jengolbeck.com

Psychology Today | -About the author-

 

Dr. Jen Golbeck is a world leader in social media research and science communication. She began studying social media from the moment it emerged on the web a decade ago, and is one of the world’s foremost experts in the field. Her research has influenced industry, government and the military. She is a pioneer in the field of social data analytics, discovering people’s hidden attributes from their online behavior, and a leader in creating human-friendly security and privacy systems. She is an Associate Professor at the University of Maryland. Outside her research, she hosts the books segment of the SCIENCE Magazine podcast and is a guest host of the Kojo Nnamdi Show.

Dr.ジェン・ゴルベックはソーシャルメディア研究と科学的コミュニケーションの世界的リーダーです。彼女はソーシャルメディアが出現し始めた十年前から研究しており、その分野の世界的に影響力のある専門家です。その研究は、工業や政府・軍にも影響を与えています。

ソーシャルメディア分析の第一人者であり、人のオンライン行動における隠れた特質を明らかにします。また、人間に馴染みやすいセキュリティや、プライバシー・システムの開発でも先陣を切っています。

彼女は、メイランド大学の准教授です。

研究以外では、サイエンス・マガジン・ポッドキャストの本部門の主催を務めており、コージョー・ナンディ・ショウのゲストホストも務めています。

jengolbeck.com | -Bio-

 

ジェニファーさんのWeb執筆記事

「インターネットで荒らし行為をする人は自己陶酔者で、サイコパスで、サディスト」( Internet Trolls Are Narcissists, Psychopaths, and Sadists )-Psychology Today-

「あなたはインターネットで荒らし行為をする人ですか」( Are You an Internet Troll? )-Psychology Today-

やはり(認知)心理学系の第一線の方は、コンピューター科学や哲学等、数学を利用する分野も並行して学ばれている事が多い気がします(私見です)。例をあげれば、

  • ドナルド・ノーマン(Donald Norman)、
  • マービン・ミンスキー(Marvin Minsky)、
  • ダニエル・カーネマン( Daniel Kahneman)、
  • ロジャー・シャンク(Roger Schank)

...etc。

僕も、もっと心を知るためにも、数学を再学習する予定でいます(っ•ω•⊂))🌟 幾つか英語の数学系書籍を漁ってみているのですが、数学(日本)とMathematics(海外) では、カテゴライズの仕方やそもそもの数学に対するスタンスが違う印象を受けています。

学び理解したら、その時はまた記事にできたらいいなと考えています。

あ、ちなみに日本の書籍で、敬愛する先輩の「数学全般に関するグレイトな書籍」が最近出版されました🌟

 

すべてを可能にする数学脳のつくり方

すべてを可能にする数学脳のつくり方

 

 

読了しましたが、何とまぁ面白い!!!!✨✨✨ 数学アレルギーの方にもお勧めしたい一品。日本の学校で学んだ数学のイメージを大きく覆してくださり、「数学って面白そうだなぁ✨もう一度学んでみたいなぁ✨」と思わせて頂きました。

「荒らし」に関する、日本のおすすめ科学記事

「ネット上に出没する「荒らし」はナルシシストでサイコパスなサディストであることが研究により判明」 -Gigazine-

【引用】「荒らしをする人」への、科学的対処法

「Psychology Today」の記事になります。 

f:id:DDramonQ:20170507220335p:plain

https://www.psychologytoday.com/blog/your-online-secrets/201409/internet-trolls-are-narcissists-psychopaths-and-sadists

 

Internet Trolls Are Narcissists, Psychopaths, and Sadists

Trolls will lie, exaggerate, and offend to get a response.

In this month's issue of Personality and Individual Differences, a study was published that confirms what we all suspected: Internet trolls are horrible people. 

Let's start by getting our definitions straight: An Internet troll is someone who comes into a discussion and posts comments designed to upset or disrupt the conversation. Often, in fact, it seems like there is no real purpose behind their comments except to upset everyone else involved. Trolls will lie, exaggerate, and offend to get a response. 

What kind of person would do this? Some Canadian researchers decided to find out.

They conducted two online studies with over 1,200 people, giving personality tests to each subject along with a survey about their Internet commenting behavior. They were looking for evidence that linked trolling with the "Dark Tetrad" of personality traits: narcissism, Machiavellianism, psychopathy, and sadism. 

They found that Dark Tetrad scores were highest among people who said trolling was their favorite Internet activity. To get an idea of how much more prevalent these traits were among Internet trolls, see this figure from the paper:

Look at how low the Dark Tetrad scores are for everyone except the trolls! Their scores for all four traits soar on the chart. The relationship between trolling and the Dark Tetrad is so significant that the authors write in their paper:

"... the associations between sadism and GAIT (Global Assessment of Internet Trolling) scores were so strong that it might be said that online trolls are prototypical everyday sadists." 

Trolls truly enjoy making you feel bad. To quote the authors once more (because this is a truly quotable article): "Both trolls and sadists feel sadistic glee at the distress of others. Sadists just want to have fun ... and the Internet is their playground!"

The next time you encounter a troll online, remember:

These trolls are some truly difficult people.

It is your suffering that brings them pleasure, so the best thing you can do is ignore them. 

References

Buckels, Erin E., Paul D. Trapnell, and Delroy L. Paulhus. "Trolls just want to have fun." Personality and Individual Differences67 (2014): 97-102.

Photo adapted from original by Kevin Dooley

 

 

 

[翻訳: 和馬]

インターネットの荒らしをする人( 以下: 荒らし者 )は、自己陶酔者であり、サイコパスであり、サディスト

荒らし者は、反応してほしいがため、嘘・誇張・攻撃的な振る舞いをします。

 

荒らし者はホリブルな人なのではないか、と皆さんは考えているかもしれませんが、今月号の「パーソナリティと個人差」で、我々のそのような考えを裏付ける研究が発表されました。

 

まず、定義を明確にするところか始めましょう:荒らし者とは、会話に入って、会話を混乱させたり中断するような意図的コメントを投稿する人です。実際には、関係者全員を動かすことを以外、そのようなコメントの背後に、本当の目的がないようです。荒らし者は、反応してほしいがため、嘘・誇張・攻撃的な振る舞いをします。

 

どのようなタイプの人がこれをするのでしょうか? カナダの研究者たちがそれを解明しようとしました。

彼らは1,200人以上の人と2つのオンライン調査を行い、それぞれの主題にパーソナリティテストを行い、インターネットのコメント行動についてのアンケートを行いました。彼らは、ナルシシズム、マキャベリ主義、精神病、サディズムといった性格特性の「Dark Tetrad (ダーク・テトラド) 」と、「荒らし行為」を結びつける証拠を探していました。 

 

インターネット活動で荒らし行為が好きだと言った人々が、"Dark Tetrad" の得点が最も高いことを発見しました。荒らし者の中でこれらの特性がどれくらい強いかを知るには、この図を参照してください。

 

"Dark Tetrad"の得点は、荒らし者以外の人全てにおいて、どれほど低いかを見てください! 彼らの4特性全ての得点が、チャート上で飛躍的に高い。荒らし行為と"Dark Tetrad" の関係は非常に重要なので、著者は論文を書いています。

"...「サディズムとGAIT(荒らしのグローバルアセスメント)スコアの関連性は非常に強かったので、荒らし者は典型的なサディストであると言えるでしょう。...

荒らし者は、あなたが不快な気分になるのを楽しんでいることは間違いありません。著者はもう一度引用する(これは本当に引用可能な記事なので): "荒らし者とサディストは両方とも、他の人の苦痛でサディスティックな喜びを感じる。サディストは楽しいと思うだけで...インターネットは彼らの遊び場だ!

 

もし今後、オンラインで荒らし者に出会う事があったなら、次のことを思い出して下さい:

 

荒らし者は本当に厄介な人たちです。

あなたが迷惑がれば彼らは喜びます。ですから、あなたができる最善の方法は、「彼らを無視すること」なのです。

 

 

 

参考文献

Buckels、Erin E.、Paul D. Trapnell、Delroy L. Paulhusが挙げられる。 「荒らし者はただ楽しみたいだけ」人格と個人差67(2014):97-102。

 

タッチデバイスで、「Drag-like Action」を実装してみた🌟

JS Bin on jsbin.com

DOM イベントに関するTipsです。

タッチデバイスの場合、touchmove の Event type (Event Handler) が実装されているので 、ドラッグというよりは、タッチ&スワイプして、そのまま要素ブロックを移動させる実装の仕方になります。

 

そこで、今回は、スマホアプリ等にもたまに実装されている、

「一定期間タッチし続けると、イベントが発動する」

というアクションを、JavaScriptで実装してみました。

上記デモでは「青ブロックを1秒以上タッチし続けると、赤ボーダーがブロック周りに出現し、ブロックが移動可能になる」というものです。

 

「やってみたい!✨」と思ってコードをいじってみた所、実現できたので、大変満足であります(つ´ω`c)✨✨♪♪

ECMAScript-5.1(2011) 骨子。備忘録

基礎的過ぎて飛ばしがちだけれど、本質的な理解に、すごく重要な箇所(私見w)

ECMAScript 5.1

10 Executable Code and Execution Contexts

10.1 Types of Executable Code


There are three types of ECMAScript executable code:

Global code is source text that is treated as an ECMAScript Program. The global code of a particular Program does not include any source text that is parsed as part of a FunctionBody.

Eval code is the source text supplied to the built-in eval function. More precisely, if the parameter to the built-in eval function is a String, it is treated as an ECMAScript Program. The eval code for a particular invocation of eval is the global code portion of that Program.

Function code is source text that is parsed as part of a FunctionBody. The function code of a particular FunctionBody does not include any source text that is parsed as part of a nested FunctionBody. Function code also denotes the source text supplied when using the built-in Function object as a constructor. More precisely, the last parameter provided to the Function constructor is converted to a String and treated as the FunctionBody. If more than one parameter is provided to the Function constructor, all parameters except the last one are converted to Strings and concatenated together, separated by commas. The resulting String is interpreted as the FormalParameterList for the FunctionBody defined by the last parameter. The function code for a particular instantiation of a Function does not include any source text that is parsed as part of a nested FunctionBody.

翻訳:

10 実行可能コードと実行文脈(実行コンテクスト)

10.1 実行可能コードの種類

 

ECMAScriptが実行可能なコードには、3つのタイプがあります。

(1)グローバルコードとは、ECMAScriptプログラムとして扱われるソーステキストです。グローバルコードには、FunctionBody(関数の中身)は含まれません。

(2)evalコードとは、組み込みのeval関数に提供されるソーステキストです。...(略)

(3)ファンクションコードとは、"FunctionBody(関数の中身)"として、解析されるソーステキストです。...(略)

ちょっと翻訳サボりました😅w 重要骨子部分だけ翻訳してみました。
全文google翻訳にかけてみたのですか、今回は分かりやすく翻訳されなかったので、掲載をやめました。気になる方は、各自で翻訳かけてみて下さ(* ˊ˘ˋ)*_ _))🌟

StickyNav.js (snippet) 作ってみた🌟

JsBin デモ

 

JS Bin on jsbin.com

 

因みにiPadからだと、embed版・jsbinページでもうまく表示されないと思うので、対処法を🌟

 

f:id:DDramonQ:20170430220655j:plain

f:id:DDramonQ:20170430220731j:plain

開いた先の「全面表示ページ」では上手く作動します🌟

f:id:DDramonQ:20170430220831p:plain

JavaScript

"use strict";

var _ = console.log;

var nav = document.querySelector('#nav'),
    navWrap = document.querySelector('#navWrap'),
    navWrapH = navWrap.getBoundingClientRect().height,
    navRect = nav.getBoundingClientRect(),
    navH = navRect.height,
    navTop = navRect.top,
    scrollY = 0;
        //_(navWrapH, navH)
window.addEventListener('scroll', function() {
    scrollY = 0 - document.body.getBoundingClientRect().top;
    
    if( scrollY > navTop ) {
        nav.classList.add('fixed');
        navWrap.style.height = navH + 'px';
    } else {
        nav.classList.remove('fixed');
        navWrap.style.height = '';
    }
});

こんな感じでどうでしょうか。。(´-`).。oO(ちょっと不安w)

6月いっぱいではてなブログを卒業します⭐️

更新が切れるのを機会に、ネットワーク系やサーバー系の知識も学べるという事で、レンタルサーバーを借りてブログを継続していこうかと考えています。まだ全然準備していませんが😅w

 

記事はそのまま数年の間は置いておこうと思っています。7月以降は、はてなさんの広告が入りますがご了承下さい⭐️

 

フォローさん・フォロワーさん僕のブログを読んで下さってありがとうござました。引っ越し先のブログのリンクも又貼りますので、もしよろしければ、引き続きよろしくお願いします٩(⁼̴̀ꇴ⁼̴́٩)♪⭐️

 

p.s: 移転しても、フォローさんのブログはちょくちょく訪れると思いますのでよろしくお願いします(スター落とせないので誰か分かりませんが😅w)

「テーマ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

           

           

           

           

           

          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̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️