2013年8月6日火曜日

iPad でsafariのツールバーを表示させない方法 

展示にiPadを使用するので safari の使用制限をするための方法を調べたのでメモ。


ツールバーを非表示


ツールバーを表示しなければ大丈夫かと。
view prtなどは設定してあるとして以下の手順。

HTMLをいじらないとダメみたい。

1.ページのhead内にmetaタグを埋め込む

【meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”】
ステータスバーの指定
透明を指定しています。
【meta name=”apple-mobile-web-app-capable” content=”yes”】
フルスクリーン
defaultはnoです
他にも細かい設定ができるようです。引用元を参照のこと。

2.表示したいページを「ホーム画面に追加」

3.ホーム画面上のアイコンをタップしてページを起動

4.ツールバーが非表示になっている


ちなみにsafariを起動すると通常の表示になります。
非表示が有効なのは上記手順で起動した場合のみ


引用、参考は以下

inazumatv.com
Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定
http://www.inazumatv.com/contents/archives/7882


ホームボタンの無効化


ついでにホームボタンも無効にしないといけないと気が付いたいので調べてみた。

これはアクセスガイドを設定する事で、単一のアプリのみが使用可能になる(safariも可)

ホームボタンを押すたびに設定したパスコードを要求されるので、パスコードを知らないと起動しているアプリしかつかえない。

アプリの画面上で触られたくない箇所の設定も可能。

ぬ、ならばsafariのツールバーも隠さなくてもこの設定でよかったか。。
まぁ、ツールバーは見えていないほうが、展示にはよいので、これは良しとしよう。

アクセスガイドの設定方法はこちらで丁寧に説明されていました


iPhone女史
【iOS 6】こどものいたずら防止に便利!画面タッチを制限できる新機能のアクセスガイド☆
http://www.iphone-girl.jp/2012/11/233569/


2013年5月20日月曜日

Excelのerror表示


数字を文字列として扱うため「セルの書式設定」で文字列扱いしているのにエラー表示(左上隅の緑の三角)が出て鬱陶しいのでそれを表示させない手順。

Excel アイコンをクリックして「Excelのオプション」を選択。
左ペインの「数式」を選択。
「エラーチェックルール」の「文字列形式の数式、または云々」のチェックを外す。

表示されなくなりました。

(Excel 2007、ずっと放置していたのでスッキリ)

2013年4月20日土曜日

WP 投稿本文の取得

投稿した本文の表示の量を制御したいとき。

こちらのページを参考


WordPressの本文抜粋表示(the_excerpt)で文字数をコントロールする
blog:WordPress de SEO をやろう!


メモ的に簡単に

■単純に抜粋を表示(110文字と固定されている)

<?php the_excerpt(); ?>


■文字数をコントロール

<?php echo mb_substr(get_the_excerpt(), 0, 30); ?>
mb_substr(文字列,何文字目から取り出すか,何文字取り出すか)

でもこれで本文表示させると、リンクをつけた文字列のリンクが消えてしまっている。
リンクを保ったまま本文を表示させる方法を考えなければ。。。

2013年2月28日木曜日

iTunesの予約確認


David Bowieのニューアルバムが発売されると聞いてiTunesですぐに予約をしたのだが、予約確認をどうすればいいのかわからなかった。

アルバムがリリースされるとお知らせメールがくるのかと思っていたら、asahi.comでアルバムリリースの記事が。

http://www.asahi.com/culture/reuters/RTR201302270068.html?ref=comtop_fbox_u

記事では2013年2月26日発売となっている。。今日は2月28日。
何もお知らせなし。

アルバム購入にいけば予約済みの表示があるかと思ったらなし。
いろいろいじってみて、iTunes画面左上のメールアドレスをクリックしてアカウント情報を見たら、「設定」に「予約注文」の項目があった。
「予約注文の管理」をクリックすると予約中のアイテムが表示された。

それによるとリリース予定日は3月13日
記事はなんだったのだろう。。

まぁ、まだ発売されていないのと予約がきちんと出来ていたのがわかってよかった。

※追記
記事よく見たら日本発売は3月13日と書いてあった。


2013年2月25日月曜日

reset.cssについて

Yahoo!のリセットCSSを使ってみて気になったこと。
(しょーもない話)


<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.6.0/build/cssreset/cssreset-min.css">

cssreset-min.css では

html {color:#000;background:#F00}

という指定がされている。
このリセットCSSを使用した場合


html,body {height:100%;}

と設定したとき、ウィンドウサイズよりコンテンツが広く、隠れているコンテンツを表示させるためにスクロールした時、新たに表示される画面の背景が白くなる(背景が途切れているように見える)




※そもそも height:100% を設定するのはウィンドウサイズいっぱいにリキッドレイアウトでコンテンツを配置したい(フッター要素を画面下部に固定したいとか)場合なので今回は必要でなかった。


body の指定 height:100%; を無くせばスクロール時の白い背景はでなくなるが、ウィンドウサイズを広げたとき、コンテンツの縦がウィンドウサイズより小さい場合、広げた領域に background:#F00 の影響がでる(白くなる)




cssreset-min.css が修正できる状態なら

html {color:#000;} 

として背景指定を無くせば body での指定が有効になる。

修正できない場合は 別CSSファイル内で backgroundプロパティを上書きする。

html {color:#000;background:none;}


その上で body の設定を記述する。


body {background:#d0d0c8 url(../img/back.png) fixed no-repeat center top;}



2013年2月21日木曜日

「きのう何食べた?」インデックス

「きのう何食べた?」のレシピを時々参照するのであるが、どこに何が掲載されたかいつも探すので、頻度の高いものをインデックスしておく。


■ときどきつくるので、その都度確認するレシピ

たまねぎたっぷり豚の生姜焼き 4巻

セロリと牛肉のオイスター炒め 2巻

肉豆腐 3巻

キャペツとあさりベーコン 3巻

煮込みハンバーグ 4巻




■こっちはもう見なくてもいいかなと思うけどそれなりの頻度で作るので

ナポリタン 4巻


ながねぎのコンソメ煮 4巻

2013年2月13日水曜日

jQuery winndowの右端までスクローラが移動したら最初にもどる



横スクロールでwinndowの右端までスクローラが移動したら最初にもどってループする
(左に移動して、コンテンツの最後に移動はしない)

コメントがすごいくどいけど、意外とどこに書いたらいいの?という人もいるだろうし、いちいち説明が必要な人もいると思うので(自分だ)、備忘録として。


<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>


<script type="text/javascript">

$(function() {

//ページの幅を取得 
var contentsW = $(document).width();

//スクロールされたときに関数実行
$(window).scroll(function(){

//ウィンドウの幅を取得
var windowW =$(window).width();

//ウィンドウ内のスクローラー位置
var sPos = $(this).scrollLeft();

//ウィンドウの幅+スクローラーの量、※スクローラーは隠れているコンテンツの幅まで移動する 
var allwidth = windowW + sPos;

//スクローラーの位置が画面幅を超えたらページを戻す
 if(contentsW <= allwidth) {
  $(window).scrollLeft(0,0);
 }   //if文閉じカッコ
 }); // スクロールされた時の関数の閉じカッコ

});  //全体の閉じカッコ

</script>

</head>

2013年2月9日土曜日

Lightboxで記述したtitle属性をツールチップで表示させない

サムネイル画像をLightboxの機能を使ってクリック時に拡大表示したとき、title属性に記述したテキストがキャプションで表示される。

その画像にマウスオーバーしたときにツールチップでそのテキストも表示されてしまう。
簡潔なものならいいのだけど、ある程度長い文章になると、見苦しくなってしまう。



それでいろいろと調べてみた。

jQuery tooolでツールチップのカスタマイズできるので、これでなんとかなりそうかと思った。
jQuery tools,jQuery tools日本語リファレンス,日本語リファレンス

ツールチップ表示自体はいらないので、opacity:0 で表示を見かけ上隠してしまえはいいかと考えたのだが(あまりいい方法ではないのは承知)、title属性データを横取り(?)してしまうらしくLightboxのキャプション表示自体もなくなってしまったのでボツ。

Javascriptでブラウザの機能を制限できないかと思ったが、これも該当する手段を見つけられず。

それでも色々検索していたら、こんなシンプルな解決方法が見つかった。

around design
Lightboxやfancyboxのtitle属性をポップアップさせない

画像の imgタグ に title属性をつけると、そちらが優先的に表示される.


だがimg属性のtitleを空欄にしてしまうと aタグのtitle属性が表示されてしまう。



スペースを入れておくと空欄の小さいツールチップが表示される(これもちょっと不審な感じ)。



長い文章が表示されるよりましなので、簡潔なタイトルを入れておくことがよいと思われる。


完全に消すことは出来なかったけど、まあまあの解決。