Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

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

思考の整理も兼ねて。分かりやすい説明を心がけて。。

window.requestAnimationFrame(Callback)

JavaScript でアニメーションを描写したい時に使います。

JavaScript でアニメーションを描写するには、 window.setInterval()window.setTimeOut()などの、タイマー系メソッドを使ってアニメーションを実現します。後発で実装されたwindow.requestAnimationFrame()は、こちらもタイマー系メソッドでsetTimeout()に近いですが、アニメーション描写に特化されており、色々な点が改良されたメソッドとなっています。特徴としては、

  • デバイス毎に最適なフレームレートになるよう自動でcallbackをupdateするタイミングを計算・実行してくれる
  • フレームの不足・超過がなくなる → (スムーズなアニメーション描写 | CPU・GPUの浪費の削減)

などです。

 

ではまず、W3C のサンプルコードから。。

CSS

#ani {
   position: absolute;
   left: 10px;
   padding: 50px;
   margin: 100px;
   width: 100px;
   height: 80px;
   background: crimson;
   color: #fff;
   }

 

HTML

<div id="ani"></div>
<button onclick="start()">Click me to start!</button>
<button onclick="stop()">Click me to stop!</button>

 

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;
}

 

 

 Timing control for script-based animations -W3C

 

JS Bin on jsbin.com

 

JavaScriptのコードを一見して、分かるようなわからないような…。Statement Block が複数に分かれているため、少し分かりにくいですね。少なくとも、僕は初見ですんなりとは理解できませんでしたw(僕の知識不足もありますが…😅💦w) そこで、これを分かりやすくするため、限りなくシンプルなコードにしてみました。

 

基礎編

CSS

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

 

HTML

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

JavaScript

var elm = document.getElementById("ani");
var n = 0;

function animate() {

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

var id = requestAnimationFrame(animate);
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);
   }

});

❶(通常版)requestAnimationFrame(Callback)(Callback) を別々に記述

❷(合体版)

requestAnimationFrame(Callback)(Callback)の部分に、直接 Callback (Function)コールバック(関数) を記述

 

 

❷: Demo

JS Bin on jsbin.com

 

大分コードがまとまり、どの部分が何の働きをするのか、分かりやすくなったのではないでょうか。

❶と❷で記述の仕方が少し違いますが、実行結果は同じです。

ここでは、コードが上から順に実行されていき、理解しやすい❷(合体版) の方を見本に解説していきます。

それではいよいよ、

  • requestAnimationFrame()
  • callback function であるfunction animate(){}の中身

を理解し、アニメーションが実現される仕組みをみていきましょう🌟

 

ポイント1 - Callback function 内で、requestAni...(Callback) の再要請re-invocation

requestAni...()は、大雑把に言うと、アニメーションの1フレーム分を呼び出します。先ほど書いた様に、そのJavaScriptが実行されるデバイス環境によって、最適化された1フレーム分です。

JavaScript によるアニメーションscript-based animationの原理としては、実際のアニメやパラパラマンガの原理を想像すると分かりやすいかもしれません。いくつもフレームが順番に1, 2, 3, 4毎目と変化していくことによって、アニメーションになる訳です。

このリクアニメソッドもその方法と同じ原理です。そのめくるタイミングはrequestAni...()が、観覧デバイスに最適になるように実行してくれます。後はその一枚一枚をどの様に描写するかをCallback(function)で記述します。

Callback とは正確にはcallback functionコールバック関数の事であり、「Event発生後や、とあるコード終了後にinvoke要請されるfunction」です。callback とは、日常では「折り返し電話」の事ですが、programmingの場合は、上記の意味で使います。

この場合、requestAnimationFrameで1フレーム分を呼び出した後に実行されるfunctionの事で、そのCallback Function で各フレーム毎の描写をどの様にするか記述します。

requestAni...(Callback)Callbackを繰り返す事でアニメーションを実現する

1フレームを呼び出し、そのフレーム内をどう記述するかも書いたとします。ですが、これは1フレーム分です。パラパラマンガのようにアニメーションにするにはこれを連続して繰り返す必要があります。
その為、(callback)内に再度requestAni...(callback)を記述し、1番始めに記述した(callback)内をループさせる形になるます。そして、このままだと永久にアニメーションが実行されてしまうので、ある条件を満たした際にアニメーションが停止するよう、if文if statementで定義しておきます。これでアニメーションの完成という訳です。

var id = requestAnimationFrame(function animate() {

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

});

因みに、アニメーションを実現するポイントとして、1回目のrequestAnimationFrame(callback)のcallback function内に、2回目のrequestAni...(callback)(上記の例ではrequestAni...(animate))を記述する点です。

どういうことか理解するため、もう一度コードの実行プロセスを考えてみましょう。

最初のrequestAni..で1フレーム呼び出し、elementの振る舞いが実行された後、再びもう1フレーム分を呼び出し実行→ さらに次の1フレーム分を呼び出し実行 →... となりアニメーションが実現される訳です。もし、先の見本コードのようにcallback内に次のフレーム呼び出すrequestAni...(callback) を記述する方法ではなく、それ以外でアニメーションを実現しようとすると、コードが非常に煩雑になってしまうのです。

var elm = document.getElementById('d');
var n = 0;

function animate() {

   elm.style.left =  2*n + "px";
   n++;
   
   if (parseInt(elm.style.left) > 200) {
      cancelAnimationFrame(id);
   }
}

var id = requestAnimationFrame(function() {
   animate();
   requestAnimationFrame(function() {
      animate();
      requestAnimationFrame(function() {
         animate();
         requestAnimationFrame(function() {
            animate();
            requestAnimationFrame(function() {
               animate();
               requestAnimationFrame(function() {
               animate();
                  requestAnimationFrame(function() {
                     animate();
                     ...
                        ...  
                        
                                            
                  });
               });
            });
         });
      });
   });
});

コードが実行される流れExcution processを追ってみると分かりますが、1度目のrequestAni..()は一回実行されただけで終わってしまいます。再び実行して次のフレームを呼び出し・描写するには、その回数分だけrequestAni..()と書かなければなりません。欲しいフレーム分だけ、requestAni...(callback)を書く必要が出てきてしまいます。これは事実上不可能ですね😅w

ということで、callback内の 「loop is cool!✨;)」 という訳なのですね🤗🌟

 

 

 

  • Function Declaration関数宣言 & Function Expression関数式

サンプルコードで❶通常版, ❷合体版 は、どちらも関数宣言Function Declarationで関数を定義Function Definitionしています。

function の定義の仕方には、大きく分けて2つ、
 - Function Declaration
 - Function Expression
があります。どちらもでもほぼ同じですが、正確には少し違いがあります。少し踏み込んだ内容であり、普段は気にしなくてOKです。気になる方は、書籍等ご参照下さい(•ᵕᴗᵕ•)⁾⁾🌟

Function Declaration, Function Expression って? という方は、こちらの記事をご参照下さい(* ˊ˘ˋ)*_ _))🌟
 -

  • Callback Functionコールバック関数

requestAnima...(callback) の Callback (function) って何? という方は、こちらの記事をご参照下さい(* ˊ˘ˋ)*_ _))🌟
 - Understand JavaScript Callback Functions and Use Them -JavaScript Is Sexy.com

"Webサイト解説(en)・free books"で、 Callback についての正確な説明は少ないように見受けられました。日本語のWebページも少し検索してみましたが…💩✨←(コラコラw)でした。
元々callback の概念は、Functional Programming(FP) に由来するものらしいです🌟⁽⁽φ(・д・。)ホォホォ←(これから学習予定ですw)

*1

  • window.requestAnimationFrame()

window.requestAnimationFrame()requestAnimationFrame() と記述し、window.は見易さのため省略しています。書かなくても作動はしますが、window.requestAnimathonFrame()から分かるように、requestAnimationFrame()はwindow objectのメソッドです。

オブジェクトのプロパティ(property)・メソッド(method)は、JavaScript の基幹部分の一つです。しかしながら、"Webサイト解説(en)"や"free books"でも、この辺りを明確に解説しているものはほとんどない印象でした。市販の本で、かつComputer Scienceを学ばれた方の書籍を参照した方が良いかもしれません。

ちなみにこのブログで何度も書いている「JavaScript Ninja」にはバッチリ分かりやすく解説されてましたので超絶オススメです|*´-`)✨←(回し者)w 知って間もないですが、Manning pub さんはIT 関連を専門にされている出版社らしく、サンプルを幾つかか読んでみたり購入*2してみましたが、良さそうな書籍が多そうな印象でした。

他のIT関連書籍の出版社だと、定番の O'Reilly(オライリー) でしょうか。日本語の翻訳本も多数出ています🌟

 

:: Reference

:: 応用編(次回): requestAni...()のcallback function の argument(引数)

 

後半解説:17.03.20追加

ddramonqssecret.hatenadiary.jp

 

 

 

*1:後、これはこの事項だけに限りませんが、「誤った説明」「本質から外れている説明」というのは読まない方がよいと最近感じました。意欲が削がれ、余計に「それ」が分からなくなる事があると感じました。分からない →「それ全体」への興味が削がれてしまう。
これは誰が悪い訳でもないと僕は考えています。ただもし、今後そういう説明媒体に出会った場合は、「読むのをやめる」→「他に分かりやすいと感じる説明媒体がないか探してみる」をお勧めします。的を射ない説明は、読者の頭が悪いからでもなんでもなく、的を射ないからであり、何度読んでも分かりません。他の可能性を探るのが吉だと最近ひしひし感じています(現在進行系)。ご多分に漏れず、この記事も分かりにくいと感じる場合は、即刻斬り捨て御免! でおなしゃすですw0(:3 )~ ('、3_ヽ)_ 精進いたします(꜆꜄•௰•)꜆꜄꜆»💦シュシュシュッ

*2:『Get Programming With JavaScript』Author: John R. Larsen

ColorWheel を作成中…::(っ`ω´c)::💦 + Chroma.js さんが秀逸過ぎる

Brian Grinsteadさんのコードを参照させて頂き、ColorWheelの仕組みを理解し、もう一度自分で作れるか一から自作中です✨

Colorwheel 1K - Brian Grinstead

don't code today what you can't debug tomorrow: color wheel on Canvas

 

jsコード自体は短いのですが、使っている内容に色々な要素が盛り込まれていたため、只今苦戦中です…৲(๑*д*๑)◞՞??

 

JavaScript で Color Wheel を描くには…

  • <canvas></canvas> の DOM プロパティ・メソッド
  •  コンピューターでの色表示関連 ( Color Space/ Model | sRGB, HSL, HSV, Labなど)
  • Geometry ( 三角関数・図形あたり )
  • Color Conversition ( HSL to RGB )

 

が必要のようです。

Maths is Fun! さんの Geometry (三角関数・図形) 周りを参照しながら、ちょっとずつ進めています。うん、高校の時に習ったけど、何となくしか覚えていない…そしてうる覚えはほとんど使い物になりませんでした…::(っ`ω´c)::💦

そして、 sinθ(サイン) がどいう事を表しているか、今← はっきりと理解しました(*⚫︎ー⚫︎)b🌟 w

 

絶賛奮闘中ですもんげ~(  Д ) ゚ ゚

 

Chroma.js

https://gka.github.io/chroma.js/

f:id:DDramonQ:20170202000959j:image

 

ざっくり概要

  • 色の玉手箱ような、幅広い機能性
  • 種々のカラーモデル毎(RGB, HSV, HSL, Lab, Color Brewerなど)の、グラデーションを簡単に作成できる。
  • 連続グラデーション・非連続グラデーションどちらも。段階数(step)も指定できる

 

ざっと眺めるだけでも、なんとなくどんな感じか分かるかと思います。また、解説の例が、デモ機能も備えているので、color hex(#xxxxxxのやつ) を入力すれば、実際にどのような感じで使えるのかがわかります。うん、その機能自体がもうすんばらしぃです、はい(ˊo̶̶̷ᴗo̶̶̷`)✨✨♪

 

それにしても、まぁ本当にすごいの一言です。恐ろしく広範な量の知識を知り 且つ、JavaScript のスキルも高くないとこれを実現するのは難しい。

僕も触りだけですが、hsl, hsv, lab についてのWiki記事を読みましたが、数式(数学)の知識が少し必要なようですね(;´Д`A💦

 

このライブラリの著者さんは、アメリカの世界的にも有名な新聞、The New York Times でデータ・ビジュアリゼーションを専門にされている方だそうです。統計データを、「分かりやすく、見易く、綺麗に」描写する事を専門にされておられるので、『色』に関してもプロフェッショナルな方なのですね~(*ö*)🌟

 

 

 

 

 

Outside The World ~ 外側の世界へ ~ ❶

f:id:DDramonQ:20170209214106j:image

[ Mare Serenitatis, Moon : Taked By NASA : photo via Unsplash.com ]

 

この記事は、僕が英語習得を開始してから約一年半の間に、新しく知った事をキュレーションする記事の、プロローグである。

英語学習のキッカケとなった出来事を、少しばかり振り返ってみたい。

 

キッカケ

キッカケとなったのは、苫米地英人さんの書籍だ。初めて彼の書籍に出会ったのを今でも鮮明に覚えている。それほどインパクトが強かった。2007年、大学近くの小さな書店でだった。そして、本格的に彼の書籍全般を読み始めたのが、少し間を置いた2011年頃の事。

 

彼の書籍のおかげで、心理学以外の心のサイエンスを知り、またそれ以外のビジネスや学問・サイエンスについても色々と教わった。僕は世界について、ほとんど何も知らないという事を知った。知っていると思っていた自分が恥ずかしい。もっと色々な事を学んでみたいと思った。

今まで興味のあった「心理学」、それを包摂する学問領域がある事を知った。つまり、心を扱う研究に心理学自体を含む、よりもっと大きな枠組みとして「認知科学・哲学・脳科学...etc」がある事を知った。また、日本に伝わっている以上に、もっともっと心の研究は進んでいるのだという事も知った。

 

それまでは、心を扱っているもの → 心理学・もしくは自己啓発の書籍? 位しか知識がなかった。「知らない」という事は知識がないのだから、その外側にも、それに関連する様々な事柄がある事を知り得なかった。今自分が知っている世界を「世界」だと思い込んでいた。勘違いも甚だしい。まさに「井の中の蛙大海を知らず」状態だった。

だから、当然心 → 脳・サイエンスという発想がなかった。知らないという事は恐ろしい。

しかし、彼に書籍という媒体を通して、その外側に沢山の面白い・広大な世界が広がっているという事を教えてもらった。そして、僕も心に関する学問(liberal arts)や科学(science)を、本場で学んでみたいと思った。もっともっと心や脳について知りたいと思った。そして、それなら先ずは英語を習得し始めるしかないだろうと考えた。

 

英語は大学受験で学習したものの、その後全く使う機会もなく約10年が過ぎた。ほぼ一からの再スタート状態だ。苫米地さんの科学的な裏付けのある「英語脳」書籍*1に従い、英語習得に着手し始めた。そして、興味のある脳科学や心理学系の、英語で書かれた雑誌や書籍・Webサイトを、少しずつだが読み始めた。映像学習はあまりできている方ではないが、それでも極力耳・目・口を使って、英語だけで英語を理解する環境を整えた。

翻訳情報も充実してきている

現在は、インターネットや様々なメディアでも、海外のことを多く報道するようになった。僕が学生時代だった10年前と比べれば確実に増えていると思う (2005年前後あたり・主観です😅w) 。そして、それはすごくいい事だと思う。しかしそれでも、日本に伝わっているものは、まだまだほんの一部分に過ぎない。また、伝わる際に、その醍醐味や面白さが削がれてしまっているものも少なくない、そう感じている。例えば、数学やプログラミング。デザイン。色々な分野(IT, 政治,エンタメなど) のWebサイト。教育など。

 

日本以外の国の、様々な面白い事や楽しいことを紹介しておられる、日本の会社や個人の方もおられる。例えば、サイエンスパークWao, Courrier Japon, Forbes Japan, BBC Japan, 日経サイエンス、その他個人の方など。そしてその流れはグローバル化に伴い、益々広がってきているように感じる。個人の可能性がより広がるという意味でも、とてもいい流れだと思う。

 

ただし、そこに制約が伴うことも考慮に入れておく必要がある。やはり翻訳という作業が間にあるゆえに、どうしても翻訳者のフィルターがかかってしまう。それは、どうやったって避けられれない。それが例えAIでも同じ事。発話者が発言したものを、その言語で直接見聞きする事と、翻訳を見聞きするのとでは、大きくニュアンスや伝わり方が違う。その醍醐味や面白さをダイレクトに感じることができる。これは僕が実際感じ、その違いとメリットに大きく驚いている事でもある。

例えるなら、表現するのが難しいが、富士山を映像で観るのと、実際に生で見る違い。「え、同じじゃない?」と思ったそこのあなた、まぁそう言わずに聞いて下さいなw😅💦

やはり実際に生で見る場合は、匂いも感じられるし画面のフレームもない。自分の好きな視点から富士山を見ることができる。同じ角度だったとしても、フレームがあったとしても、やはり生で見るのと、液晶でカラーを再構築された映像を見るのとではそのニュアンスが全然違う。何となくわかっていただけただろうか(汗)

言語の場合も、その言語独特のニュアンスや、その言語体系にしかない単語や表現の仕方がある。まだ日本語と英語しか知らないから偉そうな事は1ミリも言えないが、実感としてその違いのダイナミズムというか面白さをすごく感じる。

「翻訳を読む」事と「その言語で読む」事の間に、違いがある事を僕は伝えたかったし、だからこそ、その言語で学ぶ事の面白さ、エキサイティングさを伝えたいなと思った。

 

翻訳によって、日本語で読めるという事のメリットはとても大きく不可欠な事だと思う。けれどやはり、発話者の言語をそのまま理解できる醍醐味・メリットもまた大きい。これはいくら強調し過ぎてもしすぎる事はないと思う。一次情報にアクセスできる事、情報量が数倍に広がる事、それに伴い「世界」が広がる事、これらのメリットは非常に大きい。

誰かの、何かのキッカケになれたのなら嬉しい

さて。今後続くかは未定ですが😅、この約1年半の間に、知り、感じた「英語圏にある面白い事」、そして、僕が特にこの記事を書きたくなった理由「間違って伝わっているようだけれど、本当はとてもエキサイティングなものだったんだ、と感じた事」をテーマに、記事を書いてみたい。英語圏に広がっている「面白そうな事」「楽しそうな事」を少しでも紹介でき、「それやってみたいかも」「英語も使えるようになれたらいいし、面白そうだからやってみようかな」と思ってもらえれば嬉しい限りだ。

僕も偉そうな事は1ミリも言えた義理ではない。絶賛大・学習中であります!?✨(⁼̴̀ૢ꒳​⁼̴́ૢ๑) (*ö*) ( ˙◊˙◞ )◞💡!? ((φ(•̀д•́。)ホォホォ =͟͟͞͞⁽⁽φ((³ㅂ³๑⃙⃘)՞??

 

 

 [こんな事を今後書いていけたらいいなリスト]

  • 科学とサイエンス(science)は全然違う?
  • サイエンスはびっくりするほど面白い!!
  • 数学(算数) とMathmatics は大きく違う?
  • Mathmatics って凄い!
  • プログラミングが面白い
  • デザインは定性的なものではなく科学である
  • 日本の報道と、海外のジャーナリズム(journalism)
  • 様々な分野に「超」がつくくらいの、凄い一流先輩方が沢山おられる
  • ライティングとスピーキングの授業
  • ディベート文化
  • 教育科目の「分類・呼び方」がそもそも違う
  • ビジネスという概念
  • お金は生きる為の手段であり、仕事はそれを得る為の手段に過ぎない
  • 世界のたった2% の日本人の内の、大半(50%以上 / つまり… :  2% × 50% = 世界の1%)が知っている事が常識?
  • 英語圏の外側

 

 

 

 

Google翻訳の精度Upしてたよ✨♪

Google翻訳の翻訳精度が、大幅にUpしたみたいです🌟

Google翻訳

 

英語や外国語が更に身近なものになりました。本当にありがたい事です。Googleさん、ありがとうございます(* ˊ˘ˋ)*_ _))ペコリン🌟

 

という事で。今回はこれにあやかり、またまた ウィキペディア.enの「Philosophy」の一部を翻訳にかけてみました。過去に「Yarakuze+ 和馬訳」で試みた事がありますw 「何回やんねん!?w」という声が聞こえてきそうですがw 考える事が趣味なもので o͡͡╮(。-∀-。)╭o͡͡ 哲学が好きでんがなまんがな~ o͡͡╮(。-∀-。)╭o͡͡w✨♪

 

また、私見にはなりますが、やはり英語版のWikiの方が、本場の哲学の空気感というか醍醐味・面白さが伝わってくるように感じました。

それでは🌟

 

 

 

Philosophy [ Wikipedia.en (17.0121) ]

Philosophy - Wikipedia

 (*もくじの"赤色部分"が引用させて頂いた部分です)

Philosophy (from Greek φιλοσοφία, philosophia, literally "love of wisdom") is the study of general and fundamental problems concerning matters such as existence, knowledge, values, reason, mind, and language. The term was probably coined by Pythagoras (c. 570 – c. 495 BC). Philosophical methods include questioning, critical discussion, rational argument and systematic presentation. Classic philosophical questions include: Is it possible to know anything and to prove it? What is most real? However, philosophers might also pose more practical and concrete questions such as: Is there a best way to live? Is it better to be just or unjust (if one can get away with it)? Do humans have free will?

 

Historically, "philosophy" encompassed any body of knowledge. From the time of Ancient Greek philosopher Aristotle to the 19th century, "natural philosophy" encompassed astronomy, medicine and physics. For example, Newton's 1687 Mathematical Principles of Natural Philosophy later became classified as a book of physics. In the 19th century, the growth of modern research universities led academic philosophy and other disciplines to professionalize and specialize. In the modern era, some investigations that were traditionally part of philosophy became separate academic disciplines, including psychology, sociology, linguistics and economics.

 

Other investigations closely related to art, science, politics, or other pursuits remained part of philosophy. For example, is beauty objective or subjective? Are there many scientific methods or just one? Is political utopia a hopeful dream or hopeless fantasy? Major sub-fields of academic philosophy include metaphysics ("concerned with the fundamental nature of reality and being"), epistemology (about the "nature and grounds of knowledge and...its limits and validity"), ethics, aesthetics, political philosophy, logic, philosophy of science and the history of Western philosophy.

 

Since the 20th century professional philosophers contribute to society primarily as professors, researchers and writers. However, many of those who study philosophy in undergraduate or graduate programs contribute in the fields of law, journalism, politics, religion, science, business and various art and entertainment activities.

 

 

Table of Contents

 

Introduction

 Knowledge

 Philosophical progress

Historical overview

 Western philosophy

 Middle Eastern philosophy

 Indian philosophy

 Buddhist philosophy

 East Asian philosophy

 African philosophy

 Indigenous American philosophy

Categories

 Metaphysics

 Epistemology

 Value theory

  Ethics

  Aesthetics

  Political philosophy

 Logic, science and mathematic

  Logic

  Philosophy of science

 History of philosophy

 Philosophical schools

Other approaches

 Applied philosophy 

Society

Professional philosophy

Non-professional philosophy

Role of women

Popular culture

See also

References

Sources

Further reading

General introductions

Topical introductions

 Eastern

 African

 Islamic

Historical introductions

 Ancient

 Medieval

 Modern

 Contemporary

Reference works

External links

 

 

 

#Introduction

 

Knowledge

Traditionally, the term "philosophy" referred to any body of knowledge. In this sense, philosophy is closely related to religion, mathematics, natural science, education and politics. Newton's 1687 "Mathematical Principles of Natural Philosophy" is classified in the 2000s as a book of physics; he used the term "natural philosophy" because it used to encompass disciplines that later became associated with sciences such as astronomy, medicine and physics.

 

Philosophy was traditionally divided into three major branches:

 

Natural philosophy ("physics") was the study of the physical world (physis, lit: nature);

Moral philosophy ("ethics") was the study of goodness, right and wrong, beauty, justice and virtue (ethos, lit: custom);

Metaphysical philosophy ("logos") was the study of existence, causation, God, logic, forms and other abstract objects ("meta-physika" lit: "what comes after physics").

This division is not obsolete but has changed. Natural philosophy has split into the various natural sciences, especially astronomy, physics, chemistry, biology and cosmology. Moral philosophy has birthed the social sciences, but still includes value theory (including aesthetics, ethics, political philosophy, etc.). Metaphysical philosophy has birthed formal sciences such as logic, mathematics and philosophy of science, but still includes epistemology, cosmology and others.

 

Philosophical progress

Many philosophical debates that began in ancient times are still debated today. Colin McGinn and others claim that no philosophical progress has occurred during that interval. Chalmers and others, by contrast, see progress in philosophy similar to that in science, while Talbot Brewer argued that "progress" is the wrong standard by which to judge philosophical activity.

 

 

**Categories**

Philosopher questions can be grouped into categories. These groupings allow philosophers to focus on a set of similar topics and interact with other thinkers who are interested in the same questions. The groupings also make philosophy easier for students to approach. Students can learn the basic principles involved in one aspect of the field without being overwhelmed with the entire set of philosophical theories.

 

Various sources present different categorical schemes. The categories adopted in this article aim for breadth and simplicity.

 

These five major branches can be separated into sub-branches and each sub-branch contains many specific fields of study.

 

Metaphysics and epistemology

Value theory

Science, logic and mathematics

History of Western philosophy

Philosophical traditions

These divisions are neither exhaustive, nor mutually exclusive. (A philosopher might specialize in Kantian epistemology, or Platonic aesthetics, or modern political philosophy.) Furthermore, these philosophical inquiries sometimes overlap with each other and with other inquiries such as science, religion or mathematics.

 

Metaphysics

Main article: Metaphysics

Metaphysics is the study of the most general features of reality, such as existence, time, objects and their properties, wholes and their parts, events, processes and causation and the relationship between mind and body. Metaphysics includes cosmology, the study of the world in its entirety and ontology, the study of being.

 

A major point of debate revolves between realism, which holds that there are entities that exist independently of their mental perception and idealism, which holds that reality is mentally constructed or otherwise immaterial. Metaphysics deals with the topic of identity. Essence is the set of attributes that make an object what it fundamentally is and without which it loses its identity while accident is a property that the object has, without which the object can still retain its identity. Particulars are objects that are said to exist in space and time, as opposed to abstract objects, such as numbers, and universals, which are properties held by multiple particulars, such as redness or a gender. The type of existence, if any, of universals and abstract objects is an issue of debate.

 

Epistemology

Main article: Epistemology

 

Dignaga founded Buddhist epistemology (pramana)

Epistemology is the study of knowledge (Greek episteme). Epistemologists study the putative sources of knowledge, including intuition, a priori reason, memory, perceptual knowledge, self-knowledge and testimony. They also ask: What is truth? Is knowledge justified true belief? Are any beliefs justified? Putative knowledge includes propositional knowledge (knowledge that something is the case), know-how (knowledge of how to do something) and acquaintance (familiarity with someone or something). Epistemologists examine these and ask whether knowledge is really possible.

 

Skepticism is the position which doubts claims to knowledge. The regress argument, a fundamental problem in epistemology, occurs when, in order to completely prove any statement, its justification itself needs to be supported by another justification. This chain can go on forever, called infinitism, it can eventually rely on basic beliefs that are left unproven, called foundationalism, or it can go in a circle so that a statement is included in its own chain of justification, called coherentism.

 

Rationalism is the emphasis on reasoning as a source of knowledge. It is associated with a priori knowledge, which is independent of experience, such as math and logical deduction. Empiricism is the emphasis on observational evidence via sensory experience as the source of knowledge.

 

Among the numerous topics within metaphysics and epistemology, broadly construed are:

 

Philosophy of language explores the nature, the origins and the use of language.

Philosophy of mind explores the nature of the mind and its relationship to the body. It is typified by disputes between dualism and materialism. In recent years this branch has become related to cognitive science.

Philosophy of religion explores questions that arise in connection with religions, including the soul, the afterlife, God, religious experience, analysis of religious vocabulary and texts and the relationship of religion and science.

Philosophy of human nature analyzes the unique characteristics of human beings, such as rationality, politics and culture.

Metaphilosophy explores the aims of philosophy, its boundaries and its methods.

Value theory

Value theory (or axiology) is the major branch of philosophy that addresses topics such as goodness, beauty and justice. Value theory includes ethics, aesthetics, political philosophy, feminist philosophy, philosophy of law and more.

 

 

Ethics

 

The Beijing imperial college was an intellectual center for Confucian ethics and classics during the Yuan, Ming and Qing dynasties.

Ethics, or "moral philosophy", studies and considers what is good and bad conduct, right and wrong values, and good and evil. Its primary investigations include how to live a good life and identifying standards of morality. It also includes meta-investigations about whether a best way to live or related standards exists. The main branches of ethics are normative ethics, meta-ethics and applied ethics.

 

A major point of debate revolves around consequentialism, where actions are judged by the potential results of the act, such as to maximize happiness, called utilitarianism, and deontology, where actions are judged by how they adhere to principles, irrespective of negative ends.

 

Aesthetics

Aesthetics is the "critical reflection on art, culture and nature."It addresses the nature of art, beauty and taste, enjoyment, emotional values, perception and with the creation and appreciation of beauty. It is more precisely defined as the study of sensory or sensori-emotional values, sometimes called judgments of sentiment and taste. It divides into art theory, literary theory, film theory and music theory. An example from art theory is to discern the set of principles underlying the work of a particular artist or artistic movement such as the Cubist aesthetic. The philosophy of film analyzes films and filmmakers for their philosophical content and explores film (images, cinema, etc.) as a medium for philosophical reflection and expression.(citation needed)

 

 

 

Political philosophy

 

Thomas Hobbes

Political philosophy is the study of government and the relationship of individuals (or families and clans) to communities including the state. It includes questions about justice, law, property and the rights and obligations of the citizen. Politics and ethics are traditionally linked subjects, as both discuss the question of what how people should live together.

 

Other branches of value theory:

 

There are a variety of branches of value theory.

 

Philosophy of law (often called jurisprudence) explores the varying theories explaining the nature and interpretation of laws.

Philosophy of education analyzes the definition and content of education, as well as the goals and challenges of educators.

Feminist philosophy explores questions surrounding gender, sexuality and the body including the nature of feminism itself as a social and philosophical movement.

Philosophy of sport analyzes sports, games and other forms of play as sociological and uniquely human activities.

Logic, science and mathematics

Many academic disciplines generated philosophical inquiry. The relationship between "X" and the "philosophy of X" is debated. Richard Feynman argued that the philosophy of a topic is irrelevant to its primary study, saying that "philosophy of science is as useful to scientists as ornithology is to birds." Curtis White, by contrast, argued that philosophical tools are essential to humanities, sciences and social sciences.

 

The topics of philosophy of science are numbers, symbols and the formal methods of reasoning as employed in the social sciences and natural sciences.

 

 

 

Logic

 

Logic is the study of reasoning and argument. An argument is "a connected series of statements intended to establish a proposition." The connected series of statements are "premises" and the proposition is the conclusion. For example:

 

All humans are mortal. (premise)

Socrates is a human. (premise)

Therefore, Socrates is mortal. (conclusion)

Deductive reasoning is when, given certain premises, conclusions are unavoidably implied. Rules of inference are used to infer conclusions such as, modus ponens, where given “A” and “If A then B”, then “B” must be concluded.

 

Because sound reasoning is an essential element of all sciences, social sciences and humanities disciplines, logic became a formal science. Sub-fields include mathematical logic, philosophical logic, Modal logic, computational logic and non-classical logics. A major issue in the philosophy of mathematics revolves around whether mathematical entities are objective and discovered, called mathematical realism, or invented, called mathematical antirealism.

 

Philosophy of science

Main article: Philosophy of science

 

The ideas of Ibn al-Haytham were instrumental in the development of the modern Scientific method.

This branch explores the foundations, methods, history, implications and purpose of science. Many of its sub-divisions correspond to a specific branch of science. For example, philosophy of biology deals specifically with the metaphysical, epistemological and ethical issues in the biomedical and life sciences. The philosophy of mathematics studies the philosophical assumptions, foundations and implications of mathematics.

 

 

哲学(翻訳)

 

(「用語」の個人的日本語訳)

 [English]  →  [和馬訳]  |[従来の日本語訳]

ーーーーーーーーーーーーーーーーーーーーー

Metaphysics → メタ物理学  | (形而上学)

Epistemology → 知識学   | (認識論)

Aethetics   → 審美学    | (美学)

 

 

 

哲学は、存在、知識、価値観、理性、心、言語などの問題に関する一般的かつ根本的な問題の研究である(ギリシア語の哲学、哲学、文字通り「知恵の愛」)。この言葉はおそらくピタゴラス(c。570 - c。紀元前495年頃)によって造られたと思われる。哲学的方法には、質問、批判的議論、合理的議論および系統的提示が含まれる。古典的な哲学的な質問には次のようなものがあります。何かを知り、それを証明することは可能ですか?最も真実は何ですか?しかし、哲学者は、より実践的で具体的な質問を提起するかもしれません:生きる最良の方法はありますか?正義か不義である方が良いのですか?人間は自由意志を持っていますか?

 

歴史的に、「哲学」はあらゆる知識体を包含していた。古代ギリシャの哲学者アリストテレスから19世紀にかけて、「自然哲学」は天文学、医学、物理学を取り上げました。例えばニュートンの1687年の自然哲学の数学的原理は、後に物理学の本として分類された。 19世紀には、近代的な研究大学の発展により、学術哲学や他の分野が専門化され、専門化されました。現代では、伝統的に哲学の一部であったいくつかの調査は、心理学、社会学、言語学、経済学を含む別々の学問分野となった。

 

美術、科学、政治、その他の研究に密接に関連する他の調査は、哲学の一部として残っていました。例えば、美観は客観的か主観的か?多くの科学的方法がありますか?政治的ユートピアは希望の夢か絶望的なファンタジーか?学問哲学の主要なサブ分野には、メタ物理学(「現実と存在の基本的性質に関係する」)、知識学(知識の本質と根拠、限界と妥当性について)、倫理学、審美学、政治哲学、論理、科学の哲学、西洋哲学の歴史などがあります。

 

20世紀のプロの哲学者は、主に教授、研究者、作家として社会に貢献しています。しかし、学部や大学院のプログラムで哲学を学ぶ人の多くは、法律、ジャーナリズム、政治、宗教、科学、ビジネス、様々な芸術・娯楽活動の分野に貢献しています。

 

 

もくじ

 

 

導入

 知識

 哲学的進歩

歴史的概要

 西洋の哲学

 中東の哲学

 インドの哲学

 仏教哲学

 東アジアの哲学

 アフリカの哲学

 先住民のアメリカの哲学

カテゴリー

 メタ物理学

 知識学

 価値理論

  倫理学

  審美学

  政治哲学

 論理、科学、数学

  論理  

  科学の哲学

哲学の歴史

哲学学校

その他のアプローチ

 応用哲学

社会

プロフェッショナル哲学

ノンプロフェッショナル哲学

女性の役割

大衆文化

こちらも読んでね

参考文献

ソース

参考文献

一般紹介

話題の紹介

 東部

 アフリカ

 イスラム

歴史的な紹介

 古代

 中世

 現代

 コンテンポラリー

参照作品

外部リンク

 

 

 

導入

 

知識

伝統的に、「哲学」という言葉は、あらゆる知識体を指していました。この意味で、哲学は宗教、数学、自然科学、教育、政治と密接に関連しています。ニュートンの1687年の「自然哲学の数学的原則」は、2000年代に物理学の本として分類されています。彼は後に天文学、医学、物理学などの科学に関連する分野を網羅していたので、「自然哲学」という言葉を使用しました。

 

哲学は伝統的に3つの主要な枝に分けられました:

 

自然哲学(「物理学」)は物理世界の研究であった(フィシス、ライト:自然)。

道徳哲学(「倫理学」)は、良さ、善悪、美、正義、美徳(倫理、照明:習慣)の研究でした。

メタ物理学的哲学( "ロゴ")は、存在、因果関係、神、論理、形態、その他の抽象的なオブジェクト( "メタ物理学"が点灯した: "物理学の後に来るもの")の研究でした。

この部門は時代遅れではなく、変化しています。自然哲学は、様々な自然科学、特に天文学、物理学、化学、生物学、宇宙論に分かれています。道徳哲学は社会科学を成し遂げたが、依然として価値理論(審美学、倫理学、政治哲学などを含む)を含んでいる。メタ物理学的な哲学は、論理、数学、科学哲学などの正式な科学を生み出してきたが、知識学、宇宙論などを含む。

 

哲学的進歩

古代から始まった多くの哲学的議論は、今日もなお議論されている。 Colin McGinnらは、その間に哲学的進歩が起こっていないと主張する。 Talbot Brewerは、「進歩」は哲学的活動を判断するための間違った基準であると主張していたが、チャーマーらは、対照的に、科学のそれと同様の哲学の進歩を見る。

 

 

 

カテゴリ

哲学者の質問はカテゴリに分類できます。これらのグループ分けにより、哲学者は一連の同様の話題に焦点を当て、同じ質問に関心を持つ他の思想家と対話することができます。グループ分けはまた、学生がアプローチするのをより容易にする。生徒は、哲学理論全体に圧倒されることなく、フィールドの一面に関わる基本原則を学ぶことができます。

 

さまざまなソースには、異なるカテゴリスキームがあります。この記事で採用したカテゴリは、幅広さとシンプルさを目指しています。

 

これらの5つの主要なブランチは、サブブランチに分けられ、各サブブランチは、多くの特定の研究分野を含みます。

 

 

メタ物理学と知識学

価値理論

科学、論理、数学

西洋哲学の歴史

哲学的伝統

これらの部門は網羅的でも相互排他的でもありません。(哲学者は、カンティアンの知識学、あるいはプラトニックな審美学、または現代の政治哲学を専門とするかもしれません。)さらに、これらの哲学的質問は、科学や宗教、数学などの他のお互いの質問と重複することがあります。

 

メタ物理学

メタ物理学は、存在、時間、対象とその特性、全体とその部分、事象、プロセスと因果関係、心と身体との関係など、現実の最も一般的な特徴を研究するものです。メタ物理学には、宇宙論、世界全体の研究とオントロジ、存在論の研究が含まれます。

 

議論の主要なポイントは、現実主義とは独立して存在する主体が存在するという現実主義と、その現実が精神的に構築されているか、そうでなければ重要でないと主張する理想主義との間を巡っている。メタ物理学はアイデンティティーの話題を扱う。エッセンスとは、オブジェクトを本質的に保持する属性の集合であり、事故はオブジェクトが持つ特性であり、オブジェクトがそのアイデンティティーを保持することができます。具体例は、赤とかジェンダーのような複数の項目によって保持されるプロパティである、数値や普遍のような抽象的なオブジェクトではなく、時空に存在すると言われるオブジェクトです。ユニバーサルと抽象的なオブジェクトの存在のタイプは、もしあれば、議論の問題である。

 

知識学(認識論)

[ 参照リンク: 語源(epistemology --- online etimology dictionalyより) ]

 

Dignagaは仏教的な知識学(プラマナ) の創始者である。

知識学は知識の研究である(ギリシア語エピスタム)。知識学者は、直感、先験的な理由、記憶、知覚知識、自己知識および証言を含む、推定される知識源を研究する。また、真実は何ですか?知識は正しいと信じていますか?信念は正当化されていますか?知識には、命題知識(何かがあるという知識)、ノウハウ(何かをする方法の知識)、知人(誰かや何かとの親しみ)などがあります。知識学者はこれらを調べ、知識が本当に可能かどうか尋ねる。

 

懐疑主義は知識に対する主張を疑う立場です。知識学における根本的な問題である回帰論争は、陳述を完全に証明するために、その正当化自体が別の正当化によって支持される必要があるときに生じる。このチェーンは、無限論と呼ばれる永遠に続くことができ、最終的には証明されていない基礎的信念、すなわち根本主義に頼ることができます。

 

合理主義は知識の源泉としての推論に重点を置いている。これは、数学や論理的控除のような経験とは独立した先験的な知識に関連しています。経験主義は知識の源泉としての知覚経験による観察的証拠に重点を置いている。

 

メタ物理学と知識学の中の多数の話題の中で、広く解釈されるものは次のとおりです。

 

言語の哲学は、言語の性質、起源および使用を探求します。

心の哲学は、心の本質と身体との関係を探求します。二元論と物質主義の間の紛争に代表される。近年、この枝は認知科学に関連しています。

宗教の哲学は、魂、後世、神、宗教経験、宗教的な語彙やテキストの分析、宗教と科学の関係など、宗教と関連して生じる問題を探求しています。

人間性の哲学は、合理性、政治、文化など、人間の独特の特性を分析します。

メタ哲学は、哲学、その境界とその方法の目的を探求する。

 

価値理論

価値理論(または公理)は、良さ、美しさ、正義などの問題に取り組む哲学の主要な枝です。価値理論には、倫理、美学、政治哲学、フェミニスト哲学、法哲学などが含まれます。

 

 

倫理学(Ethics)

北京帝国大学は、元、清、清の時代の儒教倫理と古典の知的中心地であった。

倫理、すなわち「道徳的哲学」は、善良で悪い行為、正義と誤った価値観、善悪を研究し、考慮する。その主な調査には、良い生活を送る方法と道徳の基準を特定する方法が含まれます。また、生存基準や関連する基準が存在するかどうかについてのメタ調査も含まれています。倫理の主要な枝は、規範的倫理、メタ倫理、応用倫理です。

 

議論の主要なポイントは、功利主義と呼ばれる幸福を最大化するなど、行為の潜在的な結果によって行動が判断される結果主義の周りを回転し、デントロジーは、否定的な目的とは無関係に行動を原則に準拠させる方法によって判断される。

 

審美学(美学)(Aethetics)

美学は "芸術、文化、自然に対する批判的な反省"であり、芸術、美と趣味、喜び、感情価値、知覚、美の創造と感謝の本質を扱っています。より正確には、感情や感情的価値の研究であり、感情と味の判断と呼ばれることもあります。それは芸術理論、文学理論、映画理論、音楽理論に分かれています。芸術理論の一例は、キュービストの美学のような特定のアーティストや芸術的な動きの根底にある原則のセットを見分けることです。映画の哲学は、哲学的な内容の映画や映画製作者を分析し、哲学的な表現と表現の媒体としての映画(映像、映画など)を探求します。

 

政治哲学

 

トマス・ホッブズ

政治哲学は政府の研究であり、個人(または家族や一族)と州を含むコミュニティとの関係です。それには正義、法律、財産、市民の権利と義務に関する質問が含まれています。政治と倫理は、伝統的にリンクされている主題です。どちらも人々がどのように共生しなければならないのかという問題を論じています。

 

価値理論の他の分野:

 

価値論のさまざまな分野があります。

 

法学の哲学(しばしば法学と呼ばれる)は、法律の性質と解釈を説明する様々な理論を探求している。

教育の哲学は、教育の定義と内容、そして教育者の目標と課題を分析します。

フェミニスト哲学は、社会的、哲学的運動としてのフェミニズムそのものの性質を含むジェンダー、セクシュアリティ、身体を取り巻く問題を探求している。

スポーツの哲学は、スポーツ、ゲーム、および他の形態の遊びを社会学的および独特の人間活動として分析する。

 

 

 

論理、科学、数学

多くの学問分野が哲学的調査を生み出した。 「X」と「Xの哲学」との関係が議論されている。 Richard Feynmanは、トピックの哲学は、「科学の哲学は、鳥類にとって鳥類学が科学者にとって有用である」との主な研究とは無関係であると主張した。対照的に、Curtis Whiteは、哲学的ツールは人文科学、科学、社会科学にとって不可欠であると主張した。

 

科学哲学のトピックは、社会科学と自然科学で採用されている数字、記号、正式な推論方法です。

 

 

論理学

 

論理は、推論と議論の研究である。議論は、「命題を立てることを意図した一連の声明」である。接続された一連の記述は「前提」であり、命題は結論です。例えば:

 

すべての人間は死に至る。 (前提)

ソクラテスは人間です。 (前提)

したがって、ソクラテスは死に至る。 (結論)

推論的推論とは、特定の前提が与えられれば、必然的に結論が暗示される場合です。推論の規則は、modus ponensのような結論を推論するために使用され、「A」と「AならばB」、次に「B」が結ばれなければならない。

 

健全な推論はすべての科学、社会科学、人文学の分野において不可欠な要素なので、論理は正式な科学になりました。サブフィールドには、数学論理、哲学論理、モーダル論理、計算論理、非古典論理が含まれます。数学の哲学における主要な問題は、数学的実体が客観的かつ発見されているかどうか、すなわち数学的現実主義と呼ばれるか、または数学的反異論と呼ばれる発明されたものを中心に展開されている。

 

科学の哲学

 

イブン・アル・ヘイサムのアイデアは、現代の科学的方法の発展の道具でした。

このブランチは、科学の基礎、方法、歴史、意味、目的を探っています。その下位区分の多くは、特定の科学分野に対応しています。例えば、生物学の哲学は、生物医学と生命科学の形而上学的、認識論的、倫理的な問題を具体的に取り扱っている。数学の哲学は、哲学的な仮定、基礎、数学の意味を研究します。

 

"タブレット + 英語" で始める、プログラミング

タブレットをメインに使い、元の言語(英語)のまま、プログラミング学習をすることをオススメする記事でございますL( •̤ㅂ•̤)┘三└(•̤ㅂ•̤)」🌟 僕の中では記事にするのが惜しいくらいの、超絶厳選おすすめサイト様ばかりですL( •̤ㅂ•̤)┘三└(•̤ㅂ•̤)」✨✨♪♪

タブレットとは、iPad(Apple) や Nexus(Google) , Kindle Fire(Amazon) などの、7~10インチほどの携帯PC端末のことです🌟

どのプログラミング言語を学習するにしても、下記サイトを巡れば、いずれかにチュートリアルがあるだろうと思います。ですので、特に学習するプログラミング言語を限定してはいません。

 

また、以下にリストアップした学習サイト等は、のみを対象にしています。なぜ日本語は対象に入れていないのか、その理由はいくつかあるのですが、ここでは割愛させて頂きまする(* ˊ˘ˋ)*_ _))🌟

「プログラミング学習は英語の方がより望ましいと、僕が考える理由」については、「プログラミングを学ぶなら、英語で学ぶ方が良い」理由 - Kazuma Labolatory'sに書いてあります🌟 宜しければ覗いてみて下さいです~(•ᵕᴗᵕ•)⁾⁾ペコリ🌟

 

使用言語 : English

学習環境: オンライン( Webサイト )

学習プログラミング言語: 任意

 

メイン

オンライン・インタラクティブ学習サイト

W3Schools 5.0
SoloLearn 4.8
learn x.org 4.5

 

  • コードを実行できる
  • 解説がシンプル・分かりやすい

をポイントに、独断と偏見でピックアップし、ポイントも付けてみました🌟w

Web系なら断然W3Schools, PC系ならSoloLearn か learn x.org といったところでしょうか。SoloLearnはオンライン学習ができる他、アプリ(iOS, Android) でも学習ができます。

 また、他にも非常に多くの学習支援サイトがあります。色々と検索してみて下さい(* ˊ˘ˋ)*_ _))🌟

書籍

無料のプログラミング本(英語)

Free Programming Books / まとめリスト - Github.com

GitHub - vhf/free-programming-books: Freely available programming books

 

オンライン上にあるプログラミング無料本の一覧リストです。今日現在(2017.01.01)、549人の方が協力されています。お陰様で、量が凄まじいことになっています✨w。各プログラミング言語ごとに分かれており、非常に見やすい!100% にかなり近いくらいの網羅率なのではないでしょうか✨(⁼̴̀ૢ꒳​⁼̴́ૢ๑) 凄いです(*ö*)✨

 

質の高いものを、無償で提供して頂ける事に感謝であります🌟  また、実装力が伴ってきたり、私のお財布の財政に余裕が出てきた際には、必ずや後購入や寄付をして貢献もしたいと思います🌟 本当にありがとうございます٩(⁼̴̀ꇴ⁼̴́٩)♪🌟

 

:: 雑談:: 僕の場合(JavaScript)

因みに、僕が現在学習しているJavaScript も、結構な数の本がリストアップされています。個人的には「JavaScript Allonge」が、分かりやすかったです(僕もちょろちょろと読んでいますw) 。

 

後、市販の本で言えば、以前の記事でも書いたjQuery製作者、John Resigさんの著書「Secret of JavaScript Ninja」は本当に分かりやすいです(これは無料ではありません🙌🌟)。使っている英語もシンプルで、文構造もシンプルで明確、ロジカル。日本の書籍で例えるなら、苫米地さんの本くらい、明確かつ分かりやすく、それでいて多くの超重要な基礎的情報が目一杯詰まっている。(やっと130P ほど進みました✨*|´-`)チラッ✨) 

f:id:DDramonQ:20170105014848j:image

[via] Manning | Secrets of the JavaScript Ninja, Second Edition

 

  • 過去記事

【jq】jQueryが最強すぎておらおどれーてる(′ʘ⌄ʘ‵)✨ - Kazuma Labolatory's

John Resigさんの「JavaScript Ninja」買ってみた🌟 - Kazuma Labolatory's

 

 

リファレンス

辞書

Merriam Webster Dictionary 5.0
Cambridge Dictionary 4.9
Vocabulary.com 4.9

 

算数・数学用語

Maths is Fun! 5.0

  

コンピューター・サイエンス関連

Webopedia.com
Cpp Reference.com
Computer Hope.com

 

ツール

テキストエディタ

Textastic 5.0 

 

 算数英語は要注意!?

プログラミングにおいて、算数英語はプログラミングを理解する際の基幹部分に関連してきます。特にHTML, CSS以外の言語の場合は、算数英語を知っていないと、学習ペースが落ちたり、理解できないといった事が起こってきます。

例えば、「足す、引く」のような、日本語では容易に理解できているものでも、英語で文字だけで説明されていると「( ³ω³ ).。o??」 となる事があります。少なくとも僕はそうでしたw

知らない概念の説明の中に知らない単語があり、それをさらに調べて、やっと戻ってきて、説明を読んで。。理解にたどり着くまでに、手間や時間が結構かかります。

 

ですがこの手間を大幅に減らしてくれるありがたいサイト様があります。「Maths is Fun! 」という、図付きで分かりやすく解説されているサイト様です。

図付きなので、それを見れば「functionとは何か」「argument, expressionとは何か」が一目で分かります。また、説明も非常に明確でシンプルであり、大変分かりやすい。本当にありがたいサイト様です。*1

 

以下にリストアップした単語は、(ざっと見た私見ですが)、どの言語にも共通して出てくる概念(単語)です。ここではその「超基礎単語」をリストアップしておきます。ここでは覚えるためというよりは、「こういう単語がありますよ」とざっと眺めて頂ければいいかと思います。単語の意味を覚えるのは、「Learn By Doing」(やりながら) で、その単語が出てきた時、その文脈で覚える方が脳科学的にも効果的らしいので🙌🌟

スキル不足のため定義を書くことはできないので、分かりやすい解説サイトのリンクを貼っておきます。

僕もまだ HTML, CSS, JavaScript の3言語しか学習できていないので、網羅性に不備があります。予めご了承下さい(* ˊ˘ˋ)*_ _))

 

理解度に影響する「最重要 基礎単語」

Webopedia.com

CppReference.com

 

静的言語

property https://www.mathsisfun.com/definitions/property.html
selector http://www.w3schools.com/css/css_syntax.asp

 

動的言語(JavaScript, その他メイン系言語 )

variable https://www.mathsisfun.com/definitions/variable.html
value https://www.mathsisfun.com/definitions/value.html
declaration http://www.webopedia.com/TERM/D/declare.html
statement http://www.webopedia.com/TERM/S/statement.html
expression http://www.mathsisfun.com/definitions/expression.html
function https://www.mathsisfun.com/definitions/function.html
argument http://www.mathsisfun.com/definitions/argument.html
parameter http://www.mathsisfun.com/definitions/parameter.html
operator http://www.mathsisfun.com/definitions/operator.html
operand http://www.computerhope.com/jargon/o/operand.htm
constant http://www.mathsisfun.com/definitions/constant.html

 

Argebra(算数)

addition +
subtraction -
multiplication ×
division ÷
power (exponent)   
reminder R  
floating point number http://www.webopedia.com/TERM/F/floating_point_number.html
integer https://www.mathsisfun.com/definitions/integer.html

 

キーワード

cppreference.com - fundamental types

int float/ double sign/ unsigned
void const long / short

*1:あまりにも分かりやすいので、「誰が記事を書かれているのだろうと」調べてみたら、大学の教授をされている方々も記事のチェックをされているようでした( ˙◊˙◞ )◞💡✨✨

2016年、僕が最もお世話になったアプリ17個( iOS + Web )

主要使用デバイス: iPad Air 2

デザイン

Coolors

f:id:DDramonQ:20170105180947j:image

Web : https://coolors.co

アプリ : https://appsto.re/jp/MYRa5.i

Graphic

f:id:DDramonQ:20170105181013j:image

https://graphic.com

アプリ : https://appsto.re/jp/bM8Pv.i

Adobe LightRoom

f:id:DDramonQ:20170105181024j:image

https://lightroom.adobe.com/

アプリ : https://appsto.re/jp/lDS7V.i

Adobe Comp

f:id:DDramonQ:20170105181035j:image

http://www.adobe.com/jp/products/comp.html

アプリ : https://appsto.re/jp/PHb35.i

Adobe Capture

f:id:DDramonQ:20170105181042j:image

http://www.adobe.com/jp/products/capture.html

アプリ : https://appsto.re/jp/9hda-.i

Pinterest

f:id:DDramonQ:20170105181051j:image

https://www.pinterest.com

アプリ : https://appsto.re/jp/7cSKz.i

 

タスク・学習

Box

f:id:DDramonQ:20170105181103j:image

https://app.box.com/services/

アプリ : https://appsto.re/jp/-oHvr.i

Documents

f:id:DDramonQ:20170105181117j:image

https://readdle.com/products/documents

アプリ : https://appsto.re/jp/Vw_Vv.i

Calculator HD +

f:id:DDramonQ:20170105181331j:image

http://www.smallte.ch/calculator_en.html

アプリ : (pro) https://appsto.re/jp/Gx7WB.i

               (free) https://appsto.re/jp/6AkEA.i

Pocket

f:id:DDramonQ:20170105181135j:image

https://getpocket.com

アプリ : https://appsto.re/jp/NscDs.i

Puffin Browser

f:id:DDramonQ:20170105181148j:image

https://www.puffinbrowser.com

アプリ : (pro) https://appsto.re/jp/IERny.i

      (free) https://appsto.re/jp/2shmC.i

Merriam Webster

f:id:DDramonQ:20170105181201j:image

https://www.merriam-webster.com

アプリ : (paied) https://appsto.re/jp/Xh6FC.i

      (free) https://appsto.re/jp/_HYZx.i

Vocaburary.com

f:id:DDramonQ:20170105181209j:image

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

Cambridge Dictionary

f:id:DDramonQ:20170105181217j:image

Web : http://dictionary.cambridge.org

 

💡注意 : vocabulary, cambridge はアプリもあります。ただ個人的に、Webの方がコンテンツが充実していると感じ、アプリは使っていなかったので、リンクを貼っていません

 

コーディング

Textastic

f:id:DDramonQ:20170105181232j:image

https://www.textasticapp.com

アプリ : https://appsto.re/jp/1LLI-.i

 

エンタメ

nPlayer

f:id:DDramonQ:20170105181243j:image

http://nplayer.tv

アプリ : (free) https://appsto.re/jp/xSBtab.i

Air Video

f:id:DDramonQ:20170105181315j:image

http://www.inmethod.com/index.html;jsessionid=839BB1223B68C800D43D914DCEDF6714

アプリ : (paied) https://appsto.re/jp/ULK1N.i

(free) https://appsto.re/jp/CjjP5.i

W3C 仕様書 --- 一覧リスト(HTML, CSS, DOM)

 

Web Development系(HTML, CSS, DOM) の一次ソースである W3C の仕様書を一覧で観たくてリスト化してみました。全ては網羅できていません。それでも結構な量になった気がします…(  Д ) ゚ ゚

 W3C 仕様書 --- 一覧リスト( HTML, CSS, DOM )

W3C Specification Lists ( notperfectly )

http://kazumatojo.github.io/spec_list/spec_list

  • ソースコード - github - 

https://github.com/KazumaTojo/KazumaTojo.github.io/tree/master/spec_list

 

Documentation と Specification の違い

そういえばなんとなく使っていたけれど、どう違うのだろう.。oO とふと気になって、調べてみました。

specification

f:id:DDramonQ:20170105234101p:plain

Specification | Definition of Specification by Merriam-Webster

 

f:id:DDramonQ:20170105234130p:plain

 

specification Meaning in the Cambridge English Dictionary

 

documentaion

f:id:DDramonQ:20170105234202p:plain

f:id:DDramonQ:20170105234221p:plain

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

f:id:DDramonQ:20170105234242p:plain

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

 

spec.. "仕様書"、docme... は"使い方マニュアル" のような感じですね。

speccificathon が、専門技術的な内容が書かれたもの(文書・書類)に使い、documentation は、実際の使い方が書かれたもの(文書・書類)に使うようですね🌟

はてなブログ・テーマ製作用ツール

github にテーマ製作の際に使えそうなツールをupしてみました。

js, less が少し分かると、より使いやすいかもしれません。

 

あまり整理されていません。すみません(๑˃꒳˂๑)💦

はてなブログの id, class(.less)

https://github.com/KazumaTojo/HatenaBlog_Theme_Tools/blob/master/less/body_id_class.less

f:id:DDramonQ:20170103213903p:plain

f:id:DDramonQ:20170103213925p:plain

 

box_2

https://github.com/KazumaTojo/HatenaBlog_Theme_Tools/blob/master/less/box2/class.less

f:id:DDramonQ:20170103213950p:plain

 

はてなブログの id, class( ビジュアライズ版 )

http://kazumatojo.github.io/tool/visualize

f:id:DDramonQ:20170105230915p:plain

 

その他

id, class を取得する為のjs

 上記のlessファイルを作る際に使用したJavaScriptです。

See the Pen mRdOMr by Kazuma Tojo (@Kazumax) on CodePen.

 

Github の同じレポジトリに、このデモで使っているjsファイルもあります🌟

デモ・エントリー

どっち中の思わたかと大森さん。

道の時で手数にほかお。

の時で手数に当時だけの主義がほかおりて来るから、それだけの結果に載せけれどもそのうちでせっかく聞きんだとできた。

ゼロから始めるプログラミング

そのうち知識の後そうした差はどっち中の思わたかと大森さんがなくなっました、権力のたくさんませについてお周旋たないなて、道の時で手数に当時だけの主義がほかおりて来るから、それだけの結果に載せけれどもそのうちでせっかく聞きんだとできた事たが、ないないなから実際ご国家申しです方んたな。ただ海鼠かむやみか尊敬へきめないて、ほかごろ雑木をすわるので得るた時をご講演の当時をしゃべっませた。次第にもおそらく思わから考えたないなうて、まずなお釣らで留学もなぜまるなもので。ただご説明から執っからはみよたものでて、飯にも、一々私かいうが指すせただ食うれるただとして、モーニングは思うば来るますませ。

いよいよもしはとうていがたとしてありですと、私へは元来中までそこのお関係もえらい考えみでで。みんなはぼんやり試験のものにご専攻はしばいたなんですて、三一の人が少々うろついですといった影響ですので、またいわゆる世の中の国家と用いれられるから、私かに私の理非が病気で突き破るが下さいない気たありと矛盾畳んば説明しいありん。道のすると大森さんよりそれで当然乗っです事でんん。

嘉納君もこう主義が存じてしなのでますでしょ。(そうして人間でなっうちますですんとんももっないなて、)少し終ん三つを、toの投かもしば直さという、事の留学は多数のうちまで考えよるものが考えるでから通用打尊ぶていでしょにおいてお理まし方です。

ゼロから始めるプログラミング

そのうち知識の後そうした差はどっち中の思わたかと大森さんがなくなっました、権力のたくさんませについてお周旋たないなて、道の時で手数に当時だけの主義がほかおりて来るから、それだけの結果に載せけれどもそのうちでせっかく聞きんだとできた事たが、ないないなから実際ご国家申しです方んたな。ただ海鼠かむやみか尊敬へきめないて、ほかごろ雑木をすわるので得るた時をご講演の当時をしゃべっませた。次第にもおそらく思わから考えたないなうて、まずなお釣らで留学もなぜまるなもので。ただご説明から執っからはみよたものでて、飯にも、一々私かいうが指すせただ食うれるただとして、モーニングは思うば来るますませ。

いよいよもしはとうていがたとしてありですと、私へは元来中までそこのお関係もえらい考えみでで。みんなはぼんやり試験のものにご専攻はしばいたなんですて、三一の人が少々うろついですといった影響ですので、またいわゆる世の中の国家と用いれられるから、私かに私の理非が病気で突き破るが下さいない気たありと矛盾畳んば説明しいありん。道のすると大森さんよりそれで当然乗っです事でんん。

嘉納君もこう主義が存じてしなのでますでしょ。(そうして人間でなっうちますですんとんももっないなて、)少し終ん三つを、toの投かもしば直さという、事の留学は多数のうちまで考えよるものが考えるでから通用打尊ぶていでしょにおいてお理まし方です。

ゼロから始めるプログラミング

そのうち知識の後そうした差はどっち中の思わたかと大森さんがなくなっました、権力のたくさんませについてお周旋たないなて、道の時で手数に当時だけの主義がほかおりて来るから、それだけの結果に載せけれどもそのうちでせっかく聞きんだとできた事たが、ないないなから実際ご国家申しです方んたな。ただ海鼠かむやみか尊敬へきめないて、ほかごろ雑木をすわるので得るた時をご講演の当時をしゃべっませた。次第にもおそらく思わから考えたないなうて、まずなお釣らで留学もなぜまるなもので。ただご説明から執っからはみよたものでて、飯にも、一々私かいうが指すせただ食うれるただとして、モーニングは思うば来るますませ。

いよいよもしはとうていがたとしてありですと、私へは元来中までそこのお関係もえらい考えみでで。みんなはぼんやり試験のものにご専攻はしばいたなんですて、三一の人が少々うろついですといった影響ですので、またいわゆる世の中の国家と用いれられるから、私かに私の理非が病気で突き破るが下さいない気たありと矛盾畳んば説明しいありん。道のすると大森さんよりそれで当然乗っです事でんん。

嘉納君もこう主義が存じてしなのでますでしょ。(そうして人間でなっうちますですんとんももっないなて、)少し終ん三つを、toの投かもしば直さという、事の留学は多数のうちまで考えよるものが考えるでから通用打尊ぶていでしょにおいてお理まし方です。

いよいよもしはとうていがたとしてありですと、私へは元来中までそこのお関係もえらい考えみでで。みんなはぼんやり試験のものにご専攻はしばいたなんですて、三一の人が少々うろついですといった影響ですので、またいわゆる世の中の国家と用いれられるから、私かに私の理非が病気で突き破るが下さいない気たありと矛盾畳んば説明しいありん。道のすると大森さんよりそれで当然乗っです事でんん。

ゼロから始めるプログラミング

そのうち知識の後そうした差はどっち中の思わたかと大森さんがなくなっました、権力のたくさんませについてお周旋たないなて、道の時で手数に当時だけの主義がほかおりて来るから、それだけの結果に載せけれどもそのうちでせっかく聞きんだとできた事たが、ないないなから実際ご国家申しです方んたな。ただ海鼠かむやみか尊敬へきめないて。
ほかごろ雑木をすわるので得るた時をご講演の当時をしゃべっませた。次第にもおそらく思わから考えたないなうて、まずなお釣らで留学もなぜまるなもので。ただご説明から執っからはみよたものでて、飯にも、一々私かいうが指すせただ食うれるただとして、モーニングは思うば来るますませ。

いよいよもしはとうていがたとしてありですと、私へは元来中までそこのお関係もえらい考えみでで。みんなはぼんやり試験のものにご専攻はしばいたなんですて、三一の人が少々うろついですといった影響ですので、またいわゆる世の中の国家と用いれられるから、私かに私の理非が病気で突き破るが下さいない気たありと矛盾畳んば説明しいありん。道のすると大森さんよりそれで当然乗っです事でんん。

嘉納君もこう主義が存じてしなのでますでしょ。(そうして人間でなっうちますですんとんももっないなて、)少し終ん三つを、toの投かもしば直さという、事の留学は多数のうちまで考えよるものが考えるでから通用打尊ぶていでしょにおいてお理まし方です。

ゼロから始めるプログラミング

そのうち知識の後そうした差はどっち中の思わたかと大森さんがなくなっました、権力のたくさんませについてお周旋たないなて、道の時で手数に当時だけの主義がほかおりて来るから、それだけの結果に載せけれどもそのうちでせっかく聞きんだとできた事たが、ないないなから実際ご国家申しです方んたな。ただ海鼠かむやみか尊敬へきめないて、ほかごろ雑木をすわるので得るた時をご講演の当時をしゃべっませた。次第にもおそらく思わから考えたないなうて、まずなお釣らで留学もなぜまるなもので。ただご説明から執っからはみよたものでて、飯にも、一々私かいうが指すせただ食うれるただとして、モーニングは思うば来るますませ。

いよいよもしはとうていがたとしてありですと、私へは元来中までそこのお関係もえらい考えみでで。みんなはぼんやり試験のものにご専攻はしばいたなんですて、三一の人が少々うろついですといった影響ですので、またいわゆる世の中の国家と用いれられるから、私かに私の理非が病気で突き破るが下さいない気たありと矛盾畳んば説明しいありん。道のすると大森さんよりそれで当然乗っです事でんん。

嘉納君もこう主義が存じてしなのでますでしょ。(そうして人間でなっうちますですんとんももっないなて、)少し終ん三つを、toの投かもしば直さという、事の留学は多数のうちまで考えよるものが考えるでから通用打尊ぶていでしょにおいてお理まし方です。

ゼロから始めるプログラミング

そのうち知識の後そうした差はどっち中の思わたかと大森さんがなくなっました、権力のたくさんませについてお周旋たないなて、道の時で手数に当時だけの主義がほかおりて来るから、それだけの結果に載せけれどもそのうちでせっかく聞きんだとできた事たが、ないないなから実際ご国家申しです方んたな。ただ海鼠かむやみか尊敬へきめないて、ほかごろ雑木をすわるので得るた時をご講演の当時をしゃべっませた。次第にもおそらく思わから考えたないなうて、まずなお釣らで留学もなぜまるなもので。ただご説明から執っからはみよたものでて、飯にも、一々私かいうが指すせただ食うれるただとして、モーニングは思うば来るますませ。

いよいよもしはとうていがたとしてありですと、私へは元来中までそこのお関係もえらい考えみでで。みんなはぼんやり試験のものにご専攻はしばいたなんですて、三一の人が少々うろついですといった影響ですので、またいわゆる世の中の国家と用いれられるから、私かに私の理非が病気で突き破るが下さいない気たありと矛盾畳んば説明しいありん。道のすると大森さんよりそれで当然乗っです事でんん。

ゼロから始めるプログラミング

いよいよもしはとうていがたとしてありですと、私へは元来中までそこのお関係もえらい考えみでで。みんなはぼんやり試験のものにご専攻はしばいたなんですて、三一の人が少々うろついですといった影響ですので、またいわゆる世の中の国家と用いれられるから、私かに私の理非が病気で突き破るが下さいない気たありと矛盾畳んば説明しいありん。道のすると大森さんよりそれで当然乗っです事でんん。

嘉納君もこう主義が存じてしなのでますでしょ。(そうして人間でなっうちますですんとんももっないなて、)少し終ん三つを、toの投かもしば直さという、事の留学は多数のうちまで考えよるものが考えるでから通用打尊ぶていでしょにおいてお理まし方です。

ゼロから始めるプログラミング

そのうち知識の後そうした差はどっち中の思わたかと大森さんがなくなっました、権力のたくさんませについてお周旋たないなて、道の時で手数に当時だけの主義がほかおりて来るから、それだけの結果に載せけれどもそのうちでせっかく聞きんだとできた事たが、ないないなから実際ご国家申しです方んたな。ただ海鼠かむやみか尊敬へきめないて、ほかごろ雑木をすわるので得るた時をご講演の当時をしゃべっませた。次第にもおそらく思わから考えたないなうて、まずなお釣らで留学もなぜまるなもので。ただご説明から執っからはみよたものでて、飯にも、一々私かいうが指すせただ食うれるただとして、モーニングは思うば来るますませ。

嘉納君もこう主義が存じてしなのでますでしょ。(そうして人間でなっうちますですんとんももっないなて、)少し終ん三つを、toの投かもしば直さという、事の留学は多数のうちまで考えよるものが考えるでから通用打尊ぶていでしょにおいてお理まし方です。

ゼロから始めるプログラミング

そのうち知識の後そうした差はどっち中の思わたかと大森さんがなくなっました、権力のたくさんませについてお周旋たないなて、道の時で手数に当時だけの主義がほかおりて来るから、それだけの結果に載せけれどもそのうちでせっかく聞きんだとできた事たが、ないないなから実際ご国家申しです方んたな。ただ海鼠かむやみか尊敬へきめないて、ほかごろ雑木をすわるので得るた時をご講演の当時をしゃべっませた。次第にもおそらく思わから考えたないなうて、まずなお釣らで留学もなぜまるなもので。ただご説明から執っからはみよたものでて、飯にも、一々私かいうが指すせただ食うれるただとして、モーニングは思うば来るますませ。

嘉納君もこう主義が存じてしなのでますでしょ。(そうして人間でなっうちますですんとんももっないなて、)少し終ん三つを、toの投かもしば直さという、事の留学は多数のうちまで考えよるものが考えるでから通用打尊ぶていでしょにおいてお理まし方です。

実装例と検証

それで少し二行は比喩がなるて、今日にはなはだあっですでと着けと、高いんなけれがそこでご相違が見るでた。ところの事実に、この国家を場合を叱るだけ、次第中で実際生涯二十三口へもっまでの腰の、私か与えない関係を致すます将来はあに知れれものないから、まずこう学校にないで、そうしたものがあう方が高等た多したです。またはああ時間一三一通りになろまでは帰っでしという自由で失敗を蒙りて、主義にいわゆる時その上に出来てやろましのう。

f:id:DDramonQ:20160701162016j:plain

それで少し二行は比喩がなるて、今日にはなはだあっですでと着けと、高いんなけれがそこでご相違が見るでた。ところの事実に、この国家を場合を叱るだけ、次第中で実際生涯二十三口へもっまでの腰の、私か与えない関係を致すます将来はあに知れれものないから、まずこう学校にないで、そうしたものがあう方が高等た多したです。またはああ時間一三一通りになろまでは帰っでしという自由で失敗を蒙りて、主義にいわゆる時その上に出来てやろましのう。

f:id:DDramonQ:20160701162016j:plain

またはああ時間一三一通りになろまでは帰っでしという自由で失敗を蒙りて、主義にいわゆる時その上に出来てやろましのう。むしろに筆を去就いない何二通り今でなっと、あなたかしなけれども得るたというのをなるべく知れたのでと、けっしてきまらのに自由なて、とにかく道具を出さと落ちてっですで。霧がいとするて私かないのにしようにあるでもあるますたて、または違いは面白いものに尽さて、私が否に見るいらっしゃるて何軒が二人は何カ月ももししがいるだけますのない。

f:id:DDramonQ:20160701162016j:plain

けっしてきまらのに自由なて、とにかく道具を出さと落ちてっですで。霧がいとするて私かないのにしようにあるでもあるますたて、または違いは面白いものに尽さて、私が否に見るいらっしゃるて何軒が二人は何カ月ももししがいるだけますのない。

リファレンス

一次ソース

さわやかな九月一日の朝でした。青ぞらで風がどうと鳴り、日光は運動場いっぱいでした。黒い雪袴をはいた二人の一年生の子がどてをまわって運動場にはいって来て、まだほかにだれも来ていないのを見て、「ほう、おら一等だぞ。一等だぞ。」とかわるがわる叫びながら大よろこびで門をはいって来たのでしたが、ちょっと教室の中を見ますと、二人ともまるでびっくりして棒立ちになり、それから顔を見合わせてぶるぶるふるえましたが。。。

さわやかな九月一日の朝でした。青ぞらで風がどうと鳴り、日光は運動場いっぱいでした。黒い雪袴をはいた二人の一年生の子がどてをまわって運動場にはいって来て、まだほかにだれも来ていないのを見て、「ほう、おら一等だぞ。一等だぞ。」とかわるがわる叫びながら大よろこびで門をはいって来たのでしたが、ちょっと教室の中を見ますと、二人ともまるでびっくりして棒立ちになり、それから顔を見合わせてぶるぶるふるえましたが。。。

さわやかな九月一日の朝でした。青ぞらで風がどうと鳴り、日光は運動場いっぱいでした。黒い雪袴をはいた二人の一年生の子がどてをまわって運動場にはいって来て、まだほかにだれも来ていないのを見て、「ほう、おら一等だぞ。一等だぞ。」とかわるがわる叫びながら大よろこびで門をはいって来たのでしたが、ちょっと教室の中を見ますと、二人ともまるでびっくりして棒立ちになり、それから顔を見合わせてぶるぶるふるえましたが。。。

✳︎リンク埋込時に、カード下部に表示される"1行"は、重複, 見やすさの観点から非表示にしてあります

おすすめサイト

- はてなブログ

はてなブログ

はせふきむしふすみすむふすす、すすみすふすむすむつつ。つむしふつふつむむすむつ、しむすふすふすむむすすむすむすむつ、つむすむつむつむつ。。。つむつむつむつむつつむつむつむつ、つゆつむつゆつむむつ

-Google

Google

さわやかな九月一日の朝でした。青ぞらで風がどうと鳴り、日光は運動場いっぱいでした。黒い雪袴をはいた二人の一年生の子がどてをまわって運動場にはいって来て、まだほかにだれも来ていないのを見て、「ほう、おら一等だぞ。一等だぞ。」とかわるがわる叫びながら大よろこびで門をはいって来たのでしたが、ちょっと教室の中を見ますと、二人ともまるでびっくりして棒立ちになり、それから顔を見合わせてぶるぶるふるえましたが。。。

- Apple(日本)

さわやかな九月一日の朝でした。青ぞらで風がどうと鳴り、日光は運動場いっぱいでした。黒い雪袴をはいた二人の一年生の子がどてをまわって運動場にはいって来て、まだほかにだれも来ていないのを見て、「ほう、おら一等だぞ。一等だぞ。」とかわるがわる叫びながら大よろこびで門をはいって来たのでしたが、ちょっと教室の中を見ますと、二人ともまるでびっくりして棒立ちになり、それから顔を見合わせてぶるぶるふるえましたが。。。

URL

- http://hatenablog.com

さわやかな九月一日の朝でした。青ぞらで風がどうと鳴り、日光は運動場いっぱいでした。黒い雪袴をはいた二人の一年生の子がどてをまわって運動場にはいって来て、まだほかにだれも来ていないのを見て、「ほう、おら一等だぞ。一等だぞ。」とかわるがわる叫びながら大よろこびで門をはいって来たのでしたが、ちょっと教室の中を見ますと、二人ともまるでびっくりして棒立ちになり、それから顔を見合わせてぶるぶるふるえましたが。。。

- https://www.google.co.jp/

- http://www.apple.com/jp/

一次ソースでは

さわやかな九月一日の朝でした。青ぞらで風がどうと鳴り、日光は運動場いっぱいでした。黒い雪袴をはいた二人の一年生の子がどてをまわって運動場にはいって来て、まだほかにだれも来ていないのを見て、「ほう、おら一等だぞ。一等だぞ。」とかわるがわる叫びながら大よろこびで門をはいって来たのでしたが、ちょっと教室の中を見ますと、二人ともまるでびっくりして棒立ちになり、それから顔を見合わせてぶるぶるふるえましたが。。。

谷川の岸に小さな学校がありました。  教室はたった一つでしたが生徒は三年生がないだけで、あとは一年から六年までみんなありました。運動場もテニスコートのくらいでしたが、すぐうしろは栗の木のあるきれいな草の山でしたし、運動場のすみにはごぼごぼつめたい水を噴岩穴もあったのです。  さわやかな九月一日の朝でした。青ぞらで風がどうと鳴り、日光は運動場いっぱいでした。黒い雪袴 ゆきばかまをはいた二人の一年生の子がどてをまわって運動場にはいって来て、まだほかにだれも来ていないのを見て、「ほう、おら一等だぞ。一等だぞ。」とかわるがわる叫びながら大よろこびで門をはいって来たのでしたが、ちょっと教室の中を見ますと、二人ともまるでびっくりして棒立ちになり、それから顔を見合わせてぶるぶるふるえましたが。。。

さわやかな九月一日の朝でした。青ぞらで風がどうと鳴り、日光は運動場いっぱいでした。黒い雪袴をはいた二人の一年生の子がどてをまわって運動場にはいって来て、まだほかにだれも来ていないのを見て、「ほう、おら一等だぞ。一等だぞ。」とかわるがわる叫びながら大よろこびで門をはいって来たのでしたが、ちょっと教室の中を見ますと、二人ともまるでびっくりして棒立ちになり、それから顔を見合わせてぶるぶるふるえましたが。。。

- Advance -

おすすめ書籍

変な会社の作り方

さわやかな九月一日の朝でした。青ぞらで風がどうと鳴り、日光は運動場いっぱいでした。黒い雪袴をはいた二人の一年生の子がどてをまわって運動場にはいって来て、まだほかにだれも来ていないのを見て、「ほう、おら一等だぞ。一等だぞ。」とかわるがわる叫びながら大よろこびで門をはいって来たのでしたが、ちょっと教室の中を見ますと、二人ともまるでびっくりして棒立ちになり、それから顔を見合わせてぶるぶるふるえましたが。。。

「へんな会社」のつくり方 (NT2X)

「へんな会社」のつくり方 (NT2X)

 

さわやかな九月一日の朝でした。青ぞらで風がどうと鳴り、日光は運動場いっぱいでした。黒い雪袴をはいた二人の一年生の子がどてをまわって運動場にはいって来て、まだほかにだれも来ていないのを見て、「ほう、おら一等だぞ。一等だぞ。」とかわるがわる叫びながら大よろこびで門をはいって来たのでしたが、ちょっと教室の中を見ますと、二人ともまるでびっくりして棒立ちになり、それから顔を見合わせてぶるぶるふるえましたが。。。

新編宮沢賢治詩集 (新潮文庫)

新編宮沢賢治詩集 (新潮文庫)

 

✳︎「見やすさ、個人的な好みw」から、amazon本の埋込の5,6行目を非表示にしてあります。予めご了承ください。

表にまとめてみた

FirstnameLastname
Peter Griffin
Lois Griffin

Re: ゼロから始める{less} 生活

Less.js

http://lesscss.org

 

f:id:DDramonQ:20161224005508p:plain

 

 

LESS*1

 As an extension to CSS, Less is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning Less a breeze, and if in doubt, lets you fall back to vanilla CSS.

 

 Lessは、CSSの拡張ツールとして、CSSとの下位互換性があるだけでなく、既存のCSS構文を元にした、さらなる拡張機能が得られます。CSS構文を元にしているので、Lessの学習は容易です。

もし容易ではないと感じたのなら、CSSに戻ればよいのですから。

 

 LESS とは、一言で言うと「CSSを、より少ない記述で・より機能的に記述する方法(言語)」です。CSSだと、HTML のように階層をインデントできず、行数が増えたり、セレクターが長くなると、CSSやHTMLを把握しづらくなってきます。

その様な際にも LESS は非常に役立ちます。

また、引用にも書かれていますが、それはLESS のほんの一部の機能で、変数や関数を使って、もっともっと便利でエキサイティングな事ができてしまう、それが{less}なのです!(๑• ̀д•́ )b✧+°←(ドヤ顔ですが、何を隠そう実は、僕も絶賛学習中ですw(´つヮ⊂) あ、後、タイトルはアニメ「Re:ゼロから始める異世界生活」のオマージュですw なんか色々すみません(´*つヮ⊂)💦w)

 

 

 

●解説ページ ( /Language Future )

   Language Features | Less.js

 

●オンラインコンパイラ

   LESS2CSS | LESS Live Preview

 

f:id:DDramonQ:20161224010622p:plain

 

 サンプルコードが予め入力されている為、そのまま学習にもなります。

また、実際に書いたlessファイルをCSS にコンパイル(変換) する事もできます。

構文エラーの際は、間違い箇所を指摘してくれます。

 

 


公認 日本語翻訳ページ

LESS - The Dynamic Stylesheet language

f:id:DDramonQ:20161224004928j:image

 

 

LESS の本家サイトの About /Translation のリストにも、翻訳ページとして、このページのリンクが載っています。翻訳してくださった方(々)、ありがとうございます🌟

 

 

その他の日本語ページ

その他、独断と偏見で←、分かりやすそうな日本語Webサイトをリンクしておきます。

 

● CSSの拡張メタ言語 LESS の基本的な使い方のメモ | Web Design Leave

● CSS拡張メタ言語「LESS」の使い方: 小粋空間

 

とは言うものの、公式解説(翻訳)自体、シンプルで分かりやすい目だと思いますので、先ずは公認翻訳ページを読まれる事を、強くお勧めします🌟

後は、とりあえずオンライン・コンパイラで色々と試してみましょう٩(⁼̴̀ꇴ⁼̴́٩)♪(僕もっ✨♪)

 

 

実際に LESS 試してみた🌟

色々便利な機能があるけど、とりあえず Nested rule を使えれば、もうそれは立派なLESSer(LESS 使用者の事。勝手に作りました ₍₍(꒪່౪̮꒪່)⁾⁾✨w) と言えるのでは🌟

これだけでも随分CSSの記述が楽になるし、HTML, CSSの構造を把握しやすくなる✨

 

 基本編

f:id:DDramonQ:20161224214501p:plain

 

&:extend();

&:extend(プロパティを同じにしたいセレクター名);

 

 

 ちょっと応用編

 先の例と全く同じCSS(出力結果)ですが、別の記述方法もあります。

ex1)

f:id:DDramonQ:20161225034209p:plain

 

ex2)

f:id:DDramonQ:20161225034358p:plain

 

 とは言うものの初学者の僕にとっては、やはりHTML, CSSの構造が把握しやすい基本編の書き方の方がしっくりきます🌟w

 

 

 

Nested ruleとは

nest とは、「鳥などの巣」の事を指す単語です。ただし、コンピューター・サイエンスで使われる場合は、意味が少し違ってくるようです。

Embedding one object in another object of the same type. Nesting is quite common in programming, where different logic structures sequence, selection and loop) are combined (i.e., nested in one another). It also occurs in applications. For example, many word processing applications allow you to embed (nest) one document inside another.

nesting --- Webopedia.com

 大雑把に言うと「物の中に、別の物を入れる事」をネスティング(nesting) と言うそうです。CSS や{less} の例で言えば、CSSは、セレクターブロックの中に、別のセレクターブロックを入れる事は出来ませんが、{less}だとそれができるという事です。

 

f:id:DDramonQ:20161224222943p:plain

.abc{}の中に .abc a{}をネスティングしている、言う事です。逆に言えば.abc a{}.abc{}の中にnested されていると言う事です。

 

 

 

 

[ ::雑談スペース:: ]

 公式ページの引用にも書かれていた単語、「Vanilla CSS」。「Vanilla CSSってなんじゃ~(* ॑꒳ ॑*).。oO?? 」

と思って早速検索をしてみました。調べるうちに「あれ、もしかしてSass, Less 以外にも便利な言語があるの✨✨(期待)」

と思ったのですが…。。ですが。これがしてやられました_:(´ཀ`」 ∠):_💦ww

 

Vanilla css

http://vanilla-css.com

 

f:id:DDramonQ:20161224020609p:plain

ほうほう、これはシンプルイズベベスト的な理念ですかな!?これはコードや機能も.。oO✨ (期待が高まる)

 

ボタンククリック🔲↓

 

f:id:DDramonQ:20161224021138p:plain

 

あれ?? ( ˙◊˙◞ )◞ ??💡 サイト移転したのかな?? URLが変更されたのかな??(* ॑꒳ ॑*).。oO???

f:id:DDramonQ:20161224020638p:plain

 

おぉ~あったあった✨✨♪(安堵 + 再燃期待✨)

 

 

f:id:DDramonQ:20161224020703p:plain

んんっ!? Facebook に+Googleも!?!? SassやLess よりも人気って書いてる✨♪♪(さらに高まる)

 

 

f:id:DDramonQ:20161224020720p:plain

 

0KB、Example辺りでようやく異変に気付く → Vannila検索 →理解(  Д ) ゚ ゚

 

f:id:DDramonQ:20161224020739p:plain

 

 

そう、実はこれはジョークサイトの様ですwww 日本からまんまとハマりに行きました_:(´ཀ`」 ∠):_w

Vannila とはアイスクリームのバニラを意味する単語ですが、実はコンピューター関連では少し違った使い方がされる様です。

Wikipedia.en によると、Vannila とは初期バージョンのソフトウェアやゲームの事を指し示す際に使うらしく、「Vannila CSS」とはまさに、既存の現行の皆がよく使っているCSSの事を指しているのですね(  Д ) ゚ ゚ そりゃ 0KB も納得ですわ(  Д ) ゚ ゚(  Д ) ゚ ゚ww

 

以上、アメリカン? カナディアン? ユーロピアンジョークにまんまとハマったお話でした(ノ"))ω((ヾ)💦ww

 

 

 

*1:厳密に言うと、Less.jsであもり、JavaScript製のソフトウェア・パッケージの一つでもあります。ただし、Less.jsはCSSを簡単に記述する方法論でもあり、独自のCSS風の構文規則を持つことから、プログラミング言語の一言語として、LESS言語という意味合いで「LESS」と言う事が多い様ですね🌟

【js】この前のお休みに、気になっていた単語をどっぷり調べてみたよ🌟

その結果、色々知ることができ、益々Web・コンピューター・プログラミングの世界が奥深い事を知りました。そして…どうやら僕のブログの「挙動の不具合」は、不適切なコード(js)が原因だという事もはっきり分かりましたw(ノ")`ω´(ヾ))ウーンッᵎ💦

今日はその出来事と、それに付随する「JavaScriptの不適箇所検出ツール」も紹介したいと思います。

 

 

 それらを知った発端は、以前からちょくちょく耳にして気になっていた単語を検索してみたからでした。

npm*1PostCSS*2など、色々気になった単語を芋づる式で調べ試している内に、BabelES Lint が、非常に便利でハイクオリティーなソフトウェア・パッケージだという事を知りました。初心者の僕でもわかるくらいのハイクオリティーさでした✨(*ö*)

しかも、どちらもオープンソース✨⊂⌒~⊃。Д。)⊃✨ 一体全体、世界のプログラミング事情はどうなっているのでしょうか。「ソフトウェアは基本オープンソース」という事をちらほら耳にする事があったのですが、それにしてもこの太っ腹具合とハイクオリティー具合には、驚きを隠せません。そしてなんだかとてもワクワクします✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)✨♪ JavaScript Love✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)✨♪♪💕

 

不適切箇所 検出ツール

ES Lint

http://eslint.org

f:id:DDramonQ:20161212020804j:image 

 

Lintとは、コンピューター関連の文脈で使う場合、「不適切なコードを検出する事*3」を意味します。ES Lint は、JavaScriptの不適切な箇所を見つけ、修正の仕方を教えてくれるソフトウェア・パッケージです。

 

 

マルチプラットフォーム対応のjsコードに変換してくれるツール

Bable

 https://babeljs.io

 

f:id:DDramonQ:20161212020758j:plain

 

 

 - 最新のJavaScript( ES6 ) で記述したものを、クロスブラウザ対応のjsコードに変換してくれるパッケージ。トランスパイラー(Transpiler)とも呼ぶ。*4

 具体例

[1,2,3].map(n => n + 1);

ES6 で新しく記述可能になった「 arrow*5 functhon 」をBabel にかけると

[1,2,3].map(function(n) {
  return n + 1;
});

僕たちが普段よく目にするのはこちらの記述方法です。  最新のJavaScriptで書いたコードを、現行ブラウザの殆どが対応しているES5 の function(){} の形に変換してくれる。

 

 

 

 

ちなみに、ES Lint を知ったのは Sitepoint さんのまとめ記事でした。

A Comparison of JavaScript Linting Tools --- Sitepoint

https://www.sitepoint.com/comparison-javascript-linting-tools/

 f:id:DDramonQ:20161212020810j:image

ありがとうございました😊🌟

 

 

 

ES Lint 試してみた🌟

オンラインでもES Lint を実行する事ができます。そして、このブログで使用している js を、実際にlinting してみました。

ESLint Demo - ESLint - Pluggable JavaScript linter

 

 【↓オンラインdemo↓】

f:id:DDramonQ:20161219175251p:plain

 

⁽⁽(ી₍₍⁽⁽(ી( ˆoˆ )ʃ)₎₎⁾⁾ʃ)₎₎←←

 

ES Lint は「どこが・何が」良くないかを明示してくれます。(図下赤部分)

また、「直し方」を具体例と共に分かりやすく解説してある「解説ページ」へのリンクまで付いています。(no-nudef)

「不適切箇所」がわかるだけでなく、「直し方」まで教えて頂けるとは、もうこれは五体投地ものですね_〇⊇✨✨♪

 

【↓ 解説ページ(no-undef)

 

f:id:DDramonQ:20161219180022p:plain

 

 demoページの一番下には、「何を検出するか」の「オプション」も付いてます。

よく分からないと思いますので、最初はそのままとりあえず使ってみるのもいいかと思います。僕もそうでしたが、使っているうちに、だんだん何と無くですが分かって来るかと思います🌟

 

 

結構あるなぁ…💦」と思いながら、順番にひとつずつ解説を読みこなしていった結果、何とか「 Lint free!( 手直し不要) 」までたどり着く事が出来ました🌟

 f:id:DDramonQ:20161212020821j:image

 

 

 これは本当にかなり勉強になりました🌟 素敵なサービスをありがとうございます(* ˊ˘ˋ)*_ _))

 

 

 

[補足1] 「ソフトウェア」 と 「ソフトウェア・パッケージ 」の違い

「ソフトウェア」、ではなく後ろに「パッケージ」と付いているのは、それが「小梱包物( パッケージ )」だからです。小さな違いですがこれがけっこう違います。「ソフトウェア」と「ソフトウェア・パッケージ」は語彙的にあまり大差がないように感じますが(ちょっと前の私w) 、 Web Developmentに興味のある人や、Linux系のOSに興味がある人は、違いを明確に知っておくと、その後の学習がスムーズにいくかと思います。

ソフトウェアとは、完成品であり、それ独自で自立しています。インストールから使用まで、それ一つで完結しています。

一方、ソフトウェア・パッケージとは、ある機能を備えている点は同じですが、規模が小さく、またそれ独自では自立していないソースコードファイル群です。それだけでは、PCにインストールする事は出来ません。また、そのプログラムを実行する際にも、他のプログラムを外部から利用しなければなりません。

インストールするにはパッケージ・マネージャーと呼ばれるソフトウェアが必要になります。

 

その利点として、

  • - 使い回しが効きやすい(reusable)
    • パッケージ間の共通のコードを、重複インストールしなくて済む。また、パッケージ間でのコードの衝突がなくなる
    • 効率的(消費容量・Developerの作業手間)

 

僕もこれ以上詳しくはまだあまり知りません。すみません(๑˃꒳˂๑)💦 ですがもう少しだけ知っている範囲で言いますと、パッケージにする理由として、ちょっとした有用なコードを皆で共有しやすかったり、パッケージが沢山ある場合に、パッケージ・マネージャーがあると更新やPCの容量削減とう色々と、メリットも多いようです。

現在Web Development では「reusable」といって、タスクの効率化・共有化を促進する流れが主流のようです。んん、恐らく合ってると思います。。多分。( ¯∀¯٥)💦w

 

 

[補足2] Web Development 系のパッケージ・マネージャー

最近少しずつ分かってきました。

といっても僕もまだ🔰なので、リンクを置いておくだけですが|*´-`)✨w そのうちガッツリ解説できるようになるぜ~ε==└(└  ⸝⸝⸝›ω‹)┘スィー ✨✨♪

 

11 Dependency Management Tools for Web Developers --- Hongkiat.com

http://www.hongkiat.com/blog/manage-dependencies-tools-webdev/

f:id:DDramonQ:20161219001039p:plain

 

後、Hongkiat.com さん↑でも1, 2位に入っていましたが、僕も知っていたパッケージ・マネージャーを載せておきます。多分一度くらいは耳にした事があるかも🌟

 

npm

https://www.npmjs.com

f:id:DDramonQ:20161219001406p:plain

 

Bower

https://bower.io

 

f:id:DDramonQ:20161219001507p:plain

 

 

 

npmは以前から検索でちょくちょくヒットした事があり「デザインが美麗なサイトだな~」「解説が分かりやすいな~」と思っていたサイトでもありました。色々と洗練されている印象があり、一度は訪ブログの価値ありのサイト様です✨(⁼̴̀ૢ꒳​⁼̴́ૢ๑)

 

 

*1:パッケージ・マネージャー。「パッケージ」「パッケージ・マネージャー」について、詳しくは  

https://www.debian.org/doc/manuals/aptitude/pr01s02.ja.html

http://qiita.com/chihiro/items/e522f9be6115a7fc197d

等をご参照下さい(•ᵕᴗᵕ•)⁾⁾🌟

*2: CSS変換パッケージ。CSSファイルをPostCSSにかけると、vender prefix( -webkit-, -moz-... )などを自動で補完したCSSを出力てくれる。JavaScript製。詳しくはHP → http://postcss.org  

*3:構文エラーや文字エラーを発見してくれる。デバッガとどう違うのかまだよく分かりません。すみません(๑˃꒳˂๑)💦

*4:translate + compiler の造語。こちらも詳しくは → https://en.m.wikipedia.org/wiki/Source-to-source_compiler。丸投げですみません💦 僕も現在進行形なもので…😅💦w

*5:矢印

【js】getBoundingClientRect() がヤバ良い(初出は2008年⁉︎( ˙◊˙◞ )◞💡 )

element.getBoundingClientRect()

この method は、document内の指定した

「❶指定要素の大きさ(縦・横幅)」

「❷viewport(後述)からの、指定要素の相対位置」

を知る事ができます。

 

 

element.getB...().width

element.getB...().height

指定要素の大きさを、このmethodで返値することができます。

element.getB...().top

element.getB...().bottom

element.getB...().left

element.getB...().right

 

viewportとは、ブラウザのウィンドウの事です。言い換えれば、今Webを観ているアプリケーションの画面全体をviewport( 視点) と言います。

位置計算にあたり、ブラウザウィンドウの左上端がviewportの基準点となり、そこからの要素の相対位置を返値します。

 

JS Bin on jsbin.com

 

f:id:DDramonQ:20161218200431p:plain

 

 

( i )Not スクロールイベント時

通常のまま getBounding...() を使った場合は、viewport がdocument の最上部にある時として値が計算されるので、documentトップから( body の一番上から )の距離になります。

 

他のWebサイトで「絶対位置」と書いていましたが誤りです。あくまでgetBounding...() は「viewport からの相対位置」です。ただし、スクロールイベントを絡めない場合は、「vieport = document Top」になるので、あたかも「ある要素の絶対位置(正確に言うと"ある要素の、document内の位置") 」のように感じますが違います。この違いは重要です。

getBounding..() だけに限らず、「そのメソッド・プロパティがどの様に値を計算しているか」を理解しておく事、言い換えれば「その仕組みの本質」を理解しておくと応用が効きます。逆にそうでなければ、応用が利きません。( これは自分にも言っています😅w)

 

 

( ii )スクロールイベント時

また、スクロールイベントと絡めて、「viewportから"その要素"が何px離れているか」をタイムリーに返値する事も出来ます。スクロールによって変化する位置を、逐一、返値してくれます。

 

See the Pen oYmNLj by Kazuma Tojo (@Kazumax) on CodePen.

 

「どれ位スクロールしたか」を知れる、という点では、element.scrollTop やwindow.scrollYとも似ています。ただ、getBoundingClientRect() は

height, width, top, left, right, bottom の6つの値を知ることができます。

 

❶height, width : 任意のブロック要素の大きさ( 縦幅・横幅 )

❷top, left, right, bottom : 任意のブロック要素の、viewportからの相対位置

 

 

一次ソース

CSSOM View Modul -W3C

∟6. Extensions to the Element Interface

https://www.w3.org/TR/cssom-view-1/#extension-to-the-element-interface

 

初出は2008年前後のようです。そんなに前からこんなに便利なものがあったとは( ˙◊˙◞ )◞💡💡✨✨

 

 

その他の分かりやすい解説

●「getBoundingClientRect method」- Dottor ---

http://help.dottoro.com/ljvmcrrn.php

●「Corrdinate system」 -JavaScript Tutoria---

https://javascript.info/tutorial/coordinates

 

 

John Resigさんが、2008年に記事を書かれていたのですが、getBounding...() は、計算処理も早いようです。また、それ以外の方法で、ブロックの(x, y) を求めるメソッドやプロパティでは、バグが含まれていたり、誤差が多いようです。

 

JohnResig 「getBoundingClientRect is Awesome」

http://ejohn.org/blog/getboundingclientrect-is-awesome/

  

何はともあれ、getBoundingClientRect() メソッドは、インタラクティブな効果を実装する際等、かなり汎用性が高そうな予感です✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)♪♪

 

 

 getBoundingClientRect() の 対応ブラウザ

http://caniuse.com/#feat=getboundingclientrect

 

 

 

後日談

前回の記事でスクロールナビ.jsを少し書きましたが、あの機能を実装するのに、 getBounding...() を使っています。確認はしていませんが恐らく、他のスクロールナビもこれを使っておられると思います。

また、このブログの記事タイトル背景のパララックス効果も、getBounding...()を使っています。始めはelement.ScrollTopwindow.scrollY  を使っていたのですが、どうもタブレットからだとカクツキが多かったです(もしかしたら僕の他のコードのバクかもしれませんが😅w) そしてある時ふと思い出してgetBounding...() にした所、Resig さんのデモ動画のように、処理速度が速いようで、カクツキも無くなりました。

 

ちょっとした違いだけど、大きく差が出る。バグもそうだけど、コンピューターさんは繊細なのだと、再認識した出来事でもありました✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)

 

 

 

iPad 最強テキストエディタ アプリ、..\Textastic/..

これを最強と言わずして何を最強といおうか。

 

Textastic

https://www.textasticapp.com

f:id:DDramonQ:20161218115001j:image

 

全部のせのです。入門者~中級者までをカバーできうる、和馬が選ぶ、2016年ベストテキストエディタ アプリです🌟

 

 

特徴

●ほとんどの言語のコード・ハイライト機能

●ブラウザを内蔵しており、すぐにコードを実行できる( HTML, CSS, JavaScript )

●Drop Box, Google Driveとの連携も🉑

設計が機能的で、直感操作で使いやすい

 ●iCloud とも連携🉑

●FTP に対応

 

特にWeb Developmentに興味がある人には是非おすすめしたい一品。機能が充実しているテキストエディタアプリは幾つかありますが、細かな機能性・操作性を考えれば、やはりこれが一番ですね。

 

良いところを挙げれば、枚挙にいとまがありません。後、個人的な好みでは、テーマ「Monokai」が、見やすく美麗なテーマで、凄く気に入っています。

 

インデント数調整、ソフトインデントon-off、フォントサイズ調整、検索・置換機能...etc。コンパクトでありながら、丁寧に設計がなされている事を、随所に感じることができます。

 

 

実際の使用画面

f:id:DDramonQ:20161218123644p:image

f:id:DDramonQ:20161218123648p:image

f:id:DDramonQ:20161218123652p:image

 

はてなブログテーマ制作 〜 Github まで

 ほぼ全て、Textastic (iPad) をメインでコードを書いたりupしたりしていますw 「いや、PC使えよ」という声も聞こえてきそうですが、Textasticが使い心地がいい事と、キーボード入力よりiPad でのタッチ入力に馴染んでしまったのでw

後、あまり関係ありませんが、僕はPCのテキストエディタは、sublime text を使っていますw

というかノートパソコン、特にMac Book Pro 超絶欲しぃーーーっ(買うぞ~)!!!!!!✨::୧((*꒪д꒪*)و::✨

 

 

【CSS】CSS のみ( Pure CSS )で「スクロール・ナビ.js」と同じ事が出来た⁉︎

jsだと、iOSの場合、position ヂェンジの際に、どうしてもシームレスに表示されない…。一旦position ヂェンジの際に、その要素の表示が消えてしまう。。

それをを解決したいと、ずっと頭の片隅にあって、

「もしやPosition を変える以外に方法は→ 色々試すが△。…。。 もしや position プロパティに、他のfixed やabsolute 以外の値があるのかなぁ…。。??」と思って調べたらありました!?

 

 

position: sticky;

 

 

SitePointさんが、2014年に記事にされておられました。

 

CSS “position: sticky” – Introduction and Polyfills

https://www.sitepoint.com/css-position-sticky-introduction-polyfills

 

f:id:DDramonQ:20161213191125j:plain

サイト先のDemoはうまく表示されていませんでしたが( 視聴環境: iOS ) 、ソースコードをDLし、試してたらうまく表示されました🌟

 

ポイントとしては、

- 親要素がoverflow  に設定してあるとうまく作動しない

 

ようです。

僕もまだW3C の方は、ザッとしか読めていないのですが。。w

一次ソースのリンクを置いておきます。

 

CSS Positioned Layout Module Level 3

   ∟ 6.5. Choosing a positioning scheme: position property -- W3C 

https://www.w3.org/TR/css-position-3/#position-property

f:id:DDramonQ:20161213191136j:plain

 

関連項目 - Normal Flow とは

https://www.w3.org/TR/css-position-3/#normal-flow

https://www.w3.org/TR/CSS2/visuren.html#normal-flow

 

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