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

ブログBlog

WWDCが終わって

WWDC2013が終わったわけですが、予定通りiOS7の発表があり
予定通りデザインが一新する事になったわけですね。
iOSのバージョンアップは私らデベロッパーを苦しめるわけで、
秋になるのが非常に怖いです。。。

ハードウェアでの大きな発表はMacProくらいでしょうか。
あまり期待していなかったのですが、iPad miniのretina版が出たら
買おうと思ってたのですが、今回は発表されませんでした。

MacOSは新しい世代になるらしく、結構な改良が施されているようです。
全体的に最適化され、省電力技術も導入されるようで
こちらはとても楽しみにしています。

てっきりiPhone5Sの発表があるんじゃないかと思ってたのですが
登場する様子がこれっぽっちもなかったので
私は今週末にiPhone5へ機種変更してしまいそうです。

そういえば、あのロゴマークの意味はなんだったんでしょうか。

Share on Tumblr

Tweet

投稿者 staff
投稿日: 2013/06/11
カテゴリー日常 / プライベート
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
カテゴリー技術 / デザイン / 制作