Codropsで紹介されている、無料で使える優れものの数々
前回も、Codropsの無料ダウンロードで作成できるサイトをご紹介しましたが、
まだまだCodropsでダウンロード出来るものが沢山あるのでご紹介します。
2016年にアップされた作品ですが、とても素晴らしいのでぜひお試しください。
Interactive Musical Instrumentの魅力
約１０種類の音が出せる
Interactive Musical Instrumentは、2016年に作成されている作品で、
リメイクOKとライセンスに書いてあります。
なのでぜひダウンロードして自分のスキルにすることをお勧めします♪
MusicalInstrumentの作者
Codrops 所属、Mary Louさん。Codropsのサイトは彼女の作品でいっぱい！
Download
[toc]
ライセンス
英語
All our downloadable resources are licences under the MIT license (if not mentioned otherwise):
Copyright © 2020 Codrops
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Our design freebies can be used in personal or commercial projects with the exception of redistribution, republishing or sale of the item itself, parts of the item, or edited versions.
You are free to copy excerpts of our articles but please don’t republish entire articles. If you’d like to translate single articles, please contact us.
日本語
ダウンロード可能な全てのリソースは、MITライセンスに基づくライセンスです（特に記載がない場合）。
著作権©2020 Codrops
これにより、このソフトウェアおよび関連するドキュメントファイル（以下「ソフトウェア」）のコピーを取得するすべての人に、使用、コピー、変更、マージの権利を含むがこれらに限定されないソフトウェアを処理する許可が無料で付与されますソフトウェアのコピーを発行、配布、サブライセンス、および/または販売し、以下の条件に従って、ソフトウェアの提供先にソフトウェアの提供を許可します。
上記の著作権表示およびこの許可通知は、ソフトウェアのすべてのコピーまたは大部分に含まれるものとします。
本ソフトウェアは、商品性、特定の目的への適合性および権利の非侵害の保証を含むが、明示的または黙示的ないかなる保証もなしに「現状のまま」提供されます。いかなる場合でも、作者または著作権者は、契約、不法行為、またはその他の行為、ソフトウェアまたは使用またはその他の取引に起因または関連するいかなる請求、損害またはその他の責任についても責任を負わないものとしますソフトウェア。
デザインの景品は、アイテム自体、アイテムの一部、または編集されたバージョンの再配布、再発行、販売を除き、個人または商業プロジェクトで使用できます。
記事の抜粋を自由にコピーできますが、記事全体を再公開しないでください。単一の記事を翻訳したい場合は、お問い合わせください。
こちらを読むと、無料でソースのコピー可能とあります。
ただし全部コピーしてはいけません。コピーしたものを販売してはいけません。違法なサイトで使ってはいけません。
一部の記事の意味を翻訳したい場合は、お問い合わせください。
とあります。リメイクしたいと思う部分は、人それぞれでしょうし
上手くいくとは限りません。うまくいかない時は、すぐに問い合わせしてみることをオススメします。
Codoropsで使われている言葉は、英語だけではいので、英語でなくても回答が貰えそうです。（スペイン語とか
なるべく英語で翻訳機 (https://translate.weblio.jp/) を使うなどして、問い合わせましょう。
私の場合は、3日後に以下の様な回答をもらえました。
“私たちのリソースを使用してそれらを統合したり構築したりできます。
許可されていないのは、ソースの再配布です。
これがあなたの質問に答えることを願って、あなたのプロジェクトがオンラインになっているとき、
リンクを送って私に見てもらうことができますか？”
という訳で私はリンクを送りました。
返って来た返事は、もっと変えてください！というものでした。
なので、ピアノだけにしました。 >> ピアノを弾いてみる！ <<
コードの解読
ピアノの鍵盤のデザインはCSS : instrument.cssで編集します。
/* Piano */ 31行目
.piano::after {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: linear-gradient(180deg, #fff, rgba(255,255,255,0));
}
.piano__key–natural {
fill: #fff;
stroke: #e3acae;
stroke-width: 0.5px;
}
.piano__key–natural.piano__key–active {
fill: #c97586;
}
.piano__key–flat {
fill: #e3acae;
}
.piano__key–flat.piano__key–active {
fill: #fbce41;
}
HTML
本体の鍵盤はindex.htmlにあり、何も触らない方が伸び伸び弾けると思い
そのままにしてあります。
htmlファイルのコードは、
See the Pen
Explanation for my blog by Yukyco (@yukyco)
on CodePen.
までの97行です。
コードソース内には以下の様な、gタグが２箇所あります。 <gattribute-value">piano__keys piano__keys--natural">2種類のクラスに分けて、ピアノの黒盤と白盤が書かれている様です。
JavaScript
最後にフッターにある色々とある javascriptが必要です。
ピアノは、piano.js で、他のも消さない方がいいです。消すと音が出なかったりします。
上記の様な記述がありますので、これを絶対に消さない様に編集します。
codropのコピーライト（著作権）も削除してはいけません。
実践動画を撮りました
最後までご覧頂きありがとうございました。
