ブログ｜生成AIを活用したSaaSサービス提供企業 - バイタリフィ社員が更新しているブログ情報です。 - Page 322

ブログBlog

JSでWebFontを後から追加して、ページ内テキストのフォントをその場で変えちゃおうぜ
Webフォントを使ったページで、Javascriptで別のフォントを後から読み込んで適用することでテキストのフォントをその場で変えちゃう実装です。
※jQuery使ってます！

まずは、<head>の中に、書き換え用の<style>を記述します。

<style id=”photo_style”></style>

ここの中身を書き換えて、ページで使うCSSに追加します。
以下がフォントの読み込み記述です。

$('#photo_style').before("<link href='http://fonts.googleapis.com/css?family=Fascinate' rel='stylesheet' type='text/css'>"); $('#photo_style').text('a {font-family: "Fascinate", cursive;}');

今回のポイントは

・<link>を追加しないと読み込まない
・.append()で下に追加でも、.text()で書き換えでも動作
・http://fonts.googleapis.com/ が吐き出す内容を直接書き出しても、フォントが読み込まれない。

です。

以下、別パターンでの動作結果です。
（※iOS5, 6 と Android2.3, 4.0で検証）

$('head').append("<link href='http://fonts.googleapis.com/css?family=Fascinate' rel='stylesheet' type='text/css'>"); $('#photo_style').text('a {font-family: "Fascinate", cursive;}');

⇒ ○ 動作する (<head>に<link>を追加、記述が後でも読みこまれる）

$('#photo_style').append('@charset "utf-8";@import url("http://fonts.googleapis.com/css?family=Fascinate");'); $('#photo_style').append('a {font-family: "Fascinate", cursive;}');

⇒ ×（cssにimportで追記では動作せず）

$('#photo_style').append('@font-face {font-family: "Fascinate";src: local("Fascinate"), local("Fascinate-Regular"), url(http://themes.googleusercontent.com/static/fonts/fascinate/v2/NnlsYos1... format("woff");}'); $('#photo_style').append('a {font-family:"Fascinate", cursive;}');

⇒ × AndroidでFont読み込まず（cssにWebFontの記述を追記では読み込まれず）

他にも方法あるかも。

_

Share on Tumblr

Tweet
投稿者 staff
投稿日: 2013/06/10
カテゴリー日常 / プライベート
もうすぐWWDC

最近、半袖が心地良いです。石川です。

アメリカで6月10日にWorld Wide Developers Conference(WWDC)が行われます。
WWDCとはアップルが毎年開催している開発者向けのイベントで
新商品の発表の場でもあります。

iPhoneやMacBook Proなどもこのイベントで発表されてきました。
今回、発表されると噂されているのは新型iPhoneとiOS7です。

新型iPhoneはiPhone5Sと言われてます。
これにはさまざまな憶測が流れています。
新しいRetinaが搭載される、Homeボタンが廃止になるなど。
個人的にはこれに関しては信憑性がないかなと思っています。

次に話題になっているのはiOS7でしょうか。
iOS7についてはティム・クック氏が発言しており、今回のWWDCで発表されるのは
確実と言われます。

今回、話題になっているのはデザイン面。
フラットなデザインになると言われています。
デザインがiPhoneの魅力の一つなだけに今回の変更は多くの関心を集めています。
フラットとは何なのでしょうか？
特徴的だったグラデーションがなくなるということでしょうか？
気になるところです。

もしかしたらこれ以外にも新しい製品が発表されるかもしれません。
6月10日が楽しみな石川でした。

Share on Tumblr

Tweet

投稿者 staff
投稿日: 2013/06/072024/04/25
カテゴリー日常 / プライベート
スイムタオル、マジ偉大

最近は汗ばむようになってきましたね。
どうも、むかいだです。

みなさん、お風呂上りにバスタオルで体を拭く前、
バスタオル以外のタオルとか使ってますか？！
わたしは、スイムタオルとかセームタオルと呼ばれる、
水泳競技用のタオルを使ってます(今使ってるのはミズノのやつです)。

スイムタオルは吸水性抜群のタオルなので、
髪の毛も水滴がポタポタ垂れたりしないくらいまで水が取れます！
身体についた水も「こんなに水がついてるのか？！」というくらい取れるので、その後はバスタオルではなく、スポーツタオルとかの小ぶりなタオルで大丈夫。
洗濯物が増えやすい時期・梅雨の時期などにおすすめです。

夏はカラッと水気が取れるので、お風呂上りにすぐ涼しくなりますし、
冬は湯冷めしちゃうのも防げていい感じです。
小さなお子さんがいらっしゃる方もいいかもしれませんね～。
使い終わりには石鹸とかで洗い、すすいで、「よくしぼって」、風通しがいいところで乾かすだけ！
(じめじめしているところに放置するとカビが生えたりするそうです・完全に乾くと、バリッバリッになるので、それも面白い…)
10分以上かかるところが、3分以下で済みますよ、ほんとマジで。

あと、髪の毛の痛みに悩んでる方にもお勧めしたい！
髪の毛が痛む原因って、髪の毛が濡れているときとそれを乾かすときなんですね～。よくやってしまいがちなのが、タオルとかで「わしゃわしゃわしゃーー」とか「ぐしゃぐしゃぐしゃーー」っとやってしまうことなのですが、これが一番よくない。

タオルで拭くなら、「しっかり押さえてあげる」「こすらない」ことが大事です。押さえるだけでも、「毛細管現象」が働くのでちゃんと水気は取れるんですよ！あと、タオルの柔軟剤の使い過ぎも水分の吸収が悪くなるのでNGです！

わたしはせっかちなので、スイムタオルで髪の毛の水分を一回拭き取ってます。面白いくらい水が出てくるので…バスタオルだけにはもう戻れません…！

興味のある方は是非お試しを～。

Share on Tumblr

Tweet

投稿者 staff
投稿日: 2013/06/072013/06/07
カテゴリー日常 / プライベート
小文字じゃダメなようです。
こんにちは
あともう少しで新しいPCが届く前に
会社のPCがお亡くなりになった伊藤です。
みなさんバックアップは常日頃取っておきましょう！

さて本題です。
ブログに書くほどでもないのですが
webページの振り分けについてハマったので自分用に書き留めます。
振り分けは一般的にjavascript、もしくは.htaccess、phpなどで行います。

今回僕はjavascriptで書きました。
リダイレクトの条件は
・iPhoneでAndroidで見たらスマホサイト！
・iPad、Androidのタブレット端末で見たらPCサイトに飛ばす！

javascriptで書くと大体下記のようになると思いますが、

// iPhoneまたは、Androidの場合は振り分けを判断 var ua = navigator.userAgent; if (ua.indexOf('iPhone') != -1 || ua.indexOf('iPod') != -1) { 　location.href = 'スマホサイトのURL';　//iPhone iPodはSPへ } if (ua.indexOf('Android') != -1) { 　if (ua.indexOf('mobile') != -1) { location.href = 'スマホサイトのURL';　//Androidにmobileが付いてたらSPへ　}else{ 　　　　　//Androidにmobileが付いてなかったらPCへ　} }

この書き方で
タブレットはAndroidで判別しAndroidのスマホの方はAndroidでmobileがあれば
スマホサイトに飛ばすのですが、Androidのスマホのリダイレクトがうまくいきませんでした。
リダイレクトせずPCページを見てしまいます・・・・。
Chromeのデバックツールで見てもエラーも出ません。

そうこう悩んでいる内にあることに気づきました。

if (ua.indexOf('mobile') != -1) {

そうです’mobile’が小文字なのです。

頭文字が大文字の’Mobile’じゃないと振り分けされないのです。
小文字でも大丈夫だろうと今まで思っていたのですが
小文字はダメなようです。

まだまだ修行が足りないようです。
また一つ勉強になりました。

ではでは。

Share on Tumblr

Tweet
投稿者伊藤博孝
投稿日: 2013/06/06
カテゴリー技術 / デザイン / 制作
youtubeのiframeをremove();しようとするとIEでバグる件
今日はw杯アジア最終予選オーストラリア戦ですね。
19：30キックオフだし定時でサクッとあがって家で観戦したいもんですね。
しかし不発弾処理もあって電車止まったりしていたしスタジアムまで行く人は大変そう。。。
WP事業部すぎやまです。こんばんは。

さて、WEBページ上にyoutube動画を埋め込むのに便利なiframeですが、変なブラウザバグ？に出くわしました。
lightbox風にページ全体を覆った上で動画を再生するという単純なもの
（ライブラリやプラグインではなくスクラッチで組んだものですが）
ですが、汎用性を持たせるためにサムネイルをクリック後にappend();したり閉じるときにremove();したりしていました。

今まで使ってきて表題のようなバグが出ることはなかったはずなんですが、最近バグが出ているのに気づきました。

IEで再生中に閉じてもiframeをremove();しているはずなのに動画が消えない！！

閉じるボタンだったり動画部分の要素は正常に消えてくれてますが、なぜか動画だけ残ってしまいます。IEだけ
正確にはソース的には消えてるけど、表示が残ってしまっている感じでしょうか。IEだけ
youtube上で一時停止とか何かしら操作しようとしてクリックするとブラウザ画面上がブラックアウトします（笑）IEだけ
怖いですねー。。。

remove();時にdisplay:none;もかけてやると動画は消えますが音だけ流れ続けます（笑）
意味がわからないですねー。。。（笑）
もう今までのソースは破棄してYouTube JavaScript Player APIの.stopVideo();使おうかと思って書いてみましたが、、、、
確かに止まりましたがIE7以下には対応していないみたいです（涙目）

もう諦めてプラグイン使おうかなーとか思いましたがこんな記事を見つけました。

ie8でyoutube埋め込みプレーヤーのバグ

IE8のみみたいけど状況は似てるしなーってダメもとで試してみたら

直った＼(^o^)／

.attr("src","");追加しただけで直った！！

たった15文字追加しただけで解消しました。ウンウン悩んでた時間を返せ（笑）

直る前と直った後でデモページ作ってみました。IEで見てやってください。
動画ソースは僭越ながら自分の卒制動画で（笑）

Share on Tumblr

Tweet
投稿者 staff
投稿日: 2013/06/042024/04/26
カテゴリー技術 / デザイン / 制作
外国語を学ぶ〜 lang8 のご紹介〜

WP部天野です。
先日、お客様先に行くと、「実はベトナム語勉強しているんです」という方にお会いしました。

いつかベトナム語ブームが来るのかなぁ・・・と思っているのですが、未だに盛り上がっている様子がありません。
※NHK教育で「ベトナム語講座」が放映されるくらいまで盛り上がって欲しいですね。

さて、ベトナム語を勉強していて思うのが、教えてくれる先生がいないことです。ベトナム人の友達に質問したりすればいいのですが、毎回だとちょっと気が引けます。

そこで、以下のサービスがあります。
http://lang-8.com/
外国語で書いた作文を添削し合うサービスで、無料で使えるのがいいです。

あと、このサービスのいい所は、添削結果が見やすい点です。複数の人から指摘が来ても、画面が見やすいので便利です。

外国語を勉強している人は、ぜひ利用してみて下さい。

Share on Tumblr

Tweet

投稿者 staff
投稿日: 2013/06/032013/06/03
カテゴリー日常 / プライベート