NOBODY:PLACE

Vue.jsをCDN経由で読み込みつつコンポーネントを別ファイルに分ける

簡単に実装するためにVue.jsをCDNで読み込んでいるような環境で、パーツをコンポーネントに分け、かつ、コンポーネントを別ファイルにするようなとき、どうしたら良いかについてのメモ書きです。

【BootstrapVue】Navにリンクを設定しても遷移しないことがある

Navにリンクを設定するときは href でやれば良さそうな気がするんですが、実際にやってみるとルーティングが設定されていないページへのリンクは動かないようです。

【メモ】タグに独自属性を設定してjQueryで取得する

独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP
独自データ属性は、名前空間に属さない属性で、その名前は文字列 “data-” で始まり、ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字を含みません。（中略）すべての HTML 要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。

使用例

Ippei Suzuki

これを取得するには、関数data()を使うと便利です。

$('#userName').data('userId');

注意

data()は、もともとは要素にデータを付与しそれを取得するための関数で、HTMLのパースとは関係がありません。付与されたデータはjQueryのキャッシュデータとして保存されます。一方で属性を取得する関数attr()の方は、キャッシュは利用をせずHTMLを読みに行くので、この2つを同時に使うと混乱します。具体的には、atr()で更新したデータがdata()で取得出来ないなど。

$('#userName').data('userId'); //1234
$('#userName').attr('data-userId', '5678');
$('#userName').data('userId'); //1234 ← キャッシュを読み込む
$('#userName').attr('data-userId'); //5678 ← 属性を見る

その辺りは気をつけて上手いこと処理してやる必要があるようです。

参考

独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP jQueryのdata-*属性キャッシュ仕様と対策

Flickrの貼り付けコードがまた変わってた

Google Photos も始まって、いよいよオワコンのさらに一歩先へまったなしのFlickrですが、それでも一回アーカイブされた写真てのはなかなか動かせないもんで、今でもFlickrを使ってます。個人的には別にFlickrで十分なんですけど、あんまり不人気だとサービス終了するとか言い出しかねなくてびくびくしてます。まあそれはGoogleだって同じですけどね。

CSSで指定出来る色名

CSSにおける色の指定はこれまですべて「#ff0000」形式で統一してきました。理由は、

「色名指定」では柔軟な設定が出来ない（一段階濃くとか）
ブラウザに解釈を任せたくない

で、特に設定の柔軟性については、コーディングしている統合環境の補完で「aqua」「black」「brue」などの17色しか表示されないのもそう考える理由の1つになっていました。でも、違うのね、もっとたくさん指定出来る色名あるのね、というのが今回の本題です。いまさらですが知りませんでした。参考になるサイトはたとえばこちら。 CSS/HTML色見本全部で140色もの色名が色見本・RGB値と共にリストアップされています。これを見て自分がよく使っていた色が「OrangeRed」とか「DarkRed」で指定出来るんだと解ってちょっと目鱗でした。自分程度の柔軟性なんて、既に設定されている範囲の中でしかなかったです。なんとまあ。数字を細かく調整して柔軟に設定した色って、後で忘れちゃうことが結構あるんですよね……作業の効率を考えたら「色名」で設定する方のもありかなあと。特にCSSに不慣れな人が参画するプロジェクトにおいては、色を「色名」で指定すると見通しが良くなって良いのではないかなと思います。色コードやRGB値で表示される色を想像しろと言っても厳しいものがありますし。そんなことを考えて、最近は、文字色や背景色をできる限り「色名」で指定するようにしています。

【作業メモ】水曜どうでしょうのHTMLが変わった件への対応

水曜どうでしょうのオフィシャルサイトのデザインがクリスマスバージョンに変わっていますが、それに合わせて？HTMLソースが若干、変更になりました。いつぞやの変更では、本文がきっちりとdivでくくられて、もう非常に取得しやすい感じになりまして、かなり安心しておったんですが、ここへ来てtable多用&CSSって何？それ美味しいの？っていうソースに戻りまして、　　 _,._　んもー　 ( ･ω･) って感じ。まぁ、色々と事情はあるでしょうから仕方のないことなんですけどね。ただ色とか絵とか変えるのってCSSで一発でいけると思うし、そっちのが楽だと思うんだけどなーどんだけ手作りなんだろ。謎です。以上、愚痴でしたヽ(´ー｀)ノ

RSSを勝手に作る視点から見た、良いサイト。

RSSを配信してなかったり、配信されてるRSSが役立たずだったりしたときに、自分が使う用にRSSを作ってみたりしてるわけですが。

『RSSを配信していないサイト』の例

ほぼ日刊イトイ新聞 – 気まぐれカメら
今日見たら配信されるようになってました。GJ！
http://www.1101.com/rss/live/060216kimagure.xml
水曜どうでしょう本日の日記

『RSSが役立たずなサイト』の例

アメブロ全般
引用が短すぎてブログ用としては不便この上ない（ニュース用なら見出しだけでも良いけど）。
スペシャルドラマ「歓喜の歌」撮影日記
RSS(ATOM)の記述が間違ってて更新を取得できない。
1ファイルに1記事しかない。

【メモ】ラジオボタン/チェックボックスを文字列で選択する。

html

ラジオボタンとか、チェックボックスってありますよね。こんなやつ。

好き嫌いどうでもいい連絡下さい

文字列をクリックすることでこれを選択するのってよく見掛けるけど、アレどうやるんだろう…と思ってたんだけど、もの凄く単純なことだったんですね…最近知りました。 …あれ、俺だけ？妙に恥ずかしいので、恥ずかしまぎれにメモっとく。

フォントサイズの調整 – DOCTYPEの話。

あるサイトを作っていて、フォントサイズを、それまでのピクセル固定から、相対的な設定に変更してみたのだけど。 IEで見ると、ある程度の大きさで見られるのに、 FireFox（ないしはGecko）でちぇっくすると、豆粒みたいになって見にくくて仕方がない…ってことがあった。理由がよく分からなかったので、しばし放置していたのだけど、ふと思い立って調べてみたら、『互換モード』と『標準モード』のお話だった。