精神と時の部屋

金令木が 一日一回程度 頑張るところ

拡張への道#5

拡張を作る上でのアイデア書き(2017/10/10現在)

宗教芸術に共通するもの

後光

音楽

華やか

動き

緩やか

神を感じるchrome拡張に必要と思われる要素

検索ボタンが光る

後光エフェクト

検索するごとに(特定のコマンドを入れるごとに後光がさす)

検索する際に音がなる

ページが切り替わった際に音がなる

動き

ウィンドウ立ち上がり時にゆっくり立ち上がるエフェクト

画面

背景画像が空になる

拡張への道#5

拡張を作る上でのアイデア書き(2017/10/10現在)

宗教芸術に共通するもの

後光

音楽

華やか

動き

緩やか

神を感じるchrome拡張に必要と思われる要素

検索ボタンが光る

後光エフェクト

検索するごとに(特定のコマンドを入れるごとに後光がさす)

検索する際に音がなる

ページが切り替わった際に音がなる

動き

ウィンドウ立ち上がり時にゆっくり立ち上がるエフェクト

画面

背景画像が空になる

拡張への道#4

拡張を作る上でのアイデア書き(2017/10/06現在)

 

宗教芸術に共通するもの

    • 後光
  • 音楽
    • 華やか
  • 動き
    • 緩やか



神を感じるchrome拡張に必要と思われる要素

    • 検索ボタンが光る
    • 後光エフェクト
    • 検索する際に音がなる
    • ページが切り替わった際に音がなる
  • 動き
    • ウィンドウ立ち上がり時にゆっくり立ち上がるエフェクト
  • 画面
    • 背景画像が空になる

 

もう少し突き詰めようと思う

拡張への道#3

昨日の拡張

「アイコンを押すとサイト背景が緑になって音が鳴る」

 

manifest.json

{
"name":"My practice Extention 02",
"version": "0.1",
"manifest_version":2,

"description":"dotinstallの背景色を変える",

"permissions":[
"tabs","http://*/*","https://*/*"
],

"background":{
"scripts":["background.js"]
},

"browser_action":{
"default_icon":"iconkami.png",
"default_title":"My Second Extension"
}

}

 

background.js

 

chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.executeScript(null, {
"code": "document.body.style.backgroundColor='green'"

});

var myAudio = new Audio(); // create the audio object
myAudio.src = "nc87906.mp3"; // assign the audio file to its src
myAudio.play(); // play the music


});

 

本日の拡張への道

 

背景色は変えられたので次は画像を指定して敷き詰めようとした

フリー素材のラーメンの画像(jpeg)をファイルに入れ

"code": "document.body.backgroundImage='rrr.jpg'"  に書き換え

この時点でサイトの背景に変化は無いが音は鳴る状態

画像を敷き詰める命令 "background-repeat: repeat" を

入れた途端に反応しなくなった

 

明日へ続く

 

参考サイト

background-repeat-スタイルシートリファレンス

スタイルシート[CSS]/ページ全般/背景画像の並び方を指定する - TAG index

拡張への道#2

第2話「音がなる」

 

stackoverflow.com

 

参考コードを見つけてもらい、道が拓けました。

拡張への道#1

 

第一話「ドットインストール復習」

 

約1ヶ月半前にやった内容をノートを見ながら復習した

 

f:id:coralpunk:20171003111836p:plain

 

雑すぎるノートに殺意が湧いた

ステッカー

学祭で販売するステッカーを制作しました

「水没iPhobeおくやみステッカー」

f:id:coralpunk:20170927172944j:plain

何種類もの新聞のお悔やみ欄を参考にしデザインを作り上げていきました

水没させた人は誰でも使えるよう名前が書き込めるようになってます

販売価格未定

全世界のiPhoneを水没させた人に捧ぐ