Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

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

✑ジョッティング

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

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

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

 

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

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

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

 

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

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

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

もう既出でしょうか。。

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

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

⌬JavaScript 解説

では後半です。

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

function - 関数

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

argument引数(実述) - 引数

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

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

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

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

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

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

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

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

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

 

 

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

 

 

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

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

JS Bin on jsbin.com

 

CSS

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

 

HTML

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

JavaScript

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

var id = requestAnimationFrame(function animate() {

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

});

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


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

 

JS Bin on jsbin.com

 

JavaScript

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

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

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

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

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

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

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

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

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

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

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

 

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

 

 

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

⌬JavaScript Tips

基礎編

 

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

HTML

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

CSS

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

 

JavaScript

"use strict";

var _ = console.log;

var btn1 = document.querySelector('.entry-content #btn1');
var list1 = document.querySelector('.entry-content #list1');
var list1_H;

list1.style.overflowY = 'hidden';
list1_H = list1.getBoundingClientRect().height;
btn1.list1_Height = list1_H;
list1.style.height = 0 + 'px';

btn1.addEventListener('click', function(e) {
    e.preventDefault();
        // _(this.textContent);
    var eBtn = this; // === 'ev.target'
    var eList = eBtn.nextElementSibling;
    var eListH_now = eList.getBoundingClientRect().height;
       //  _(eListH_now);
    if (eListH_now !== 0) {
        eList.style.height = '0';
    } else {
        eList.style.height = this.list1_Height + 'px';
    }
});

 

 

JS Bin on jsbin.com

 

 

関連項目

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

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

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

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

 

 

 

応用編

 

  • list2

  • list3-1
  • list3-2

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

HTML

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

CSS

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

 

JavaScript

"use strict";

var _ = console.log;

var btns = document.querySelectorAll('.entry-content .btn');
var lists = document.querySelectorAll('.entry-content .list');
var i = 0;

var toggleList = function (ev) {
    /************************************
    this === ev.target
    ************************************/
    ev.preventDefault();
    
    var evBtn = this;
    var evList = evBtn.nextElementSibling;
    var evListH_now = evList.getBoundingClientRect().height;
       // _(now_listH);
    if (evListH_now === 0) {
        evList.style.height = this.siblingListH + 'px';
        evBtn.classList.add('clicked');
    } else {
        evList.style.height = 0;
        evBtn.classList.remove('clicked');
    }
};

for (i = 0; i < lists.length; i++) {
    var btn = btns[i];
    var list = lists[i];
    var listH;
    
    list.style.overflowY = 'hidden'; 
    listH = list.getBoundingClientRect().height;
    btn.siblingListH = listH;  // --- (i)
    list.style.height = 0; // -- (ii)
    btn.addEventListener('click', toggleList);  // -- (iii)
}

 

 

JS Bin on jsbin.com

 

 

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

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

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

 

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

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

 

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

- callback の parameter は一つ。Event

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

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

 

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

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

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

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

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

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

✿タイポグラフィー ✑ まとめ

Google Font / early access

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

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

 

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

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

 

 

 

ゴシック体

M+

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

link rel

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

@import

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

- 1 -

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

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

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

Rounded M+

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

link rel

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

@import

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

- 2 -

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

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

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

Noto Sans Japanese

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

@import

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

- 3 -

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

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

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

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

Noto Sans JP

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

@import

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

- 3-2 -

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

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

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

さわらびゴシック

"Sawarabi Gothic"
400

link rel

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

@import

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

- 4 -

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

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

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

明朝体

はんなり明朝

"Hannari"
400

link rel

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

@import

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

- 5 -

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

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

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

こころ明朝

"Kokoro"
400

link rel

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

@import

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

- 6 -

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

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

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

さわらび明朝

"Sawarabi Mincho"
400

link rel

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

@import

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

- 7 -

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

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

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

その他

ニコモジ

"Nico Moji"
400

link rel

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

@import

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

- 8 -

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

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

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

ニクキュウ

"Nikukyu"
400

link rel

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

@import

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

- 9 -

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

春夏秋冬四字熟語

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXXZYZ

 

一気に試したい人用

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

 

 

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

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

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

⌬JavaScript ✿カラー

Basic

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

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

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

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

HSL and HSV --Wikipedia.en --

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

 

 

Color Conversion (theory)

Charles Poynton

http://www.poynton.com

【pdf】 Colour Space Conversions

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

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

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

 

 

Color Conversion (source code -js -)

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

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

 

 

Recommend article and Others

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

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

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

RapidTables.com

- rgbToHsl

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

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

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

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

図付きで分かりやすい

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

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

 

 

 

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

⌬JavaScript 備忘録

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

 

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

 

 

 

Constructor ( function )

 


"use strict";

var d = document.getElementById('d');

/*=========================*
    Constructor fn
/*=========================*/
var Sazae = function(firstName) {
    this._parent = this.constructor.name;
    this.lastName = "Isono";
    this.firstName = firstName;
    this.getInfo = function() {
        return [this._parent, this.lastName, this.firstName];
    }
}

var tarao = new Sazae('tarao');

d.innerHTML = tarao.getInfo();
 

 

Prototype


/*========================*
    prototype❶
/*========================*/
var d2 = document.getElementById('d2');

var Sazae2 = function(firstName) {
   this.firstName = firstName;
   Sazae2.prototype._parent = this.constructor.name;
   Sazae2.prototype.lastName = "Isono";
   Sazae2.prototype.getInfo2 = function() {
      return [this._parent, this.lastName, this.firstName];
   }
}

var tarako = new Sazae2('tarako');

d2.innerHTML = tarako.getInfo2();
 

 


/*========================*
    prototype❷
/*========================*/
var d3 = document.getElementById('d3');

var Sazae3 = function(firstName) {
   this.firstName = firstName;
}

Sazae3.prototype._parent = 'Sazae3';
Sazae3.prototype.lastName = "Isono";
Sazae3.prototype.getInfo3 = function() {
   return [Sazae3.prototype._parent, Sazae3.prototype.lastName];
}
   
var tarajirou = new Sazae3('tarajirou');

d3.innerHTML = tarajirou.getInfo3();
d3.innerHTML += ', ' + tarajirou.firstName;

 

 

 

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

⌬JavaScript 解説 ✿デザイン

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

chroma.jsとは?

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

準備

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

 

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

使い方

chroma.scale().hex()

 

パレット数: 30

0
1

 

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

 

★基本: 単色
 

 

HTML
<div id="elm"></div>
JS
var scl = chroma.scale(['crimson', '#fafcee']);
var val = scl(0.5).hex(); //  val => #eb8895


// もしくは一行で書くなら
var val = chroma.scale(['crimson', '#fafcee'])(0.5).hex() // val => #eb8895

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

 

0
1

 

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

 

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

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

 

HTML
<div id="elm"></div>
JS
var elm = document.getElementById('elm');
var scl = chroma.scale(['crimson', '#fafcee']);
var val = scl(0.5).hex();

elm.style.background = val; // 背景 => #eb8895 💮



// 分かりやすさのために分けましたが、var val に分けなくてOK
/*=====================================*/

var elm = document.getElementById('elm');
var scl = chroma.scale(['crimson', '#fafcee']);

elm.style.background = scl(0.5).hex(); // 背景 => #eb8895 💮

 

 

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

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

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

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

 

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

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

 

力技で、実現すると…

HTML
<style>
.elm {
   display: inline-block;
   width: 10%;
   height: 200px;
   }
</style>
<body>
<div class="elm" id="elm1"></div>
<div class="elm" id="elm2"></div>
<div class="elm" id="elm3"></div>
<div class="elm" id="elm4"></div>
<div class="elm" id="elm5"></div>
<div class="elm" id="elm6"></div>
<div class="elm" id="elm7"></div>
<div class="elm" id="elm8"></div>
<div class="elm" id="elm9"></div>
<div class="elm" id="elm10"></div>

<script>
var e1 = getElementById('elm1');
var e2 = getElementById('elm2');
var e3 = getElementById('elm3');
var e4 = getElementById('elm4');
var e5 = getElementById('elm5');
var e6 = getElementById('elm6');
var e7 = getElementById('elm7');
var e8 = getElementById('elm8');
var e9 = getElementById('elm9');
var e10 = getElementById('elm10');

var scl = chroma.scale(['crimson', '#fafcee']);


e1.style.background = scl(0.1);
e2.style.background = scl(0.2);
e3.style.background = scl(0.3);
e4.style.background = scl(0.4);
e5.style.background = scl(0.5);
e6.style.background = scl(0.6);
e7.style.background = scl(0.7);
e8.style.background = scl(0.8);
e9.style.background = scl(0.9);
e10.style.background = scl(1.0);
</scrit>

となります。

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

HTML
<div id="elm"></div>
JS
var elm = document.getElementById('elm');
var scl = chroma.scale(['crimson', '#fafcee']);
var i;

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

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

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

JS
var elm = document.getElementById('elm');
var scl = chroma.scale(['crimson', '#fafcee']);
var pales = 10;
var i;

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

思考の足あと🐾

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

 

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

js1
js2
var elm = document.getElementById('elm');
var scl = chroma.scale(['crimson', '#fafcee']);

var i;

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

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

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

パレット数: 5

 

パレット数: 15

 

パレット数: 30

 

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

⌬JavaScript Tips

 

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

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

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

f:id:DDramonQ:20170223223633j:image

f:id:DDramonQ:20170223223645j:image

 

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

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

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

 

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

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

⌬プログラミング(Programming) ★ 本(Books) ⚁CS( コンピューター・サイエンス ) ⚁科学(Science) ★ ピックアップ ★ めっさ分かりやすいサイトシリーズ

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

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

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

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

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

 

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

 

Other

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

 

Green Tea Press.com

http://greenteapress.com/wp/

 

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

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

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

 

 

Textbook Manifesto

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

Allen B. Downey January 2010, updated February 2016


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

 

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

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

2010.1 | 更新: 2016.2

 

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

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

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

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


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

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

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

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

 

 

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

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

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

⌬JavaScript 解説

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

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 さんが秀逸過ぎる

⌬JavaScript ✿デザイン ★ ピックアップ

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してたよ✨♪

⚁哲学(Philosophy) ⌬ツール

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」が結ばれなければならない。

 

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

 

科学の哲学

 

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

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

 

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!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️