サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
www.mofty.net
無限スクロールとは、画像系のサイトなどでHTMLページをスクロールしていくと、ページ下部に次のページ要素が読み込まれ、次ページがあるかぎり下に下にコンテンツが続く仕組みです。 サンプル:イラストリストの無限スクロール(スマートフォン専用ページ) ※.スクロールをしないと動作しないので、PCで閲覧の場合はウィンドウの高さを短くしてください。 色々ライブラリ(script)が配布されていますが、今回は、jQuery系のInfinite Ajax Scrollを設置しました。数行のJavaScriptを記述するだけで、簡単に無限スクロールができます。 ライブラリの配布元 設置方法 <script src="/sites/all/libraries/jquery.ias.min.js"></script> <script type="text/javascript"> jQuery.ias({
絵画などで一定方向の平行線で埋める技法です。illustratorやInkscapeの場合、規則正しい線は容易にできるので、ランダム値が加わり、ハッチ=ラフ(手書き風)として使われることが多いです。デジタルだと、平行線はカンタンに作れますからね。 Inkscapeのパスエフェクト ハッチ(ラフ)の使い方 オブジェクトを選択して、パス→パスエフェクトエディッタを開きます。 新規エフェクトの適用から『ハッチ(ラフ)』を追加します。 (図1) ハッチ(ラフ)の太さを変更する ハッチ効果は、基本的にストロークを元に実行されます。ハッチの線、太さを変更する場合は、ストロークの線幅を変更します。 (図2) ハッチ(ラフ)の密度を変える ノードツールでオブジェクトを選択します。すると、○と◇が2つずつ表示されます。1つだけ離れている◇を動かすと密度とハッチの方向が変わります。 ハッチ(ラフ)のはみ出し量
Responsive Img を試す このライブラリは、要素に対して幅を取得して画像ソース(ファイル名)を変更してくれます。 また、PHPによる画像生成機能もあるようですが、私はJavaScriptのみを使用します。 Responsive Imgの設置方法 画像の幅が640px以下になる場合は、画像名に『_mini』が付くように設定。 <script src="js/jquery-1.8.2.min.js"></script> <script src="js/responsiveImg.js"></script> <script> $(function() { $(".mini").responsiveImg({breakpoints:{"_mini":640}}); }); </script> 画像の準備 画像タグの指定方法 上で設置したclass名を画像タグに記述します。 <img c
クォータービューは、立体表現の描画方法の1つです。ゲームやソーシャルネットワークなどで活用される。2Dイラストで3D表現する手法です。 似たような手法で、アイソメ図があります。厳密な定義の違いがわかりません。が、アイソメ図は、120度(30度)のひし形で表現されます。クォータービューは、アメーバピグを参考にすると、ひし形の角度は、約128.88度(約26.56度)で表現されています。 今回は、アメーバピグの参考に 26.56度で制作しています。 クォータービュー用の結晶軸グリッド Inkscapeには、予め3D表現ようのグリッド機能が用意されています。ドキュメントの設定より矩形グリッドの角度を変更します。 クォータービュー用の基本パターン(四角) 基本パターンとなる四角形を描きます。これは単純にグリッドに沿えばOKです。その際、スナップ設定で「グリッドにスナップ」「ノードまたはハンドルをス
junaioARマーカー画像の設定方法です。 マーカー画像と表示する画像・動画を変更できれば、名刺・チラシ・DMにオリジナルのARマーカーを追加することができます。 はじめに、junaioARマーカーのサンプルをダウンロード junaioには、簡単にはじめられる『Quickstarts』が用意されています。このQuickstarts、5.Multiple References with Images and Videos (Movie Textures)が、ちょうど複数のマーカーを使ったサンプルとなっています。 サンプルソースの構成[GLUE_5_MultipleReferencesWithImagesAndVideos] GLUE_5では、複数のARマーカー画像を登録して、コンテンツを表示するサンプルです。 index.php (出力するコンテンツ主なAR宣言処理) .htacce
はじめに、レンゲソウの観察 一時期、カメラにハマり毎日、花の写真や風景を撮っていました。が、『レンゲソウ』がわからない・・・。そこで、Googleさんでレンゲソウを画像検索します。良く春先に見かける花です。 まずは兎に角、観察です。 写真参考:足成 レンゲソウからキャラクターイメージ化 お気に入りのレポート用紙に、お気に入りのシャーペンでガリガリ落書きをはじめます。花全体をイメージしてキャラクター化を試みます。が、花の構造が複雑でしっくりきません・・・。色々書いてみるが、イメージが沸かず。頭を掻く時間が増えます(笑) 花全体の構造が難しいので、花の細部、1つの花びらに注目をしキャラクター化を試みます。構造が少しシンプルになり、徐々にイメージが沸いてきます。すこし、キャラクターの生い立ちと、ストーリーを考えると、レンゲソウの花びらから生まれた妖精(?)的な感じでイメージが固まります。 ノート
junaioは、モバイル向けのARブラウザです。簡単な登録をするだけで、無料でARコンテンツを配信することができます。コンテンツはチャンネルとして登録して、PHP・HTML5・JavaScriptでコントロールできます。(一部の制作ツールは有料のようです。) junaioのdeveloper登録をしよう junaioのデベロッパーサイトにアクセスをして、Free Developer Signupより登録を行います。必須項目のみを入力し、Sign UPを押します。すると、先ほど登録したメールアドレスにデベロッパー登録承認のメールが届きます。デベロッパーサイトにログインします。 ※.ドイツの会社なので、一応英語で入力 QuickStartよりサンプルとライブラリをダウンロード 古いjunaioは、Zend Frameworkが必要だったようですが・・・。現在の物はPHPと.htaccessだけ
コンテンツの作り方をまとめる前に、アルファチャネル動画も試してみました。これは、クロマキー合成のような背景部分を透明した動画です。 内容的には、前回、ARマーカーの上に画像を表示させた方法と同じですが、背景を消した動画を、どうしても試してみたくなり。動画・アニメーション用のデータを作りテストして見ました。 前回は、ARマーカーの上に画像表示。 第1回:ARモバイルブラウザ『junaio』を試す!? 『junaio』コンテンツ背景透過動画を見る junaioをインストールしていない人は、インストールからはじめてください。junaioアプリの使い方は、こちらへ。 ARモバイルブラウザ『junaio』のインストール iPhoneアプリ:junaio Augmented Reality Browser スマートフォン:junaio Augmented Reality Browser junaioの
『AR』とは『Augmented Reality』。日本語だと「拡張現実・強化現実」と呼ばれる技術です。カメラ越しに見た世界に、CGや写真・動画を合成することができます。雑誌・広告や観光案内などでも利用されています。で、無料で気軽にARコンテンツが配信できる『junaio』を玉して見ました。 ARアプリ「junaio」の存在 勉強不足で知りませんでした。が、『ARモバイルブラウザ』と言うジャンルがあります。このジャンルのアプリは、ブラウザからでは出来ないカメラへのアクセスを実行してくれます。 幾つかアプリがありますが、今回は、ドイツの会社「junaio」を試してみました。「junaio」は『チャンネル』を作成することにより、ARコンテンツを無料で配信できます。(一部開発ツールが有料) iPhoneアプリ:junaio Augmented Reality Browser スマートフォン:j
Facebookの「いいね!」やGoogleの「+1(プラスワン)」、他にも画像系ソーシャルネットワークだと、instagram・pinterest(Like)など多くのソーシャルサイトが画像・記事を評価するボタンを用意しています。 これらを利用には外部サイトとの連携が必要であり。ユーザは、ホームページを評価するの為に、なんらかのサービスの利用者でなくてはなりません。 情報伝達、記事・画像の拡散としては大変素晴らしいのですが、全てのユーザが評価ボタンを利用する事ができません。 で、サイトオリジナルの評価ボタン(Like・いいね!)を設置します。 Drupal7:Vote Up/DownモジュールでオリジナルLikeボタンの設置 Drupal7で記事・画像を評価するモジュールは、色々あります。 モジュールによっては、評価の「+1」「-1」だけなく、5段階で評価できるモジュールもありま
このページを最初にブックマークしてみませんか?
『Monkey Seven's | Web制作 & イラスト制作』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く