サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
sterfield.co.jp
前回、iPhoneでウェブページ上でVideoをインライン再生する方法を紹介いたしましたが、 iOS10から、正式に、SafariでHTML5のVideoをインラインで再生できるようになりました。 また、無音の設定をすれば、自動再生も許可されるようになりました。 ↓参考記事 モバイルブラウザのビデオ再生がいろいろ変わるので確かめてみた – Qiita iOS10のiPhoneのmobile Safariではビデオ要素(videoタグ)をインラインで再生できるようになったし、無音のビデオなら自動で再生できるようになった模様 – みかづきブログ その3 HTML5からVideoタグが利用できるようになり、動画を使ったサイトが作りやすくなりました。 しかし、iPhoneでの操作の制限(自動再生できない、再生するときに強制的に全画面になる)の問題で、 スマホ向けサイトでは、HTML5でのVideo
Oracle 11gでキャラクタセットを変更するということを行ったので、そのログを記事にしてみました。 Oracle 11gではデフォルトで、UTF8でデータベースが作成されるのですが、SJISで作成されたdumpデータをそのままリストアしようとすると、「ORA-12899: 列 string の値が大きすぎます」などのエラーが発生し、 部分的にデータがリストアできません。 そのため完全にリストアさせるためには、Oracle 11gのリスナーをCharacter setをSJISにした上で、作成する必要があります。 結構時間がかかります(mysqlでは2、3分で終わるのに対し、1時間ぐらいかかる)。 インスタンスの削除
こんなものがあるなんて今まで知りませんでした・・・ なぜ知らなかったのでしょう。勉強不足ですね。。。 今日紹介するのは、photoshopの「CSS3Ps」というエクステンションです。 シェイプレイヤーやテキストレイヤーのをcssで書き出しくれるという代物です。 もちろん名前の通りcss3対応です。 どんな風に書きだされるのかが気になる所かと思いますが、 順をおって説明していきます。 まずはダウンロード まずは下記URLからダウンロードします。 http://css3ps.com/ 右上の「free download」をクリックです! ダウンロードしたファイルを開く ダウンロードしたファイルを開くと勝手にphotoshopへインストールしてくれます。 以下のような画面が立ち上がると思います。 photoshopを開いて、エクステンションを表示 もし今まで開いていたのであれば、 1回終了して
とあるSIMフリーのAndroid端末を既存の標準ROMから有志によって公開されているカスタムROMに書き換えるということをやってみました。 自分でも不思議なのですが、その上に乗っかるソフトウェアというのは興味が薄くて、ハードウェアが大好きです。 この感覚何が近いのかと考えていたのですが、小さいころに周りの人よりも異様にプラモデルが好きで100個くらいは持っていました。 そういう何かを自分の手で組み立てるというのが好きなんだと思います。 ここで、SIMフリー端末と書かせて頂いたのは、昨今のキャリアで販売されている端末はほとんどが多重の防止機構が施されており、今回紹介するようなことが出来ないからです。 さてさて軽く前提から紹介して行きます。 カスタムROMのメリット・デメリット メリット メーカーがROMの提供を停止しているような古い端末でも有志によって作られていれば最新OSを利用できる。
レスポンシブデザインでリピートしないタイプの背景画像があると悩んでいました。 デバイスによって、横幅が違うため、自ずと要素の横幅が変わる中でどのように背景画像を指定すればいいのだろうか・・・と。 「その要素は横幅が固定です。」となればいいのですが、そういうわけにもいかないと思います。 これは背景画像だけでなく、iframeや動画の埋め込みなんかもこのようなことが起きるかと思います。 この問題を解決する方法を少し前に発見したので記載したいと思います。 ちなみに今までの対処法としては、ブレークポイントに合わせて都度高さの設定を行っていました。 そのブレイクポイントの解像度のデバイスならいいんですが、それ以外だと崩れて見えてしまっていました。 新しい方法の説明する前に、DEMOをご覧ください。 わかりづらいかもしれませんが、今までの方法と新しい方法を2つを載せています。 ブラウザを縮めてみると2
Beautiful SoupとはPythonのライブラリです。 「スクレイピング」に特化した機能を持っています。 「スクレイピング」って? 取得したHTMLから任意の情報を「抽出」する行為や技術を指します。 「クロール」との違いは? クロールは任意のサイトからHTMLや任意の情報を取得する行為や技術を指します。 ただ取得するのではなく抽出までを含めたものが「スクレイピング」と言えるかと思います。 何故Beautiful Soupなのか? 例えばVBAなど多言語では正規表現でしかスクレイピングに相当する事が再現出来ません。 かなり複雑な条件になる上に、抽出した対象を全文検索します。 Beautiful Soupであれば書き方は至って単純。 抽出した時点で対象をオブジェクトに渡して絞り込みをしていくので処理も軽い。 pythonがインストールされている環境では以下のように構築出来ます。
cd ~/VirtualBox\ VMs/LaunchCart_default_1467552216579_32085 ディレクトリ名は {{ box名 }}default{{ ユニークな文字列 }} で構成されています。 VBoxManage clonehdでVDI作成
和風なwebサイトの場合、縦書きのデザインをすると思います。 以下のサイトなんかも縦書きレイアウトをデザインを取り入れています。 グッと和風感がでますよね!! 深山山荘オフィシャルサイト 縦書きの表現は、画像か1つずつ文字をspanかなんかで囲んでっていうのが定石だったのですが、CSS3で簡単に縦書きが出来るようになっています。 (IEは独自の表現で出来るようです) とりあえず、DEMOを作りましたので、そちらご覧ください。 DEMO 解説 基本的には本当に簡単です。
最近は、ページ遷移せずにページを切り替えるpJaxを使ったサイトを見かける機会が少しずつ増えてきました。 ただ、pJaxを実装するためには、JavaScriptを使う必要があります。 JavaScriptを使わずに、CSSでそれっぽく見せる方法はないかと考えてみたところ、 CSS3のセレクタである、:targetが使えるんじゃないかと思いついて、やってみることにしました。 ↓作ってみたもの DEMO 方法 CSS3では:targetにより、アンカーリンク(ページ内でのリンク)の対象となる要素に対して、 スタイルを適用することができます。 今回の方法では、対象となる要素をすべてposition:fixedで画面いっぱいに表示し、 リンクされていないときは、非表示にするという方法を使いました。 <main> <section class="sec-basic" id="about"> <h2>
スクロールをすると、サイドにあるメニューがついてくるサイトを見かけることは多々あると思います。 そのようなプラグインもいっぱいありますが、 今回はプラグインを使わずに実装してみました。 DEMO html <div class="nav"> <p>メニュー</p> <ul> <li><a href="">» メニュー1</a></li> <li><a href="">» メニュー2</a></li> <li><a href="">» メニュー3</a></li> <li><a href="">» メニュー4</a></li> <li><a href="">» メニュー5</a></li> </ul> </div>
前回cssの優先順位の記事を書きましたが、今回はcssの指定の仕方です。 本当はこっちを先に書くべきでしたね笑 まずは説明するために必要な用語の説明をさせていただきます。 要素と属性 cssを適用させたいhtmlを説明するうえで「要素」と「属性」を理解する必要があります。 下記の図になります。 htmlのタグで囲んだものが「要素」 そのタグに、href,title,target,id,class等の付属されたものが「属性」 となります。 セレクタ cssファイルで記述する場合、「要素」を指定する際に用いるのが、セレクタです。 下記の赤い箇所がセレクタになります。 この3つの言葉を元に説明していきたいと思います。 (この言葉が正しいものかどうかは保証できません・・・) cssの指定方法 本当に基礎的なものは、タイトルに習い省かせて頂きます。 1.連続のセレクタ指定 【css】
ページ内のアンカーリンク(#link01のようにページ内のIDの場所を指定して移動させるリンク)のとき、 ページ内での移動であることがユーザーにわかりやすくなるため、 スムーススクロールを使う機会はとても多いと思います。 ただ、Wordpressなどでメニューを管理する場合で、 リンクにアンカーリンクをつけたい場合、 ページ外からのリンクも行う必要があるために、 以下のように、ページのリンク(URL)+アンカーリンクという形でリンク先を指定しなくてはならなくなることがあると思います。
今まで気になっていたgoogleやyahooにあるタブのようなスマホのメニューを試してみました。 どういうものかというと、 こういう感じでアプリのメニューもこのようになっているものが多いですよね。 どーやってやっているのかなぁと気になっていたのですが、 googleのソースを見ていたら理解出来ました。 それを元に自分でも試してみたDEMOが以下になります。 DEMO (スマホもしくはchromeのdevicemodeをスマホにしてご覧ください) cssだけで実装しています。 (他のサイトはわかりませんが、googleはそうでした) 簡単に言ってしまうと、 メニューを折り返らないように横に配置します。 通常であればスクロールバーが表示されますが、親の要素の高さを調節することにより、スクロールバーを見えないようにしているだけです。 html <nav> <div class="naviCont
最近、webフォントがどんどんいろんなサイトで使用されており、日本語のフォントも見かけることも多くなってきました。 webフォントを提供しているサービスは数多くあるのですが、少々お値段がかかってしまうので、 今回、フリーで使用できる日本語のwebフォントを2つ紹介したいと思います。 いきなり話はそれますが、先日さくらさんがwebフォントに関する新たなサービスを発表していました。 モリサワとさくらインターネットが協業し、無料でのWebフォント導入を実現 これは制作物の幅が広がりそうですね!! フリーの日本語webフォントを使う さて、本題に入りますが、私が把握している日本語のwebフォントでフリーで使えるのは2つになります。 ・M+ FONTS ・Noto Sans JP M+ FONTS まずはM+ FONTSというフォントです。 webフォントの使用は下記のサイトにもありますが、 M+
Railsとwordpressを一つのドメインで使用するという実装を行ったのでその導入方法のログを記事にしてみました。 passenger + apacheを利用している前提です。 Railsアプリとwordpressを全く別のディレクトリに保存することも可能ですが、wordpressと同じディレクトリ内にインストールすれば、gitなど一つのリポジトリで管理できるので、同じディレトリ内に保存する方が楽だと思います。 1 phpのインストール 記事作成時点では公式の推奨phpのバージョンは5.6以降でしたので、今回インストールしたバージョンは5.6にいたしました。 rpm -Uvh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm rpm -Uvh http://dl.iuscommunity.
先月(2016年6月)の9日にjQueryの3.0が公開されました。 3.0では、2.0で非推奨になっていたAPIが削除されたり、 特殊なAPIの使いかたが非推奨になったりと、 APIの整理・整頓が大きく進められています。 また、アニメーションにrequestAnimationFrameが使われたり、SVGの一部の制御が追加されたりと、 今の時代のブラウザに合わせた大きな修正もあり、 新規にサイトを制作する場合には、3.0を利用することに、大きなメリットがあります。 ただ、既存のサイトのjQueryを3.0に移行する場合には、かなり注意が必要です。 移行プラグインも公式に用意されているので、そちらを利用すれば、エラーをある程度回避することはできますが、 3.0での新機能を利用する目的でない場合は、あまりメリットがないかもしれません。 【翻訳まとめ】jQuery 3.0 アップグレードガイド
jQueryを使うと、簡単に関数を組むことができますが、 jQueryの性質上、$(function(){・・・});の中に書いた関数は、その中でしか呼び出すことができないため、 サイトの規模が大きくなってくると、ファイルを分けて必要なときだけ呼び出したいときなどに、不都合が生じます。 例: $(function(){ example("#nav");//呼び出し可能 //呼び出したい関数 function example(elm){ elm = $(elm); elm.fadeOut(); return true; } }); $(function(){ example("#nav");//ここからだと呼び出せない });
スマホのブラウザやYoutubeの動画のページなどで、 ページの上にロードの状況を知らせるバーを見かけます。 画像が多いなど、ページ全体のファイル容量が大きくなってくると、 ページの読み込みが完了するまでに少し時間がかかってしまうことがあります。 サイトを軽くするのが一番適切ですが、 それが難しい場合、このローディングのバーがあると、読み込み状況を知ることができて、 少しだけですが、不安が軽減されます。 スマホでWEBページを見るときはデフォルトのブラウザにこの表示があるので何もする必要はありませんが、 PCでも同様に表示したい時もあるかもしれません。 味の明太子 博多中洲いとや また、↑こちらのサイトのようにローディングバーをデザインの一部に取り込んでしまうのも面白いと思います。 今回は、こちらのサイトも参考に、このトップのローディングバーをjQueryを使って作ってみました。 ↓こちら
Three.jsではCubeCameraという環境マッピング(対象オブジェクトに背景を反映させるためのマッピング)用のテクスチャ画像を生成するためのカメラが用意されていますが、 こちらを活用することで、様々なリアルな表現が可能になります。 今回はその中で、ガラスのような表現に挑戦してみました。 ↓作ってみたもの DEMO 仕組み・方法 仕組み ガラスでは、向こう側の景色が屈折して映り、表面は反対側の景色が反射して映っています。 Three.jsのcubeCameraではこの表現に必要な屈折と反射の両方が用意されているため、 マテリアルにそれを反映することで、ガラスのような表現が可能となります。 方法 //通常のカメラを設置 camera = new THREE.PerspectiveCamera( fov, wrapperElm.clientWidth / wrapperElm.clien
野球のU―18(18歳以下)ワールドカップ(W杯)の決勝戦をテレビで見ていて、惜しくも世界一とはならずも2−1の緊迫した試合で非常に面白く熱い気持ちになった後で、そのままテレビをつけていて、「ナイナイの超一流アスリートの作り方 えっ!?そんな事してたんですかスペシャル」という番組を見ました。 超一流アスリートの一人として登場した日本ハムファイターズの大谷翔平選手が高校1年生の時に作り上げたという目標達成用紙(マンダラート)がすごすぎたので、雛形をつくりました。 作り方 まず、9×9のマス目の中心に目標を書き込みます。 大谷選手で言えば、ドラフト1位で8球団から指名されプロ野球選手になることです。 その周囲に8マスに達成するための大項目を分類 さらに外側に大項目を細分化した具体的なアクションとして72マスに記載 たったこれだけです。 これを作ることでアクションが明確化され、あとは、やるかやら
最近ではPC、スマホの両方に対応したレスポンシブのサイトがほとんど当たり前のようになってきています。 サイトを作るときに、スマホのアプリのような操作性を求められることも増えて消えいます。 そういったとき、JavaScriptで大変になってくるのがマウスとタッチのイベントによる操作です。 私の場合、今まではjQueryによってイベントを取得し、 PCとタッチデバイスでイベントを振り分けて・・・といった方法を使っていましたが、 HTMLの要素が入り組んでいる場合、振り分けが煩雑になり、操作しきれなくなる場合がありました。 さらに、IEでは10,11で、タッチに対応していますが、 他のブラウザで標準化されているtoucheventではなく、pointerという独自のイベントを扱う必要があり、 その振り分けも別で必要になります。 こういった問題を全て解決してくれるのが、今回ご紹介するHammer.
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
"use strict"; //イベントの振り分け var EVENT = {}; if ('ontouchstart' in window) { EVENT.TOUCH_START = 'touchstart'; EVENT.TOUCH_MOVE = 'touchmove'; EVENT.TOUCH_END = 'touchend'; } else { EVENT.TOUCH_START = 'mousedown'; EVENT.TOUCH_MOVE = 'mousemove'; EVENT.TOUCH_END = 'mouseup'; } (function () { var camera, scene, renderer; var cube, sphere, torus, material; var count = 0, cubeCamera1, cubeCamera2; var f
また、mysqlサーバーのログは、/var/log/mysqld.logにあります。 mysqlスローログ(実行時間が1秒以上かかるクエリーのログ)が有効化すれば見れますが、 今回紹介したいのは、ある時点から、すべてのクエリーを確認する方法です。 general_logを「ON」にする まずgeneral_logの状態とパスを確認します。 確認できたら、general_logを「ON」にします。 mysql> SHOW VARIABLES LIKE "general_log%"; +------------------+----------------------------+ | Variable_name | Value | +------------------+----------------------------+ | general_log | OFF | | general
googleMapのapiを利用して、地図を表示することは多いと思います。 弊社でもアクセス情報を載せる時は、かなりの確率で利用させてもらっています。 (最近では、apiではなく、googlemapの埋め込み用コードを使うことも多いですが・・・) ふと、このmapを横幅一杯に表示されたらなんかかっこいいんじゃないかと思って、 試してみました。 DEMO なんかデザイン次第じゃかっこ良くなるんじゃあないでしょうか?? ただ、横幅一杯にした場合、地図をスクロールやマウスのホイールで動くようにしてしまうと 若干めんどくさいですね。。。 DEMOでは動かないようにしています。 方法は、ただcssでwidthを100%に設定するだけで、 googlemapの設定は通常の設定でOKです。 一応、googlemapのソースを載せておきます。 <script type="text/javascript"
普段使っていても知らないタグがいくつかあるようで、使えそうなタグをまとめてみた 1. [qt] … [/引用] [qt]トップページを開くと以下のエラーメッセージが表示されてしまいます HTTPステータス 404 No result defined for actionhoge.action and result iaException [/引用]
(function () { var unit = 100, canvas, context, canvas2, context2, height, width, xAxis, yAxis, draw; /** * Init function. * * Initialize variables and begin the animation. */ function init() { canvas = document.getElementById("sineCanvas"); canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる canvas.height = 300; context = canvas.getContext("2d"); height = canvas.heigh
しか、方法がないと思っていました。 この方法を使った場合、テキストの右側は文章によって がたがたになってしまったり、 中途半端なところで折り返してしまったりして、 あまり美しくない場合が多いのが悩みでした。 しかし、とあるサイトのCSSを調べていると、 たまたま、以下の様な記述を見つけました。
スターフィールド株式会社 > Blog > 制作 > css3 > 【jQuery】CSS3のTransform3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】 jQueryを使うと、手軽にアニメーションを実装することができて、とても便利です。 しかし、jQueryによるアニメーションは処理がどうしても重くなります。 特にスマホなどでは、元々アニメーションがネイティブアプリのUIに多く使われているため、 jQueryによるアニメーションがもっさりとした動きに感じることが多いのではないでしょうか。 jQueryのアニメーションは、通常CPU(コンピュータの総合的な演算装置)により処理されています。 CPUは元々画像処理だけに最適化されたものではない上に、アニメーションだけでなくコンピュータ全体の演算を担っているため、 CPUでアニメーション処理を行うとどうしても処理が遅くなっ
次のページ
このページを最初にブックマークしてみませんか?
『スターフィールド株式会社|グローバルEC支援』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く