スマホ新時代。OPPOの｢Find X｣はスライド式カメラ搭載の全画面デザイン2018.06.20 17:0035,382 塚本直樹 ギミックかっこいい！ ｢スマートフォンの進化は止まった｣なんて話をちらほら聞くようになって数年が経ちましたが、それが全くの嘘であることが証明されました。中国のOppo（オッポ）がなんとも革新的なスライド式のカメラを搭載した全画面ディスプレイの新型スマートフォン｢Find X｣を発表したのです。 Find Xの目玉はなんといってもまず、本体内側の上部が上にサーッと飛び出すことで2500万画素のフロントカメラが出現する機構でしょう。この機構はカメラアプリを起動したり生体認証システムを利用する時に自動でスライドします。動作時間も0.5秒と、そう気にならないレベルでしょう。 またこの部分には赤外線による3D顔認証システム｢O-Face｣が搭載され、｢iPhone X

前回はGitをマシンにインストールしてみましたが、今回から実際に使いつつ、利用時に登場する用語なども解説していきます。 まず、Gitの構成がどうなっているのか、再度おさらいです。本シリーズの第1回目で“バージョン管理システム”について説明した際に簡単に触れましたが、リポジトリという場所でファイルを管理していきます。 リポジトリには、「ローカルリポジトリ」と「リモートリポジトリ」の2種類がありました。 ローカルリポジトリ＝自分のマシン内にあるリポジトリ リモートリポジトリ＝サーバなどネットワーク上にあるリポジトリ プロジェクトを他の人と共有する場合は、リモートリポジトリが必要になってきますが、自分だけでファイル管理を行うのであれば、まずはローカルリポジトリだけでも十分だと思います。 ローカルリポジトリの仕組みについて 実際にGitでファイル管理をしていく前に、リポジトリ内でデータがどのように

前回、ドキュメントのバージョン管理の大事さと、バージョン管理システムのメリットなどについて説明しましたが、今回は「実際にGitを使って、バージョン管理をしていってみましょう！」ということで話を進めていきたいと思います。 まずは、自分のパソコンにGitが入っていないと話がすすまないので、インストールしていきましょう。 とはいえ、Macを使っている場合は最初からGitがインストールされているので、すぐに使い始めたい方はGitの初期設定だけでもよいかもしれません。（※Macには最初からGitがインストールされていますが、バージョンが最新ではないようです。） 最新版のGitでは機能が強化されていたりするので、応用した使い方を実践したい方は試してみてください。 僕の場合、開発環境がMacなのですでにインストールされているバージョンを使用していましたが、今回は解説も兼ねて最新バージョンを入れてみたいと

元ネタ Easing Function http://easings.net/ja イージングアニメーションの種類がたくさんライブラリ化されていて、JSで使用できる。 Compass Ceaser プラグインを入れればSCSS上で ceaser($easing名) として呼び出すことが可能。 SCSS変数にした Ceaserプラグインを入れなくてもSCSS上で呼び出せるようにしたいと思って、 SCSSの変数として移植させていただいたのが下記。元ネタ のeasing名とcubic-bezier値をまま移植しています。 /* * Easing function * Original：http://easings.net/ */ $easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715); $easeOutSine: cubic-bezier(0.39, 0

先日このブログのデザインをリニューアルしたときに、メディアクエリの記述が結構手間だったので、記述のしやすさ、メンテナンス性の良さ、また、最終的なCSSファイルの最適化の3つの観点から、便利な書き方と最適化の方法をまとめてみました。 目次 モバイル・ファーストCSSで書く 要素ごとに、Sassを使って記述する Gulpを使ってメディアクエリの整理する まとめ モバイル・ファーストCSSで書く メンテナンス性の良さや重複の少ないよりシンプルなCSSの記述を目指すと、モバイル・ファーストCSSで書くのが良いです。デスクトップ・ファーストCSSで書く場合、小さい画面向けにはスタイルを追加するというより、消していく（または、上書きして帳消しにする）作業が多くなってしまいます。 このブログはモバイルからのアクセスが1割程度なので、今回のデザインのリニューアルでは、

<!-- Twitter Card --> <meta name="twitter:card" content="summary"> <?php if (is_singular()){//投稿・固定ページの場合 if(have_posts()): while(have_posts()): the_post(); echo '<meta name="twitter:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋を表示 endwhile; endif; echo '<meta name="twitter:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示 echo '<meta name="twitte

久しぶりにWordpressを触っています。忘れている事だらけで大変です！ さて、Wordpressの検索ですが昔は投稿のみが対象だったと記憶していますが 新しくなって固定ページも検索結果に含まれるようになったっぽいです。 固定ページを検索結果から除外したい で、固定ページは検索結果から外したいと思いググると 下記のようなpre_get_postsでqueryを書き換えるやり方が多く出てきました。 <?php /* functions.php */ function SearchFilter($query) { if ($query->is_search) { $query->set('post_type', 'post'); } return $query; } add_filter('pre_get_posts','SearchFilter'); しかし、上記の方法だと、 どのキーワー

workerでもなくwokerでもなくwockerです。 wockerでWP開発が劇的に楽になるという話を聞いて使ってみました。すっごいいい子です。 http://wckr.github.io/にあるような感じで導入は凄くシンプル $ vagrant plugin install vagrant-hostsupdater $ git clone https://github.com/wckr/wocker.git && cd wocker $ vagrant up http://wocker.devでサイトが確認可能。 http://wocker.dev/wp-admin/で管理画面が確認可能。 (ログインパスワードは admin/admin) 概要 wockerは複数のwordpressをコンテナと呼ばれるまとまりで扱い、 複数のWordpress環境を瞬時に切り替えたりできるシステム。

2017年4月11日、Windows Vistaのサポートが終了しました。 これによりIE9のサポートは必要なくなり、今まで躊躇していたHTMLやCSSを利用できるようになりました。 Flexboxでコンポーネントはどう実装するのだろう、バグの対応方法はどうするなど、これから困った時にどんどん利用していきたい、HTMLやCSSのリソースを紹介します。

EditorConfigでエディタの設定を統一する EditorConfigとは様々なエディタの設定を統一するための設定ファイルです。 EditorConfigとは？ たとえば複数人で実装を行うプロジェクトで、実装者がそれぞれの実装箇所でインデントを1タブだったり2スペースだったり4スペースだったりと自分勝手なインデントルールで行なっているとマージの際に様々なインデントルールがミックスされたファイルが出来上がってしまいます。 多くのプロジェクトではそれらを防ぐためコーディングルールなどの共通ルールを設けてコードの品質を均一化しようとしているのではないかと思います。 とはいえ、このコーディングルールというものだけでは守っているつもりだけど抜けてしまう箇所などがでてきてしまったりと実装者に依存してきます。 EditorConfigはプロジェクト共通の設定ファイルを用意しておくと、様々なエディタ

Stay organized with collections Save and categorize content based on your preferences. The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released. Libraries To load a

モバイル中心の動きが高まっている中、ホームページのレスポンシブ化はもはや避けて通れないものとなっています。 今回は、無料で使用できる商用可能なレスポンシブデザインのテンプレートサイト12選をご紹介します。 テンプレートサイトは英語表記のものが多いですが、今回紹介するサイトはどれも日本語で書かれているものばかりですので、使いたいテンプレートがあればすぐに使用することができます。 なお、ご利用の際は必ず利用規約を一読するようにしてください。 このニュースを読んだあなたにオススメ CSSの基本～スタイルシートとは レスポンシブデザインのメリット・デメリットを解説 ノンデザイナーでも分かりやすい！Webサイトを作成する際に知っておきたい主なレイアウト6選を解説 無料で利用できるHTML・WordPressのレスポンシブ対応テンプレートサイト12選 1.無料ホームページテンプレート.com http

この記事は 慶應義塾大学SFC村井&徳田研 Advent Calendar 2015 の10日目の記事です。 UbuntuにNode.jsをインストールする方法は数多あれど、どれも一筋縄ではいかない。 普通に apt-get すると、バージョンが結構古かったり、node でなく nodejs コマンドで登録されたりする。PPA や NVM を使う手もあるけど、余計な手間がかかる。 もっと簡便なインストール方法はないだろうか？ そこで、以下の n package を使ったインストール方法をお勧めします。 導入手順 まず普通に nodejs, npm をインストールします。

実装方法を教えてもらったので、復習も兼ねた備忘録です。 WordPressで記事を表示する際に、特定の件数時にclassを付けたり表示する内容を変更させる方法です。 やろうと思えばスタイルの調整とかclass付ける程度であればCSSやjQueryで疑似classを使って実装することも可能ですが、中身をガラッと変えるときや特定の件数後に何かを表示させたいというときなどに非常に便利です。 最初とそれ以外とでclassを変更する たまに実装しているブログを見かけることもある、記事一覧などで最初の記事だけ背景色や文字サイズを変更するといったことをやりたいときに便利な方法です。 実装にはまずfunctions.phpへ下記のように記述します。

CSS TransformsでCSS Animation/Transitionと組み合わせて、要素を移動させたり、拡大縮小させるとちらつくことがあります。背景色を指定しても発生することがあります。また、一部の子要素だけちらつくこともあります。ちなみに、CSS 2D Transformsを指定した要素でもちらつきが発生するときがあります。 「-webkit-backface-visibility:hidden;」と「backface-visibility:hidden;」を指定 これがいちばん効果の高い対処方法です。ほとんどのちらつき問題が解消されます。2D Transformsには関係ないプロパティのはずなのですが、なぜか有効な対策です。 「-webkit-backface-visibility:hidden;」と「backface-visibility:hidden;」と「overflo

アプリケーションを実行しているスマホの画面サイズや向きを動的に取得できれば、それに応じて表示するコンテンツを調整できますよね。 画面サイズを取得する JavaScriptで画面サイズを取得するためのプロパティが用意されています。 ウィンドウサイズを取得できる関数 screen.width document.write(screen.width); 画面の幅を取得することが出来ます。 screen.height document.write(screen.height); 画面の高さを取得することが出来ます。 画面サイズとタスクバーを除いたスクリーンサイズを取得することが出来ます。 コンテンツ領域を取得できる関数 window.innerWidth document.write(window.innerWidth); ウィンドウ内側の横幅を、取得したい場合に使用。 ※ スクロールバー領域を含

公開日: 2015/08/28 | 更新日: 2017/05/29 Minify処理などで難読化したJavaScriptのコードに、インデントや改行を付けて、分析したり確認しやすく整形するツールです。 変換「変換前」のフォームに、コードを入力するか、ファイルをドロップして下さい。「変換後」のフォームに変換結果が表示されます。

figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端：リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要

今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・