JavaScriptメモ 鬼滅をキルミーにするやつ

  

 JavaScript勉強中なんでどうやってるのか調べたんですが、よくわかりませんでした。

 コードシンプルだし恐らく割と初歩的なんだと思います。

  JS、なにもわからん。

  以下コード

javascript:(function(){document.body.innerHTML=document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');})()

Dropbox - kimetsu2kmb.txt - Simplify your lifeより

 

コードバラして1個ずつ把握していきましょう。

 なお、あってるかどうかは保証しない。 

  以下、コードの中で青字・太文字で書かれてる部分がこれから言及するコード、

   赤字で書かれるコードは言及済みのコードとなる。

 

javascript:

(function(){

document.body.innerHTML=document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

})()

 javascript:~

そもそもこれは、

①ブラウザでのブックマークで上記のコードをURL部分にコピペ

 ②任意のウェブページを見てる歳にコードを貼ったブックマークをクリック

  ③見ているページにJavaScriptのコードが作動する、という仕組み。

ブックマークレットというらしい。

ブックマークレットの仕組みと使い方 | ライフハッカー[日本版]

javascript:

(function(){

document.body.innerHTML=document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

})() 

②function(){中略}

function 関数A (引数){処理}はJSの初歩的な関数。

 関数Aは{}内の処理をする関数となる。

  関数A();で処理が実行される。

今回の場合、関数名を置いてない無名関数となる。

 

javascript:

(function(){

document.body.innerHTML=document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

})() 

③(function(){中略})()

上記のfunction(){中略}が(と)()に囲まれていることで、

 即時関数と言って定義と同時に処理を行うっぽい

JavaScriptで即時関数を使う理由 - Qiita

 function定数(){}と定数A();を同時に行うってイメージでいいのかな?

【JavaScript】無名関数とは/即時関数とは - Qiita

1回きりしか使わない関数なので、名前をつける必要がない(=無名)ということ。

 無名関数は、実は即時関数の一種。
即時関数はプログラムを即時実行できる点がメリット。

今回のように、1行だけのシンプルなプログラミングを処理するときは

 無名関数と即時関数が使われるんですね。

 

あとは{}内の中略、つまり実際に行われる処理なんだけど、

 document.body.innerHTML=

 document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

  と、なんだか同じ表記が繰り返されててよくわからない。

これもバラして確認してみる。

 

javascript:

(function(){

document.body.innerHTML=

document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

})() 

 ④.replace(変更前,変更後);

replace関数

( 文字列 ).replace ("文字列の一部" , "置換後の文字列")で、文字列の中の一部を置換できる。

JavaScript replaceメソッドを使ったHTMLの置換

 

今回のコードでは、「document.body.innerHTML」の中の「鬼滅」が「キルミー」に、

 「の刃」が「ベイベーとなる。

/鬼滅/g

変換する「鬼滅」を/と/gで囲む。

 gはglobalを意味する。

  これがないと、最初の「鬼滅」の文字列を変換したら処理が終了するが、

   gがあれば文字列のすべての鬼滅をキルミーに置換する。

 

javascript:

(function(){

document.body.innerHTML=

document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

})()  

 ⑤document.body.innerHTML

ここでreplaceによって変換の対象となる文字列は document.bodyの部分。

document

 →ブラウザに読み込まれたウェブページ全体

document.body

 →その中のbodyタグに含まれているもの(表示されている物すべて)

Document - Web API | MDN

.innerHTML

 要素内の HTML (ここではbodyタグに含まれている者すべて)を取得・設定する。

element.innerHTML - Web API | MDN

documentの中のbodyがinnerHTMLによってHTMLが習得され、その中の鬼滅がreplace関数でキルミーに変換される。

 

 javascript:

(function(){

document.body.innerHTML=

document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

})()  

 ⑥document.body.innerHTML=

要素.innerHTML =~で、elementのHTMLを=以降の~に変換できる。

ここでの要素はdocument.bodyなので、

 元のdocument.bodyを、

   document.bodyの一部文字列をreplaceしたものに置き換える。

これによってウェブページの「鬼滅の刃」が「キルミーベイベー」になる。

 

めでたしめでたし。

 最初のdocument.body.innerHTML=って必要なの?

調べる上で引っかかったところ。

 =以後の「document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');」で

  文字が置換されているのだから、

  「元々のページを」「文字列置換以後に変換する」の

   「元々のページを」って部分必要なの?という疑問。

javascript:(function(){document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');})()

 だけではだけではダメなのかという。

「.replace」が文字列の変換をしただけでブラウザ上の表示には関与せず、実際表示されているdocument.body.innerHTMLにdocument.body.innerHTML.replaceを代入するという認識でいいのだろうか。

 「変数 = 辺数 +1」を「変数+1」と書いても作動しないように。

まぁ今はそういうもんだととりあえず覚えておく。

メモ JS コース3~4

自分用メモとしてnote使ってたが、使いづらくてクソの役にも立たねえ。 

これまでのブログの方向性と全然違うのでアレだがまぁ別にいいやの精神で学習メモ、チラシの裏としてここを使う。

あくまで個人のメモであり内容の拙さとかは知ったこっちゃないです。

 

・定数

const 定数A=XXX

定数AをXXXと定義する

・関数

const 定数A = function() {
(任意の関数)
}

定数Aに任意の関数を定義する

・アロー関数
= function()の代わりに
= () =>と置く

定数A();
→{}内の「任意の関数」を処理する


・引数
const 定数 =() =>の()の中に引数名を入れて、関数に追加情報を与える

const 定数A = (引数1) => {
(任意の関数)
}

定数A(X);
→引数1にXを代入した(任意の関数)を処理する


const 定数A = (引数1,引数2,引数3) => {
(任意の関数)
}
定数A(X,Y,Z);
引数1にX、引数YにY、引数3にZを代入した(任意の関数)を処理する

 

・戻り値
const 定数A =(引数1,引数2) =>{
  return 値;
}


→関数Aが引数1,2を受け取った処理の結果=上記の値Aが、関数Aの戻り値

const 定数B = 関数A(X,Y)
→引数1をX、2をYとした関数Aの戻り値を定数Bと定義する
console.log(定数B);
→定数Aの戻り値が処理される


・スコープ
関数内で定義した定数・変数は、その関数の中でしか使えない
→その関数内で定義された定数・変数は反映される

const getMax = (a,b,c) =>{
let max = a;
if (max<b){
max = b;
}
if (max<c){
max = c;
}

return max;
};


関数getMaxが引数a,b,cを引き受けた時の処理の戻り値がmax
変数maxはlet max = a;~以降によって、
引数a,b,cのいずれのうち一番大きいものとなる。

// 「最大値は○○です」と出力してください
const max = getMax(number1, number2, number3);
console.log(`最大値は${max}です`);

const maxは上記の変数maxとは別
(変数maxはgetMaxの関数の中でしか反映されない)

定数maxを、関数getMaxの戻り値である変数maxと定義する
console.log(max);で最大値が表示される

 


コース4


・オブジェクト
const 定数1 = {プロパティ1:値1,プロパティ2:値2};
{}の中の複数の値をプロパティ名をつけて管理→オブジェクト


・クラス
 オブジェクトの設計図
  class クラス名{}
   クラス名は大文字から始まる


インスタンス→クラスから生成されるオブジェクト
 const animal = new Animal();
 で、クラスAnimalを代入する定数animalというオブジェクトが生成される。これがインスタンス

 


・コンストラク
 クラスがインスタンスを生成した時に実行する処理
  クラスの{}の中にconstructor() { }と記述

・this.プロパティ名=値
 インスタンスにプロパティと値の情報を追加
  constructor() { }の中に記述
console.log(インスタンス.プロパティ名);で値をつけられて出力

constructor()の()内に引数をつけることで値に引数を渡せる

 

・プロパティ→インスタンスの情報などを追加するのに使う
 ↕
・メソッド→インスタンスの動作、処理のまとまり
  constructor(){}の{}の中、「メソッド名(){//行いたい処理}」 

メソッド内でインスタンスの値を使用する際は「this.プロパティ名」という特別な値を使う

・this.メソッド名()
 メソッド内で他のメソッドを呼び出す

 

キン肉マンネタバレ問題について 読者の不信感は無視され、怒りは矮小化されている

キン肉マンネタバレ問題については、以下のページがまとまっている。

neora30.hatenablog.com

 

 

以下は内容が重複するので飛ばせます。

 

一応流れをまとめさせていただく。

①2011年よりキン肉マンはウェブで連載されていた。

②2020年8月より週刊プレイボーイで紙連載連載復活。

ゆでたまご嶋田氏より、スクショが横行する現状への苦言が呈される。

 

④今まで「過度な画像転載」を行っていた読者は、作者の訴えを聞き入れ納得する。

⑤掲載誌、週刊プレイボーイが会社としての見解を発表し、文章によるネタバレ行為に対しても法的手段を講じることもある旨の内容に動揺が広がる

wpb.shueisha.co.jp

以下引用

たとえ軽い気持ちであったとしても、漫画のスクリーンショットをSNSやブログに著作権者の許諾無く投稿(アップロード)する行為は、法で定める一部の例外()をのぞき、著作権の侵害にあたり、場合によっては刑事罰が科され、あるいは損害賠償請求の対象となります。悪質な著作権侵害、ネタバレ行為(文章によるものを含みます)に対しては、発信者情報開示請求をはじめ、刑事告訴、損害賠償請求などの法的手段を講じることもありますので、ご注意ください。

⑥「ネタバレ」がどこまでを指すのか不明の中、ネタバレに関するゆでたまご嶋田氏のツイートが続き、「このレベルのネタバレで法的手段をとるつもりなのか?」と更に動揺が広がる。 

上の記事から引用。

私たちが一番気になったのは、他の読者の皆さんへの配慮という点です。特に『キン肉マン』は先月から『週刊プレイボーイ』でも連載を開始し、ウェブ媒体、紙媒体でさまざまな読み方ができるようになりました。つまり、それだけ人によって読むタイミングも違ってきます。かつて『ジャンプ』で『キン肉マン』をいち早く読もうとしていた少年たちも、自分が読む前に内容を話されたら怒っていたように、今回はその配慮のない行動がSNS上の一部の読者によって引き起こされてしまったのだと、私たちは考えています。

 ウェブと雑誌掲載でのタイムラグに言及。未読の読者に対する配慮を求めている。

求めるのがただの配慮、マナーの訴え、法的拘束力のない読者へのお願いなら理解できるが、続く編集部のコメントは上記の通り「法的手段」まで言及されている。 

雑誌は発売されたが単行本が出てないタイミングの「ジェロニモが超人になった」がネタバレ。  

 感想はいいけどネタバレはダメ。

 ⑦「どこまでが訴えられるネタバレなのか」の説明を一部読者は求めたが、回答は現時点でなし。 

 

 先週末から読者からの不満の声が上がっていながら、9/15(火)現在週刊プレイボーイ(以下週プレ)サイト上での反応は全くなし。

内容は「読者が出版社から法で訴えられないかの確認」というシビアなものであるため、是非明確な回答を求めたいと思うのだが…

  

以上ここまで飛ばせる

ジャンプ+云々の話は置いておく。 

 

ここまでは長い前置きであり、上記したねおらー31氏の記事内容とほぼ同じ。

こっからが本題。

読者の不信感は無視され、怒りは矮小化されている

作者や出版社の拙いやり方に不信感を持っている一部読者に対して、その怒りが的外れ、過剰だと矮小化する外部の存在がいる。

出版社が言ってない独自理論を持ち出して矮小化を行おうとする。

出版社への忖度と読者への抑圧という視点で、以下「ねとらぼ」の記事を批判する。  

nlab.itmedia.co.jp

 『ネタバレ感想で訴訟されるは誤解』『「ネタバレ」と「悪質なネタバレ」は別もの』と断言されているため、集英社の確認をとったのかと思えば、そうではなく記者の解釈によるものだった。 

「悪質な著作権侵害」と「悪質なネタバレ行為」には法的手段を講じることもある――この部分が、「ただのネタバレ行為(文章)でも訴える」とも解釈できるため、心配する読者が続出した。しかし、その後週プレNEWS編集部が問い合わせへの返事で「ネタバレ行為(著作権侵害が認められる特に悪質なネタバレ行為に対して) 」と補足している。NGなのは「ネタバレ」ではなく「悪質なネタバレ」とみて間違いない。

この「補足」、上記の「お願い」には全く記載されていないので、読者がそれを正式な文書だと判断できるものにはなりえない。

そして、「「悪質なネタバレ行為」とは何か」について書かれるのだが、これは週プレの見解でなく、ねとらぼの記者が過去の判例を元に書いているだけなのだ。

重要なのは「集英社が訴えた際に勝つか負けるか」の基準となる判例でなく、「週プレの文言をそのまま適用した際に、訴えられるか否か」なのだ。

集英社が何をトリガーとするか、を問題視しているのだ。

「訴える」と言っている以上、無理筋でも訴えること自体はできる。それだけで一個人である読者には負担だ。   

元々、担当記者の高橋氏(ねとらぼ副編集長)は読者の危惧に対して冷ややかな立場にいた。 

 

 「編集部はSNSの感想の話はしていない」と断言できる根拠はどこにあるんだろうか。「解釈によってはSNS上の感想も訴えられる」という危惧をしているのに。

SNS上の感想(文章のみ)を法で訴えることはないですよ」と週プレが補足してくれたら済む話なのに、こっちの読解力の問題に持っていこうとする。

ゆでたまご嶋田氏は上記のように「ジェロニモが超人になった」程度のネタバレも問題視するかのような態度をとっている。この程度の内容に触れる感想ができなくなる、それどころか訴えられるという危惧がある。

嶋田氏 のいう「感想」が「面白かった」程度の言葉しか許されないディストピアのようになるという危惧をしている。

漫画感想、紹介、批評、そういった界隈にかつていた自分としては、むなしいし悔しい。

 なぜ政府に対する万が一を想定できて、出版社に対する万が一を想定できないのか。

ねとらぼは集英社と企業間の取引を経た信頼関係があるかもしれないが、多くの読者にとっては単に生産者-消費者という関係性に過ぎないのに。

 

また、「ねとらぼはなぜ集英社に基準を直接取材できる立場にいながら、それをせず自分たちの見解を載せるのか」 について、「グレーゾーンを明確にするのは藪蛇だから」との旨のコメントがもう一人の副編集長、池谷氏から寄せられた。

  「ネタバレを含む感想」が「グレーゾーン」って、そうだったの?

かつて漫画感想ブログを運営していて、画像利用に関してはグレーゾーンという自覚の元行ってきた。

画像だけでなく、そもそも感想自体が出版社のお目こぼしでさせていただいてた、ってことなのか?

レビューという行為に対しての、舐め腐った見方である。

 

そもそも、先にグレーゾーンに対して「ネタバレ行為に対して法的手段を講じることもあります」と藪をつついたのは週プレである。

 

「なんで  ネタバレを含む感想がグレーゾーン扱いなの?」という疑問を寄せたところ、けんすう氏の記事を読んでくれという以下の回答が返ってきました。

 

kensuu.com

そもそもけんすう氏のこの記事も、意図は理解するが「知りたいのは「集英社」の基準をであり、そうでなければ訴訟の不安は払拭されず、その点についてはけんすう氏のまとめに意味はない。 

f:id:nadegata:20200915163347p:plain

けんすう氏による分類。

 右上の「詳細に書き起こし」は翻案権以下記事参照)に抵触する恐れがあるのと理解しますが、「核に関わるネタバレ」を問題視しようというのは、今件に関しては納得できません。

「作者からのお願い」「読者に求めるマナー」としてなら理解できますが、何度も言ってるように「週プレサイドは訴訟を検討している」という状況なのです。

そして、「ネタバレに配慮しているか否か」が非常にあいまい です。

 

正直、作者や作品を守りたいという気持ちが前に出過ぎて、それありきでそこからロジックを組み立ててませんか?

有象無象の読者よりもクリエイターサイドを守った方が業界の利益になるという判断なのかもしれません。

ですが、不当な扱いを受けているという消費者の訴えを、生産者はおろか「生産者を支持する消費者」が抑圧しようとする態度は、まっとうな界隈の行いとは思えません。

「あなた方のそれは忖度では」「忖度を僕らにも押し付けられても受け入れられない」「僕らの怒りを矮小化するな」と言いたい。

 

スクショの濫用の禁止は理解し、受け入れられています。

求めていることは、

  • 「文章のみのネタバレを訴える」という無理筋な宣言を撤回すること。
  • 「訴える可能性のあるネタバレとはこういったもの」という基準を明確にすること。
  • 「この感想はネタバレの基準に触れてしまうのではないか」という読者の不要で不毛な不安を払しょくすること
  • 読者のこうした不安を、無視してこちらの受け取り方の問題にして、ないがしろにする、こうしたことをしないこと。
  • 読者をないがしろにしないこと

そんなに難しいことを求めているとは毛頭思えません。

 

9/16追記

この記事について、ねとらぼの記事を書いた高橋氏@kk_info2 id:kingworldにコメントを寄せられたので、公平を期すためにこちらにも転載しておく。 

 

 

 

てっけん氏と多根氏のやりとりについては以下にまとめた。

 

togetter.com

芳文社セールヤバいね

 

 

という話。

 自分が興味のある数年前の漫画中心ですが、現行作品も普通にある。

 チェックするといいですよ。

 以下自分の好みに偏ってますが一部紹介。

プログラム勉強 リンク

https://prog-8.com/

HTML、CSSの基礎を学ぶ

https://dotinstall.com/

知りたい内容を動画で見る

https://media.tomosta.jp/2019/05/13/345/

必要内容ごとの教材

https://qiita.com/

質問箱

https://www.nnn.ed.nico/pages/programming/

N高講座

 

PS4が2万

アフィを貼るだけの記事

 

automaton-media.com

スーパーファミコンが3000円安くなるクーポン券より強いやつじゃん…

アイアム今買ったのでなんかサクッとできるオススメ教えてください

(スプラ大好きっ子なので疲れた時に寝転んでできるような奴が好ましい)

天草らめイラスト添削問題とPixio Japanについての忘備録

スプラトゥーン界隈の炎上はアーカイブ性が低いのでまとめておく。

  • なにがあったのか

 スプラトゥーンでは、個人が参加者を募って大会を開くことがよくある。

その際、大会を盛り上げ、参加者を集める目的で、上位入賞者にイラストを提供する文化が根付いているが、その際のトラブルも多々見られる。

今回の件もその一例となった。

今回告発することになった絵師は、友人が主催する大会を協力するために無償でイラストを提供した際、過度な修正要求赤ペン先生爆誕な事態に陥った。

 告発した絵師側のツイートは現在削除済み*1で、反省文の方はこちら

  • 天草らめとは何者か

いわゆるバーチャルVチューバー。本人の肩書だと「バーチャルプロゲーマー」。

www.youtube.com

天草らめ (@Rame_Amakusa) | Twitter

とはいえ、You Tubeのページからはろくに配信活動している様子が見当たらず、Vとしてどの程度の活動規模があるかよくわからず。

Twitterでの活動は多くみられるので、そっちが主軸なのかなと。

  • Pixio Japanとの関係性

そんな彼には、Pixio Japanという企業がスポンサーとなっていて、

またPixio Japanが運営するプロゲーマーチームの監督を務めている。  

 https://www.pixiogaming.jp/esports

 チームメンバーの募集には天草らめが広告塔になっていた。

ギア配布企画でホイホイ引っかかってくれる与し易そうな人実力者と繋がるのも、チームメンバー探しの一環だろうか。

 スポンサーの商品を紹介する。社員と親しい。

 元々プロゲーマーだったらしい。

 

 Pixio Japanにはスポンサーとしてこの件に対する質問が寄せられ、以下のように応答している。

天草らめについて、企業があのような性格に問題のあるような人をスポンサーするのは問題があると思います。企業としては | Peing -質問箱-

 

ご質問の内容について、話題になったそもそもの内容が公にするべきものではなく、個人間で解決すべきものであり第三者が関わるべき内容ではないと判断しております。

 以下僕の私見

スプラトゥーン界隈は、有志の大会における運営など、善意によって成り立っている場面が多く、そこに迷惑をかける行為をするものは「厄介者」のレッテルを張られ、敬遠される傾向にある。

界隈にターゲットを絞った「スプラトゥーン特化型Vチューバー」が、よりによって界隈から敬遠される「運営サイドさんへの迷惑行為」を行うって、今後の運営に関してどういう青写真があるのか不思議に思っちゃうね。

どんな判断や、金をドブに捨てる気か。

そして、ゲーミングモニターを販売してる企業が、その顧客層にリーチするためにスポンサーになってる、親密さからして運営そのものにかかわっているのかもと思ったりしますが、そんなVチューバーが、わざわざ顧客層に不興を買う態度をとって、それをふわっとしたお叱り(質問箱での回答)に留めるのも、不思議な対応だなぁと個人的には思います。

 

何はともあれこの件は一応沈静化したっぽいわけで。

スプラトゥーン界隈が平和であるといいですね。それではマンメンミー。

 

 

*1:「晒し行為」に対する批判が寄せられたため、とのこと