selectタグで詰まった話

selectタグをいじってる際,  スマホ上での見せ方で詰まったのでメモメモφ(・ω・ )

selectタグの高さとスマートフォン

selectタグを使ってドロップダウン？な選択をさせたい, といった時, なんか(表示領域)小さいね, といった一言から始まった問題.

問題点は「selectタグの領域に heightがうまくかからない端末がある」 といった現象.


ﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ ∩( ・ω・)∩ ヽ(;´Д`)ノﾀｽｹﾃ～

<select class="face_collection">
<option>ﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ </option>
<option>∩( ・ω・)∩</option>
<option>ヽ(;´Д`)ノﾀｽｹﾃ～</option>
</select><br />
<br />
<style>
.face_collection{
height: 40px;
}
</style>

PCで見ればなんら問題なくなんか太いドロップダウンメニューができるはず.
但し, このページを, おそらくAndroid4.1系のデフォルトブラウザで見ていただければわかるはず.

「別に太くなんて無いんだけど…(・д・`)」

iPhoneや Android2.x系では太くなるのに, なぜか Android4.1系では太く表示してもらえない.
また, 太くならないのはデフォルトブラウザでのみらしく,  Chromeであれば "少し"太く見える.
一体なんなんだか…('A`)

ﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ ∩( ・ω・)∩ ヽ(;´Д`)ノﾀｽｹﾃ～







まぁ font-sizeを大きくしてやれば, それに合わせて大きくなるんですがね( ´_ゝ｀)

cssのアニメーション

jQueryのfadeやらなにやら, アニメーションを表現するものの中には機種依存を起こす物がちらほら. そんななか, 「cssの animationを使えばなんとかなるよー」ということなのでやってみた.

cssでアニメーション

1. やりたいこと

いわゆるフェードイン/アウト. しかしjQueryの.fade系は機種依存起こすかも, だとか. なので cssの animationで, cssのプロパティの opacityを操作する. 

( ﾟдﾟ )

おわかりいただけただろうか…

2. アニメーション内容の宣言

いじるのは css. jsはあくまで addClassしてクラスを切り替えるだけ. この切り替えられたクラスに合わせて cssで表現してやると, 再利用性は格段にアップするはず.

用意するコードはいつもとはちょっと異なり, 「アニメーションの動作内容」の部分と「作ったアニメーションを使うことを宣言する」部分に分けられる. 要するにアニメーションメソッドを作って, それを呼び出す, みたいな流れ.

<div class="testface">
( ﾟдﾟ )
</div>

上の例の場合は, まずはフェードするアニメーションを作成する.

@-webkit-keyframes anime1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes anime1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

注意点としては, レンダリングエンジンごとに用意してやる必要があること. Chromeや Safariなら webkit. firefoxならmoz.
上が webkit用, 下は moz用の宣言. 中身を変えてしまうと当然動きも変わってしまうから注意. コピペ推奨.
1行目がレンダリングエンジンの設定と そのアニメーションの名前. 名前は自由に設定できるので, わかりやすい名前を付けてやろう.
2行目から4行目は, 開始の状態. この場合は 「opacity: 0;」透明度100%状態からスタート, となる.
そして5行目から7行目が終わりの状態.  「opacity: 1;」透明度0%状態となり, 完全に出現した状態となる.
この fromと toは, それぞれ 0%, 100%と書くこともでき, また 33%等, 途中の状態も設定できる.
これでアニメーションの内容は宣言できた. 割と簡単.

3. アニメーションの実行を宣言

アニメーションを作ったら, それを付与してやる. この時いろいろプロパティがあり, これがまたいろいろ悩ませてくれる. 

.testface{
    color: red;
    -webkit-animation: anime1 2s linear infinite alternate;
    -moz-animation: anime1 2s linear infinite alternate;    
}

color: red;はキニシナイ. webkit, moz用に2つ設定. 内容は同じ.
最初の anime1は 2.で設定したアニメーションの名前.  ここでどのアニメーションを使うか宣言する.
2s は「2秒」. アニメーション1周期を何秒で描画するか, を設定する.
linearはアニメーション方法の指定, この場合は fromから toまで一定の速度で変化する方法. 他にもいろいろ.
infiniteは描画回数. 単に 6など数字を入れればその回数描画してくれる. この場合は無限回の指定.
alternateはアニメーション方向. 要するに fromから toへアニメーションするか, その逆に toから fromへアニメーションするか, といった設定. alternateは「奇数回目は from→ to, 偶数回目は to→from」という特別な設定. 例にあるとおり, from→ to→ from→ toと, アニメーションの設定を行き来してくれる.
他にも, アニメーションの開始を遅らせるプロパティなども. これらをセットしたら準備OK.


ちなみに opacityをいじっていたところを marginをいじるように変更すれば, こんなものもcssだけでできる.↓

ガクガク (((( ﾟдﾟ ；)))) ブルブル

参考

javascriptでもEnum型

以前javaのEnumをまとめたけど
javascriptでもやる機会があったので

javascriptでもEnum型

やり方は簡単.

var counter = {
    a: 0,
    b: 1,
    hoge: 10,
}

シンプル. これを呼びだすのも,

console.log("counter is " + counter.a);
// or
console.log("counter is " + counter["hoge"]);

なにがおいしいかって, 後から追加も楽なこと.
たとえば,

<div class=".hoge">
    <ul id="animal">
        <li></li>
        <li></li>
    </ul>
    <ul id="fish">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

なんていうのがあり, 各 ulの liを順番に表示, 非表示にするようなギャラリーが作りたい, なんて時. 順番に回すのはいいけれど, 今どれが表示されているのか管理したい！でもこの後 ulがどんどん増えて, counterに名前なんて付けてられない！なんて時. あるのかね(・ω・`)
.

$(".hoge ul").each(function(){
    var idName = $(this).attr("id");
    counter[idName] = 1;
});

だいたい想像はつくはず. これで,

    console.log(counter.animal);
    console.log(counter.fish);

でそれぞれのカウンターが用意される. 応用するといろいろできるはず！




ちなみに

window.location

なんてのもこれだったりする.

Selectタグの見た目を変える

なんか面白いものを見つけたので

<select>の見た目を変える

1つめのoption2つめのoption3つめのoption
コイツの見た目を変えたい！というお話.
使うプロパティは

appearance

こいつを使う.
とりあえずボタンにしてみる

select{

    /* 見た目をinputのtype=buttonに */
    -moz-appearance: button;
    -webkit-appearance: button;
    appearance: button;

}

この設定をしてやると…
1つめのoption2つめのoption3つめのoption
となる. あとはボタンと同じようにデコレーションしてやればいい.
ただPCで見ると, たまに選択肢の描画がなんかおかしい. スマホならそれぞれのダイアログが開くので気にはならないかと.

ちなみに

select{

    /* 見た目をcheckboxに */
    -moz-appearance: checkbox;
    -webkit-appearance: checkbox;
    appearance: checkbox;

}

とかしてみると…

1つめのoption2つめのoption3つめのoption

これはひどい…('A`)

cssで吹き出し

なんか面白かったからつい…
というかどういう必要性に駆られて生まれたのかが気になる(・ω・`)

cssで吹き出しを作ろう

たとえばこんな感じ

('A`)




Σ('A`)

構造はこんな感じ

<style>
.fukidashi_outline{
    padding-bottom: 10px;
    position: relative;
}
.fukidashi_msg{
    position: relative;
    background-color: #ccc;
    height: 50px;
    width: 100px;
    color: #3a3a3a;
    padding: 5px;
    border-radius: 10px;
}
.fukidashi_msg:after{
    content: '';
    position: absolute;
    border-top: 10px solid #ccc;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    bottom: -9px;
    left: 6px;
}

</style>

<div class="fukidashi_outline">
    <div class="fukidashi_msg">
        たとえばこんな感じ
    </div>
</div>

メッセージ本体部と, 周りとの距離を測る部分, そこに吹き出しの三角形部分を作る cssを足して吹き出しに見せる. それだけ.シンプルです.

キモは15～23行目. ここで疑似クラスの :afterを用いて三角形を作り, 角を丸めた長方形の下にきれいにつくように配置する.

要するに三角形の位置と向きななわけだ

('A`)

Σ('A`)

三角形を横にするのもシンプル. 斜線を leftと rightで作っていたのを topと bottomに, 上底?を書いていた borderを border-leftにしてやり, 後は位置調整.

<style>
.fukidashi_outline2{
    padding-right: 12px;
    position: relative;
    display: table-cell;
}
.fukidashi_msg2{
    position: relative;
    background-color: #ccc;
    height: 50px;
    width: 100px;
    color: #3a3a3a;
    padding: 5px;
    border-radius: 10px;
}
.fukidashi_msg2:after{
    content: '';
    position: absolute;
    border-left: 10px solid #ccc;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    top: 10px;
    left: 110px;
}

.fukidashi_set2{
    display: table;
}

.fukidashi_chara2{
    display: table-cell;
    bottom: 10px;
}
</style>

<br />
<div class="fukidashi_set2">
    <div class="fukidashi_outline2">
        <div class="fukidashi_msg2">
            要するに三角形の位置と向きななわけだ
        </div>
    </div>
    <div class="fukidashi_chara2">
        ('A`)
    </div>
</div>

応用するとこんなことも…

('A`)

参考: CSSだけで簡単に吹き出しを作成する方法4つ！

first-childとかnth-last-child(x)とか

残業万歳！
眠い！∠( ﾟДﾟ)／気が付いたら6月だ！

cssで詰まったからメモメモφ(・ω・ )

疑似クラス:first-child系を用いた「絞り込み」と勘違い

何番目の要素, ってやつ

<div id ="parent">
<div class="child_node">1番目</div>
<h5>タイトル1</h5>
<div class="child_node">2番目</div>
<div class="child_node">3番目</div>
<h5>タイトル2</h5>
<div class="child_node">4番目</div>
<div class="child_node">5番目</div>
</div>

たとえばこんな構造だったとき. #parentの最初の要素を指定したい！なんて時に使えるのが疑似クラスの :first-child. 読んで字のごとく「最初の子」を指す. また, 逆に「最後の子」を指す :last-childなんてのも.

<style>
#parent{
    background-color: blue;
}

#parent div:first-child{
    background-color: red;
}

#parent div:last-child{
    background-color: red;
}
</style>

試しにこんなスタイルを当ててみる.

1番目

タイトル1

2番目

3番目

タイトル2

4番目

5番目

とまぁ色が変わっているのだが, 問題はここから. 「前から x番目の子」を指す :nth-child(x), 「後ろから x 番目の子」を指す :nth-last-child(x)など, 順番を指定し始めると始まる勘違い. たとえば, 「一番最後の h5を指定したい」, 「上から3番目の child_nodeを指定したい」と思った時に,

<style>
#parent .child_node:nth-child(3){
    background-color: green;
#parent h5:nth-last-child(1){
    background-color: green;
</style>

と正直に指定すると…

1番目

タイトル1

2番目

3番目

タイトル2

4番目

5番目

Σ('A`)
"2番目"に色がつくわh5に色はつかないわ散々なわけで. 原因は出力を見ればだいたいの想像はつくかと.
要するに

#parent .child_node:nth-child(3)

とは,
「id=parentの子の, class=child_nodeの中での3番目のもの」ではなく,
「id=parentの子の中で3番目の子で, かつclass=child_nodeなら」という,
ある意味では確かに「絞り込み」を行っているみたい('A`)ソリャネェヨ

なので結局, 「x番目の子」という, 構造が変わると効果がなくなる不安定な絞り込みには変わりないものだったりするorz.




日本語と英語の解釈の違いみたい(・д・`)

Unityのエディタ拡張 -基礎

なんかUnityではエディタが拡張できることも売りの一つらしい.
そんなこと言われたら手を出すしかないじゃない+(・ω・0)*

Unityのエディタ拡張 -基礎

まずは拡張ウィンドウ作成から

1. 準備

ほとんどいらない. Assetsの下に「Editor」ディレクトリを作るくらい. ちなみに他のところでも, 「Editor」ディレクトリにあれば動くらしい. まぁわかりやすくまとめておくのが吉. 

2. コーディング

他の普通のコードと同じようにC#で書ける. 

using UnityEngine;
using UnityEditor;
using System.Collections;

public class ExpansionPrac : EditorWindow {

 [MenuItem("Window/My Window %i")]
 static void Init(){
  ExpansionPrac window = 
   (ExpansionPrac)EditorWindow.GetWindow(typeof(ExpansionPrac));
 }
}

こんな感じ. なにも表示されないウィンドウを出すだけ.

とりあえず EditorWindowクラスを継承. その際には UnityEditorクラスのインポートを忘れずに.

問題は 7行目. 他ではあまり見ない [ ] を使った宣言. MenuItem()により, メニューに追加する.
引数はその際の配置.　この場合はメニューの Window → My Windowをクリックで表示されるようになる. 最後の %i はなんとショートカットキー. この場合は 「ctrl + i」. 他と被ってないか注意.

こうなります.

クリック後, Init()の中でウィンドウを用意する.  EditorWindow.GetWindow()でウィンドウを呼び出してる(らしい). 型はこのクラスの型. このクラス名がウィンドウのタブに出てくるので注意.

3. 実際に呼び出せるようにする

しかしゲームに関係ないのにいつコンパイルするんだろう…とか思ってたら

シーンを再生/停止したとき

スクリプトを編集したとき

にやってくれているらしい. 道理でスクリプト編集から戻ってくるなり「エラーあるぞｺﾞﾙｧ!щ(ﾟДﾟ#щ)」とか怒ってくれるわけだ…
なのであと必要な手順は「Editor」ディレクトリの下に配置しているかということ. ちなみに自分は
Assets/Scripts/Editor/ExpansionPrac.cs
と配置して起動を確認. ただ他でEditorを作成→Scriptsディレクトリ以下に移動 した直後はコンパイルが通っていないのか起動しません(・ω・`) 一度 再生→停止 するなどしてコンパイルしてもらうといいかも.

4. 中身を作ってみる

呼び出してはみたものの…

さみしい(・ω・`)
なので中身を適当に入れてみる.

bool isEditable;
bool childToggleBool = true;
float childSliderFloat = 2.22f;
 
void OnGUI(){
 GUILayout.Label("DispTest", EditorStyles.boldLabel);
 int sw = Screen.width;
 int sh = Screen.height;
 isEditable = EditorGUILayout.BeginToggleGroup("ToggleGroupTest", isEditable);
 childToggleBool = EditorGUILayout.Toggle("childToggle", childToggleBool);
 childSliderFloat = EditorGUILayout.Slider("childSlider", childSliderFloat, -10, 10);
 EditorGUILayout.EndToggleGroup();
}

まさかの OnGUI();
シーン中で使ったようにGUILayout()が使用可能. EditorStylesなんていうフォントなどの仕様のクラスも.
また 7, 8行目のように, カスタムウィンドウの幅/高さを取得することも可能.

9行目からがちょっと独特. EditorGUILayoutなるクラスを使える. 通常よく見る Inspectorなんかで使われている表示はここから取り出せるっぽい. Unityリファレンスマニュアルにある通り, とりあえず Toggleグループを追加してみる. グループの中身になるものを 10, 11行目に宣言し, 12行目の EndToggleGroup()でグループの宣言を閉じる. 閉じなくても今回は問題なく動くのだが, 当然閉じないといつまでもグループの中身を足し続けることに…

10行目は子にもトグルボタンをつけてみる. 特に何もなし.
11行目はスライダ. 3,4つ目の引数がスライダの下限/上限. ちなみに, ここの引数を 7行目で取得した swを使って, -sw/swと入れて, ウィンドウサイズを変えてみるとちょっと面白いことにﾍ(ﾟ∀ﾟﾍ)

ちなみにフィールドにあるのがトグルやスライダの初期値になります.
これを 2. で作ったコードに追加してコンパイルしてもらうと…

出てきた！+(ﾟ∀ﾟ0)*



ちなみにコード全景.

using UnityEngine;
using UnityEditor;
using System.Collections;

public class ExpansionPrac : EditorWindow {

 [MenuItem("Window/My Window %i")]
 static void Init(){
  ExpansionPrac window = 
   (ExpansionPrac)EditorWindow.GetWindow(typeof(ExpansionPrac));
 }
 
 bool isEditable;
 bool childToggleBool = true;
 float childSliderFloat = 2.22f;
 
 void OnGUI(){
  GUILayout.Label("DispTest", EditorStyles.boldLabel);
  int sw = Screen.width;
  int sh = Screen.height;
  isEditable = EditorGUILayout.BeginToggleGroup("ToggleGroupTest", isEditable);
  childToggleBool = EditorGUILayout.Toggle("childToggle", childToggleBool);
  childSliderFloat = EditorGUILayout.Slider("childSlider", childSliderFloat, -10, 10);
  EditorGUILayout.EndToggleGroup();
 }
 
}

今回はここまで.
次はGUI操作でちゃんと編集できるようにしたいなー+(・ω・0)*



参考 : Unityリファレンスマニュアル
         MK Games
         EditorGUILayout