このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.
ウェブサイトをデザインをするときに、ワイヤーフレームを作るのって 私にとっては「どこに何を置いて、どういう動きをするのか」というメモのようなもので。 手描きでレポート用紙に描いて、 スキャンしてプロジェクトフォルダへ入れておくことも多いのですが デザインの前に「こういう配置でいいですよね?」って共有したいとき 清書するアプリを時々探してしまうんですよね。まだしっくりくるものがなくて。 最近調べてすごいなーとおもったアプリや、無料でもざくざく使えそうなものまでご紹介。 Moqups Free Plan (offers 2 active projects and 5MB of storage) Monthly:Standard active project 10 で $9〜 ログインしなくても無料で組めます。 960gsグリッド表示可能です。 ほぼコンポーネント揃ってます。ほぼ装飾なしなステン
そもそもどんな制限が可能か 機能制限(デバイス全体で使わせない) プライバシー制限(アプリごとに選べる) iOS7とiOS8でブライバシーの概念が違う 要はカメラの利用をアプリにさせるかってのはiOS8からできるようになったって話。 OS カメラ 写真(ライブラリ) iOS7 制限なし ユーザーが選べる iOS8 ユーザーが選べる ユーザーが選べる カメラの利用制限の確認方法 カメラ機能制限の確認 機能制限の確認方法なんだけど、AVAuthorizationStatusRestrictedがあるからそれでいけんのかと思ったんだけど、そこに来ない。isSourceTypeAvailableで見るしかないっぽい。カメラの機能制限か、単純にデバイスにカメラが存在しない(昔のiPodとか?)の場合。ただしどちらかは判別不可能。 if (![UIImagePickerController isSou
By Graham Smith スマートフォンやタブレットがフルHD以上の画面解像度に対応したり、PC用のモニターが4Kに対応したりすることで、徐々にフルHD以上の高解像度コンテンツへの需要が高まってきています。しかし、解像度の増加に伴ってコンテンツのファイルサイズも大きくしてしまえば、ユーザーのデータ使用量は一気にパンクしてしまいます。そこで、YouTubeではより効率的に動画ファイルを圧縮するための動画圧縮コーデック「VP9」の開発を進めており、これを使えば使用帯域幅は既存の動画圧縮コーデックの半分以下で済むようになり、よりスムーズに高解像度のムービーを再生できるようになるということを、複数事例を交えて解説してくれています。 YouTube Engineering and Developers Blog: VP9: Faster, better, buffer-free YouTube
最近、スマートフォンを中心にドロワーメニューが流行っている。こういうやつ。 実装するのは極めて簡単で、トリガーとなるボタンが押されたらメインのコンテンツ部分に transform: translateX( 100px ) みたいにして動かすだけ。で、閉じるときにはその値を 0 に戻す。 ただこれ、固定ヘッダーを用いる場合には iOS でちょっと壁にぶつかる。iOS では GPU アクセラレーションが有効になっている要素内の全ての要素で position: fixed が position: relative のように振る舞われるためだ。 一度でもドロワーメニューが開かれれば translateX が当たっているので、その要素内に固定のヘッダーとかを持っている場合には固定されなくなってしまうのだ。 対応策は、 固定ヘッダーをやめる translateX の代わりに left プロパティを使う
入門 React.js その2 JSXについて ReactではJSXというHTMLによく似たマークアップ言語がオプションで使用できます。 JSXを使用することで以下の利点があります。 HTMLと同様の方法で要素のツリーをマークアップできる 意味のわかりやすいセマンティックな記述ができる アプリケーションの構造が可視化できる Reactの内部表現が抽象化される マークアップとそれを生成するコードが一箇所にまとまる 最後にJavaScriptに変換される JSXとは? JSXはJavaScript XMLの略であり、Reactのコンポーネント内でマークアップ言語を記述するためのXML風のシンタックスです。 React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!') JSXでは、これは次のようになり
世界初の市販パーソナルコンピュータとして知られる「Apple II」を、ワンボードマイコン「Arduino Uno」で再現する様子が、Arduinoを使った電子工作をブログで紹介するダミアン・ペケット氏によって公開されています。 Turning The Arduino Uno Into An Apple ][ http://dpeckett.com/turning-the-arduino-uno-into-an-apple Apple IIは1977年、Apple共同創業者のスティーブ・ウォズニアックによって設計された世界初の個人向けコンピュータで、まさしく歴史に残るモデルです。ペケット氏は「現代のマイクロコンピュータがどれほどパワフルなのか」を証明するために、この1980年代の歴史的な名機をArduino Unoを使って再現しようと決意したとのこと。 Apple IIはCPUに「MOS
2015年1月、React ConferenceにてReact.jsでネイティブアプリが作れるようになると発表された。この発表を受けて最近何かと話題のReact.jsだが、リリースされたのは2013年であり、2009年にリリースされたAngularJSや、2010年のBackbonejsなどの他のjavascriptフレームワークに比べると新しく、まだネットに日本語の情報があまりない。ということで、React.jsのデファクトルーティングライブラリであるreact-routerの使い方についてまとめてみた。 目次1.そもそもreact-routerとは 2. react-routerのインストール方法 3. react-routerの使用例 4. react-routerのコンポーネント一覧 5. Routerのrunメソッド 1. そもそもreact-routerとはreact-rout
ガントチャートを作成する時、通常だとエクセルをカスタマイズして作ることが多いと思います。エクセルでガントチャートを作成した場合、自由にカスタマイズできるメリットがある反面、macユーザが使えなかったり、webで共有しずらかったりします。今回は無料で使えるガントチャートのクラウド型フリーソフトのおすすめ5つをご紹介します! ガントチャートとは ガントチャート(Gantt chart)とは、プロジェクトマネジメントの手法の一つで、Work Breakdown Structure(WBS)と組み合わせて使用されます。WBSとは、TODOを最小単位のタスクレベルに分解した作業分解図のことで、WBSの1行1行を見れば、そのタスクを実施する人は何をすればよいか分かるレベルまで分解されます。タスクを細かくTODOレベルに分解したものを、前後の依存関係をつけたり、並列に動かすタスクを整理したり、マイルスト
こんにちは。ディレクターのたかしです。 先日趣味の野鳥観察をしているときに、「あれ、あの綺麗な鳥は見たことがないな」と、近くにいた野鳥の種類を見分けることができませんでした。 自宅には野鳥図鑑があるものの、大きくて重いので、なかなか持ち歩けません。そこでふと、野鳥を見分けるための綺麗な写真と解説つきのスマートフォンアプリを開発すればいいのではないか、と思ったのです。 スマートフォンのホーム画面においておけば、いつでも見られますよね。しかし僕はプログラミングやUI/UXの知識はありません。そこで、誰かにアプリ開発の依頼をすることも考えましたが、友人にエンジニアはいないのです。困った……。 ということで今回、僕のようにプログラミングやUI/UXの知識がない人でも、スマホのアプリを開発できる方法をランサーズ株式会社さんにお伺いしました。 プログラミング・UI/UXの知識なしでアプリ開発ができるウ
ボタンやパネル、レイアウトなど、最近はWebのユーザインターフェイスでさまざまなアニメーションが利用されています。WebページのUIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアルを紹介します。 アニメーションを魅力的に動かすテクニックを段階的に解説しているので、それぞれの効果がよく分かります。 Giving Animations Life 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Step 1: まずはシンプルに動かしてみよう Step 2: バウンドを加える Step 3: バウンドを自然な動きにする Step 4: ディズニー®の12の基本原則を取り入れる Step 5: アニメーションを誇張する Step 6: アニメーションに命を吹き込む キーフレームを簡単に設定できるスクリプト St
About the content This content has been published here with the express permission of the author. Apple has offered an API for natural language processing since iOS 5, which allowed us to tokenize text, detect the language, and determine parts of speech. With Swift and the introduction of Playgrounds, it’s faster and more delightful than ever to experiment with linguistics. We welcomed Ayaka Nonak
http://facebook.github.io/react/ React.jsは現在注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供します。 公式サイトには、特徴として以下の3つが挙げられています。 JUST THE UI MVCのViewであり、既存のアーキテクチャと容易に結合することができます。 VIRTUAL DOM DOMを模した中間オブジェクトをあらかじめ生成し、更新差分のみを本物のDOMに反映することにより、ハイパフォーマンスを実現します。 DATA FLOW データフローを一方向に保ち、データと画面(DOM)の対応をを宣言的に記述することによって、可読性を向上させます。 今後、詳しい使い方について一つずつ説明をしていきます。 次回はJSXについて。 入門 React.js その2 JSXについて 入門 React.js
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版(MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う)の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
その書き方、古くなぁ~い?なくなくなくなくなくなくなぁ〜い? そんなわけで、先日発売になりました書籍現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4一冊ご恵贈頂きました。 最新のコーディング事情を知りたい、またはHTML + CSSコーディングの上級者を目指すのであれば絶対におさえておくべき一冊です! 書籍の紹介 近年のWebコーディングはスマートフォンをはじめとする対応デバイスが劇的に増えたことから、非常に手間のかかる工程になりました。検証や最適化まで含めたすべてを手作業でこなすのは無理が生じてきており、さまざまな制作支援ツールやフレームワークを活用しながら進めるなど、従来のワークフローから大きく変化を遂げています。 本書ではこのような“モダン”なHTML+CSSコーディングのあり方と、作業の効率化&適正化を図る手法・技術・ツールを網羅的
CSS Font LoadingとFont Face Observer、Web Font Loader ウェブ標準であるCSS Font Loadingが気軽に使えるようになるにはまだまだ時間がかかりそうだ。そのポリフィルであるFont Loaderは動作が不安定かつ開発が止まっており信用できない。代替技術としてはポリフィルと同じ開発者が積極的にコミットしているFont Face Observerと、広く使われているWeb Font Loaderがある。同じフォントの読み込みを検知する場合、この三者ではどのようにコードが変わってくるのだろうか。 以下のコード例では、自前でホスティングしているOpen Sansの読み込みが完了・失敗したらbody要素にクラスを振るという単純なケースを書き分ける。 CSS Font Loading仕様はPromiseによる実装で、読み込み待ちはPromiseで
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01: 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28: 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
お久しぶりです。徳永です。 講談社からオンライン機械学習というタイトルの本が出版されます。著者はPreferred Infrastructure/Preferred Networksの海野, 岡野原, 得居, 徳永の4人です。 機械学習の中でもオンライン機械学習に特化した本で、単純パーセプトロンから始まり、Passive Aggressive, Confidence Weighted, AROW, Soft Confidence Weightedなど(Passive Aggressive, Confidence Weighted, AROWは分散オンライン機械学習フレームワークJubatusでも実装されています)についてアルゴリズムの概要を説明したり、リグレット解析による性能解析について説明しています。また、分散環境でのオンライン機械学習や、深層学習での応用、効率的な実装方法など、応用的な
これでインストールは完了です。 作業用ディレクトリの作成 続いてWebサイトを作るディレクトリ(フォルダ)を作成します。今回は onsenui_for_website としています。そのディレクトリの中でbowerコマンドを実行します。 $ bower install onsenui bower cached git://github.com/OnsenUI/OnsenUI.git#1.2.2 bower validate 1.2.2 against git://github.com/OnsenUI/OnsenUI.git#* bower cached git://github.com/angular/bower-angular.git#1.3.15 bower validate 1.3.15 against git://github.com
Build fantastic visual SVG Widgets. Svidget.js is a JavaScript framework for creating immersive and fully interactive SVG widgets. By componentizing your data visualizations as widgets, you can quickly and easily embed them on any website while keeping a clean separation between SVG and HTML. Svidget.js is no longer being maintained, and has been archived. You can still use it, but it is recommend
本日開催されてた Service Worker ハッカソン。 http://googledevjp.blogspot.jp/2015/03/service-worker.html 参加できなかったので後で自分で見るように twitter で流れてた資料をまとめ。 ハッシュタグは #serviceworker です。 セッション動画 前半 後半 [Service Worker] プッシュ通知の使い方 - Google スライド スライド イントロ Service Worker 入門 Push 通知 Fetch API Service Worker のデバッグ方法 その他資料 Service Worker を使ったデモ https://jakearchibald.github.io/trained-to-thrill/ ソースコード https://github.com/jakearchiba
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く