webサイト制作の勉強 | web-sync

webサイト制作の勉強を2014年8月後半から始めました。このページはその履歴を残すために作成しています。

ジョナサン・アイブ氏のインタビュー

ジョナサン・アイブ氏のインタビュー。

私は、製品をデザインするとき、
それがどんな見栄えであるべきかを考えるより前に、
それが何のために必要で、どのように機能し、
それにはどのように作るべきかについて考えます

 

Appleの成功は、純粋さと完璧さを求め続けた勝利です

勉強になる。


(CSS3)Keyframe animationメモ

animation-name: ****; /* keyframe名 */
animation-duration: 1s;/* アニメーションにかける時間 */
animation-iteration-count:infinite;/*infiniteで無限ループ */
animation-timing-function:ease-in-out;/* イーズインアウト */
animation-direction: alternate;/* alternateにするとアニメーションが反復 */
animation-delay: 0s; /* 実行までの待ち時間 */


CSS3リファレンス

(HTML)audioタグ

audioタグを始めて使用してみました。

とても簡単でした。

HTML5/埋め込み/audio要素 プラグインを使わずに音声を再生する - TAG index Webサイト

 

それよりも、サンプルの音をauditionで編集する作業の方が難しかった。

元のデュレーションの無音の部分を増やしたかったのだが、はじめてauditionを使用したので、使用方法が全く分からず苦戦しました。意外に出来るだろうとおもっていたのですが、少し時間がかかかりました。

 

結果的には、とりあえず、挿入メニューから無音を入れることが出来ました。

 

(Photoshop)スクリプトでの書き出し時の失敗

レイヤー毎に分けられているそれぞれの透過PNGの画像をスクリプトで書き出し、HTMLに配置した。(画像には透明部分の余白が含まれている。)

HTML上で確認すると、画像間の間隔がおかしい。設定したものと異なっていることに気付いた。原因が不明だったので、先生に聞いてみた。

どうやら、スクリプトで書き出すと、設定した透明部分の余白は無視され、コンテンツがある部分のみの画像になってしまうらしい。(例えば、facebookアイコンの「f」以外は透明の画像の場合は、「f」部分のみの縦長の画像になってしまう。)

ということで、同じファイルの別々のレイヤーから、それぞれの画像を書き出す場合は、手間だが、一つずつ処理していくこととする。

(mac)何もしていないのにファンが回る

mac osを使用中、何もしていないのに、ファンが回り出した。

CPUは70度を超えており、ファン音もうるさい。

アクティビティモニタを起動するも、原因は分からず。helpdというのが原因?

ということ程度しか分からなかった。

SMCリセットかPRAMクリアで治るだろうと思って実行したが、結局同じ。

しばらくして、画面右上を見ると、Sporlightの画像がいつもと異なっていることに気づいた。f:id:web-sync:20141106180848j:plain

クリックしてみると、検索用のインデックスを作成していたために、macが稼働していたらしい。インデックスの作成が終わると、いつものmacに戻りました。

 


Intel-based Macs:SMC (システム管理コントローラ) のリセット - Apple サポート

 


OS X Mavericks: コンピュータの PRAM をリセットする

(Bootcamp)Google日本語入力の切り替え windows8

Bootcamp上でのwindows8(おそらくwindows7も)では、macキーボードの英数とかなでmacの様に言語の切り替えがデフォルトではできなくて、ストレスが貯まります。

検索したのですが、なかなかgoogle日本語入力版の解説がなかったのですが、ありました。以下のリンクを参考にしました。これでスッキリ。

 

Bootcamp 言語入力切り替え。

Wix / Googleアナリティクス

WixはJimdoと異なり、Googleアナリティクスに登録するには、プレミアムプランに入らないといけないんですね!


Wix サイト上で「Google アナリティクス ID」を設定する | サポートセンター | Wix.com

Wixでサイト制作

以前に登録していたWixでサイトを作りました。

作ったといっても、何も書いていません。

あるのはテンプレの内容のみ。

はてなブログRSSを利用して表示させたかったのですが、HTMLコードを記述しなければならず、本日は分かりませんでした。改めてチャレンジします。

以下がURL

上下のWixの広告が目立って邪魔。

http://web-sync.wix.com/

f:id:web-sync:20141028002634p:plain

 

JavaScript 1から9までの自然数をランダムで出力する

JavaScript記述時に、1から9までの自然数が必要となった。

迷ったので、念のため試してみた。

結論は、

Math.floor(Math.random()*9)+1

が正解であった。

まとめると以下のとおり。

Math.floor(Math.random()*9)+1:1〜9
Math.floor(Math.random()*9):0〜8
Math.floor(Math.random()*10)+1:1〜10
Math.floor(Math.random()*10):0〜9

以下は出力結果である。(各15個程度出力)

var i=Math.random();
console.log(i);
0.5875991797074676
0.32728011161088943
0.30932005075737834
0.383993118070066
0.37381656537763774
0.31037508975714445
0.9615578223019838
0.4850213855970651
0.5555686550214887
0.8442806997336447
0.6388768241740763
0.7833450806792825
0.6950439556967467
0.9969889421481639
0.8213641117326915
0.40059260721318424
0.14299040380865335
0.9739646415691823
0.9985122727230191
0.911581213353201


var i=Math.random();
var j=Math.floor(i*10)
console.log(j);
8
8
4
2
5
2
3
3
2
0
7
2
2
0
1
5
7
7
5
3
6
0
2
5
9
7
6
8
3
3

 

var i=Math.random();
var k=Math.floor(i*9)
console.log(k);
2
0
6
3
1
1
8
4
5
4
1
5
5
6
6
6
7
8
1
1
3

 

var i=Math.random();
var l=Math.floor(i*10)+1
console.log(l);

8
1
2
3
3
1
5
5
4
10
9
1
10
6
10
1
10
7
1
4
10
3
5
3
5
7
2
8
10
6
3
2
4
6
8
8
8
4
7
5
8


var i=Math.random();
var m=Math.floor(i*9)+1
console.log(m);
8
3
5
3
4
2
9
4
9
7
9
1
3
2
6
7
6
5
5
7
6
4
3
5

Sublime Text AutoFileNameのheightとwidthの補完を無効にする。

SublimeTextのプラグインであるAutoFileNameを使用し、imgなどに画像を挿入した場合、デフォルトでは画像のheightとwidthが自動補完されるが、必要ないので、無効にした。

本来であれば、Preference>Setting-userに以下の文を追記するだけなのだが、SublimeText3のバグなのか、または別の問題なのか、上書きしても反映されずに消えてしまっていた。

"afn_insert_dimensions": false,

ということで、応急処置的に、以下の文をコピーして、

Preference>Package Settings>AutoFileName>Settings Default

afn_insert_dimensions": false,

に修正し、

autofilename.sublime-settingsとして、設定ファイルの置き場所に保存したところ、無事にheightとwidthの自動補完の無効化が出来た。

設定ファイルの置き場所はSublimeTextフォルダであれば、どこでも良いようだが、今回は以下の場所に保存した。

User>ライブラリ>ApplicationSupport>Sublime Text3>Packages>User

上記のライブラリフォルダには、Finderメニューの移動を選択時にOptionを押すと簡単にアクセス出来る。

(mac)便利なアプリ

Windowsの様にウィンドウをスナップするソフトを入れてみました。

毎回手動でウィンドウを調整していたので、これは便利。

以下を参考にしました。

超便利!「BetterTouchTool」を使いたおすための7つの設定。[Mac] | MacWin Ver.1.0

BetterTouchTool

(mac)2つのテキストを比較、差分を表示

HTMLやCSS,JavaScriptなどの勉強をテキストや見本に沿って勉強している際、テキストに沿って入力したにも関わらず、実行すると動作しない、ということが多々あります。

ソースコードがサンプルでついている場合は、自分のコードと1つずつ比較していくという面倒な作業が必要だと思っていました。そんな時に、2つのテキストファイル(HTML,CSSなど)を比較して表示してくれるソフトがあることを知りました。

Windows用、Mac用それぞれ、いろいろなソフトがあるようなのですが、MacXcodeの中にFileMergeというApple純正のソフトで2つのテキストの差分が視覚的に分かります。

これは便利。

 

ファイルパスは以下のとおり。

Xcode>パッケージの中身を表示>Applications>FileMerge.app

 

f:id:web-sync:20141023220525p:plain