サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
デスク環境を整える
blog.ks-product.com
未だに噂が止むことは無い五輪エンブレムの盗用疑惑ですが、以前書いた記事でパクりではないことは証明しました。しかし、だいぶ長い記事…2015年08月28日 やはり佐野研二郎は凄かった！五輪ロゴが盗用ではない明確な理由を簡潔に解説 雑記 ニュース五輪（オリンピック）批評・感想・考察 未だに噂が止むことは無い五輪エンブレムの盗用疑惑ですが、以前書いた記事でパクりではないことは証明しました。しかし、だいぶ長い記事になってしまったので「結局よく分からない」という方も多いかと思います。 なので、今回は佐野研二郎氏が五輪エンブレムに関して盗用の事実は無いことを簡潔に分かりやすくまとめてみました。 五輪エンブレムが盗用でない事の証明方法はいくつかありますが、最も分かりやすいのがパラリンピックのエンブレムに着目する方法です。これを知るだけで盗用でない事はハッキリと分かるはずです。 その前に五輪エンブレムがど
五輪ロゴ問題で色々と飛び火している佐野研二郎氏のデザイン盗用疑惑。しかし、スタッフが盗用したものを除けば「言いがかり」なんですよ…2015年08月22日 佐野氏デザイン『おおたBITO』、『東山動植物園』などのロゴ盗用疑惑は全て『言いがかり』なので論破しよう思う 雑記 ニュース五輪（オリンピック）批評・感想・考察 五輪ロゴ問題で色々と飛び火している佐野研二郎氏のデザイン盗用疑惑。しかし、スタッフが盗用したものを除けば「言いがかり」なんですよね。こちらの記事で佐野氏が無実である可能性が濃厚であることを書きましたが今回もいくつか擁護しようと思います。 おおたBITOのロゴ盗用疑惑 まず一番大きな問題になっている『おおたBITO 太田市美術館・図書館』のロゴ。確かに似ています。 しかし、これは盗用ではなく参考レベルです。実際、佐野氏自身「身近な物を参考にすることはある」と言っているんですよね。勉
一定期間サイト・ブログを運営しているとSNSサイトでシェアされるようになってくるかと思います。シェアされることはモチベーションア…2014年07月05日 Facebookの「いいね」が正常にカウントされない原因と解決策 Web制作テクニック facebookいいねアクセスアップバグブログ仕様豆知識 ツイート 一定期間サイト・ブログを運営しているとSNSサイトでシェアされるようになってくるかと思います。シェアされることはモチベーションアップに繋がり大変嬉しい物です。 シェアされやすい記事、そうでない記事と色々なケースがありますが、もし、「一日数百アクセスある記事なのにFacebookの『いいね』がいっこうに押されない」という場合はら仕様に引っかかっているかも知れません。 Facebookページを作成したことがある方はご存知かも知れませんが、FacebookページのURLにはハイフンを含めるこ
以前投稿したヘッダーなどを外部化するテクニックの記事が大変好評のようでご利用いただいた皆様ありがとうございました。今回は…2014年06月24日 【サンプル付】外部化したヘッダー・グロナビの現在位置をアクティブにするテクニック【自動化】 Web制作テクニック ソースファイル配布 HTMLJavaScript (JS)jQueryサンプルソースコードプログラミング作業効率アップ自動化 ツイート 以前投稿したヘッダーなどを外部化するテクニックの記事が大変好評のようでご利用いただいた皆様ありがとうございました。今回はその続編記事になります。 実はヘッダーなどの共通パーツを外部化すると一つ問題が発生します。それは全ファイル共通の記述になる為、例えばグロナビ（グローバルナビゲーション）の現在いるページに対応するボタンをアクティブにしたいという場合頭を悩ませることになるかと思います。 今回はカレント
2014/04/02 ver 1.3.4 公開しました。プリロードに関するエラーを修正しました。 クロスフェード…2013年11月25日 【JavaScript】画像ロールオーバー ライブラリの決定版！！jQueryCrossFadeRollOverプラグイン Web制作テクニック ソースファイル配布 JavaScript (JS)jQueryjQuery プラグインWebデザインサンプルソースコードプログラミングライブラリロールオーバー作業効率アップ ツイート 2014/04/02 ver 1.3.4 公開しました。プリロードに関するエラーを修正しました。 クロスフェード可能なリッチな画像ロールオーバーをJavaScriptの知識なしで簡単に実装できるjQueryプラグイン「jQueryCrossFadeRollOver」を公開しました。 このライブラリで何ができるの？ 画像ロールオー
最近はフォントサイズ切り替え機能を導入しているサイトがめっきり減りましたが、未だ「フォントサイズ CSS 切り替え」などといった…2013年11月10日 代替CSS必要無し！jQueryフォントサイズ切り替えプラグイン公開！【JavaScript】 Web制作テクニック ソースファイル配布 JavaScript (JS)jQueryjQuery プラグインサンプルソースコードプログラミングライブラリ作業効率アップ ツイート 最近はフォントサイズ切り替え機能を導入しているサイトがめっきり減りましたが、未だ「フォントサイズ CSS 切り替え」などといったキーワードで訪問される方がいるのでプラグインを作ってみました。 以前はstyleswitcher.jsというフォントサイズ切り替えライブラリが定番でしたが、代替CSSを用意したり、スクリプトが動くようにHTMLを書き換える必要があったりと初心者
近年、jQueryのようなフレームワーク・ライブラリの登場で気軽に扱えるようになったJavaScriptですが、意外と基礎的な部…2013年05月17日 意外と知らないJavaScriptの常識【JavaScript入門】 Web制作テクニック HTMLJavaScript (JS)JavaScript 基礎知識jQueryコーディングプログラミング ツイート 近年、jQueryのようなフレームワーク・ライブラリの登場で気軽に扱えるようになったJavaScriptですが、意外と基礎的な部分を知らないって人も多いかと思うので取り上げてみました。 JavaScriptはHTMLに組み込まれて実行されるケースがほとんどです。その為、JavaScriptだけに精通するのではなくHTMLの知識も必要になります。 初心者がよく陥りがちな事例でサンプルのプログラムをコピペしているのに動かないというものが
SafariやFirefoxを利用している人は以下のようにロールオーバー画像がそのままになってしまう症状に遭遇したことが少なから…2013年11月23日 SafariとFirefoxでブラウザバック（戻るボタン）を押した際、前のページの画面効果残っている件ついてを解説 Web制作テクニック firefoxsafariscriptバグブラウザロールオーバー制作メモ戻るボタン ツイート SafariやFirefoxを利用している人は以下のようにロールオーバー画像がそのままになってしまう症状に遭遇したことが少なからずあるかと思います。（他のサイトでも取り扱われている内容ですがあえて記事にします。） キャッシュが原因？少し違います。 多くのサイトではSafariやFirefoxではページがキャッシュされていることが原因と解説がされていますが少し違います。 ブラウザバック（戻るボタン）した時はIEや
長年コーディングをやっていますが、今更ですが先日はじめて仕事でレスポンシブWebデザインに対応したサイトを作ることになり、やっと…2014年01月31日 レスポンシブWebデザインを実装してみて分かった11+αのポイント Web制作テクニック CSS (スタイルシート)HTMLJavaScript (JS)レスポンシブWebデザイン (RWD)制作メモ ツイート 長年コーディングをやっていますが、今更ですが先日はじめて仕事でレスポンシブWebデザインに対応したサイトを作ることになり、やっとひと段落したところなのでレスポンシブWebデザインのメリット・デメリット、構築する上で気を付けたほうが良いところなどをまとめてみます。 ちなみに当ブログもスマホ向けの表示には対応していますが、各端末に最適化されるというよりはPCとそれ以外の2パターンの表示なのでレスポンシブWebデザインではありません。
サイトでなにかしらの成果を挙げたいと考えている方はアクセス解析ツールを導入していることだと思います。アクセス解析ツールには色々と…サイトでなにかしらの成果を挙げたいと考えている方はアクセス解析ツールを導入していることだと思います。アクセス解析ツールには色々と種類がありますが、やはりデファクトスタンダードといえるGoogle Analyticsを導入している人が大半だと思います。無料ですしね。 というわけで今回はGoogle Analyticsのとある問題と対策を取り上げます。 検索キーワード（オーガニック検索）の「not provided」って何！？ Google Analyticsの機能の一つとして、なんという検索キーワードでサイトに訪問したかが分かるオーガニック検索（集客＞キーワード＞オーガニック検索）というものがありますが、検索キーワードのほとんどが「not provided」という
反日思想、親日思想を持つ代表的な国として、それぞれ韓国、台湾が挙げられるがそもそも反日、親日とは何か？ 親日・・・日本や日…反日思想、親日思想を持つ代表的な国として、それぞれ韓国、台湾が挙げられるがそもそも反日、親日とは何か？ 親日・・・日本や日本人、日本文化に好意的な言動を示す外国人を指す言葉 反日・・・親日の正反対の意味 このように親日・反日の範囲は人によって様々だ。 反日＝悪人、親日＝善人ではない ネット世論では反日は悪い人で親日は良い人だという意見が多く見受けられるがそれは間違いだ。反日・親日は日本・日本人・日本文化に対する感情・主義であり人間性の良し悪しとは無関係である。 日本政府や歴史に否定的でも人望のある人はいるし、親日であっても犯罪に手を染めてしまう人もいる。 ちなみに世間的に反日と言われている韓国は東日本大震災の救援金（義捐金ではない）として29億円（世界5位）寄付した
アーカイブページでカテゴリ・タグの情報を取得するのに毎回混乱しちゃう・・・ WordPressには様々なテンプレートタグや関数…アーカイブページでカテゴリ・タグの情報を取得するのに毎回混乱しちゃう・・・ WordPressには様々なテンプレートタグや関数が用意されていますが、ルールが統一されていなかったり似たような機能を持つものがあったりして一度は混乱したことがあるかと思います。 例として、アーカイブ（カテゴリ・タグ）ページで、現在のカテゴリ・タグ名や説明文、投稿されている記事の数などを表示する機会は結構多いと思いますが、少々手順が煩雑で初心者にはつまづくかも知れません。プログラミング経験者でも結構忘れます。 そんな問題を解決する関数を作りました！ というわけで、アーカイブ（カテゴリ、タグ）ページで、ページの情報を簡単に取得する関数を作ってみましたので是非ご利用ください！カスタムタクソノミ
Webデザインをするにあたり各環境でのブラウザの動作検証は欠かせないものです。しかし、様々な環境で動作検証をするためには複数台の…Webデザインをするにあたり各環境でのブラウザの動作検証は欠かせないものです。しかし、様々な環境で動作検証をするためには複数台のPCやOSが必要になるためそれなりの費用がかかります。 AdobeがBrowserLabというブラウザ動作検証サービスを提供していましたが、残念なことに2013年3月にサービスが終了してしまいました。ここで役立つのがBrowserStackというサービス。Adobeが代替サービスとして推奨していますので安心です。 BrowserStackの何が凄いのか？これまでのサービスとの違いは？ ブラウザ動作検証サービスはこれまでもいくつか存在していましたが、私が知るサービスは各ブラウザの画面キャプチャを取得するという内容でした。これはこれで便利で
クロージャーって難しい！？実は簡単です。 クロージャーとは何か？ クロージャーを使うことで何ができるようになるのか？ …クロージャーって難しい！？実は簡単です。 クロージャーとは何か？ クロージャーを使うことで何ができるようになるのか？ 詳しく解説しているサイトは沢山あるけど、詳しいが故に初心者だと理解しにくいと思ったので記事にしました。 （クロージャーで検索してくる人に全くの初心者はいないと思うのである程度知識がある前提で書きます。また、他のサイトのクロージャーの解説も読んでみてください。似た情報でも多角的に情報を得ることで理解が深まります。） ・・・関数内部の変数を永続的に保持することができる。これが答え。 （通常、関数は呼び出されるたびに関数内部の変数はリセットされる。例えば「関数自身が何回呼び出されたか」といった情報を記憶することはできない（関数外部の変数を利用する必要がある
近年WordPressやMovableTypeといったCMSツールでサイト構築を行うことが一般的になってきて、メンテナンス性向上…近年WordPressやMovableTypeといったCMSツールでサイト構築を行うことが一般的になってきて、メンテナンス性向上の為にヘッダー、フッター、グローバルナビゲーション等、各ページの共通部分は外部ファイル化してインクルード（読み込み）することが多いと思います。 しかし、WordPressやMovableTypeが使えない、ましてやPHPなどのサーバーサイド言語が使えない案件も多いかと思います。 サーバーサイド言語が使えなくてもJavaScriptがあるじゃない 共通部分の外部化・インクルードはサーバーサイド言語でなくてもJavaScriptで行えます。iPhoneの登場以降JavaScriptの地位はかなり向上してデファクトスタンダード的な存在になりま
WordPressには「投稿」や「固定ページ」の他にも投稿する方法があるのをご存知でしょうか？WordPressではカスタム投稿…WordPressには「投稿」や「固定ページ」の他にも投稿する方法があるのをご存知でしょうか？WordPressではカスタム投稿といって用途に合わせた投稿を追加できます。 例えば、標準で用意されている投稿方法は以下のような意味合いを持ちます（個人的な解釈です）。 「投稿」・・・ブログの記事 「固定ページ」・・・汎用的なWEBページ サイトの規模が大きくなるとこの2種類では何かと不便です。ここでカスタム投稿が役立ちます。カスタム投稿を使えば以下のような投稿方法が追加できます。 「ニュースリリース」 「製品情報」 カテゴリやタグを使って項目分けすることもできますが、利用者目線で考えると投稿方法の時点で項目が分かれていたほうが親切です。 また、標準で「カテゴリ」、「タ
Web制作者支援ツール「File Extractor AIR」公開しました。 AIRアプリなのでadobe AIR ランタイムが必要になります。 File Extractor AIR HTMLとJavascriptで作成していますのでソースをご覧頂くことも可能です。インストール先に構成ファイルが展開されます。MITライセンスを適用しています。（本当はオープンソースにする予定は無かったけどAIRの仕様で無理やり公開されてる感じです・・・ｗ リファクタリングもしてないのでソース汚いです。） アプリの概要は下記をご覧ください。起動画面のテキストをそのまま掲載しています。 File Extractor AIR は主にWeb制作者を支援することを目的に作られたHTML&Javascriptベースのアプリケーションです。 ファイルパス一覧の取得や最近更新したファイルの抽出などが行えます。 元のフ
MMD ってかなり魅力的なツールって言う人が多いんだけど、出力が荒くて PV とかには使いにくそうだなって思っていたから使ったこと無かったんだけど、VMDMotionImporterというツールを使えば、 blender に MMD のデータが読み込めるみたいだね。 以下の動画が MMD データを blender に読み込んで各種設定をしレンダリングしたもの。素晴らしい。レンダリングに時間相当かかりそうだけど。 ちなみに blender はフリーの 3DCG 統合ツール。モデリング、アニメーション、レンダリング全てをこなす。まだ、数時間しか使っていないんだけど、shade なんかより小回り効いて良いと思った。 shade 自体、数日しか使ってないんだけどね。 blender の最大の欠点は操作性にある。マルチプラットフォームを前提に作られているので、操作が windows ライクではない
ks-product.com
Tweet jquery.createvideoプラグインとは jquery.createvideoプラグインは各動画サイトの動画を非常に簡単に埋め込む為のスクリプトです。 使い方は簡単で、jQuery本体とjquery.createvideoプラグインをhead要素内に読み込み簡単な設定をし、 表示させたい動画のURL（動画埋め込み用URLではなく、ページのURL（アドレスバーに表示されてるやつですよー。））をa要素のhref属性に設定し、 同じくa要素にrel="video"と記述します。基本設定はコレだけです。 詳しくは下記のサンプルをご覧ください。 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></s
ニコニコ動画向けに制作したチュートリアル動画です。途中で挫折した感はありますが...。 表題の通り、サンプルはプラグインや素材は一切使用せず制作しました。ファイルサイズも軽いのでお気軽にダウンロードしてご活用くださると嬉しいです。
以前公開した動画埋め込みプラグインjquery.createvideoの改良版です。待望のニコニコ動画に対応しました。また、より簡潔な記述で動画を埋め込めるようになりました。 下記の動画はjquery.createvideoプラグインを使用し簡潔に埋め込んでいます。 video video video video <a rel="video" href="http://www.nicovideo.jp/watch/sm7902754">video</a> <a rel="video" href="http://www.nicovideo.jp/watch/sm9964604">video</a> <a rel="video" href="http://www.youtube.com/watch?v=P5w9bXwW14Q">video</a> <a rel="video" href="ht
前回 Video Copilot Optical Flares のデモ映像を紹介し、Optical Flares をべた褒めしましたが、Knoll Light Factory と比較するため試用版を少しいじってみました。あくまで数時間ほどさわった感想なので色々と不備があるかもしれませんがご了承ください。 まず、最初に。 もし、Knoll Light Factory と Optical Flares が同額だとしても後者を選びます。ほんと、そのくらい良い製品だと思いました。実際には3分の１程度の価格なので有無を言わさずといったところですがｗ 何が Optical Flares を選ぶ決め手になったかと言うと、 １つは Knoll Light Factory の機能をほぼ全て使えると言うことです。パラメータの違い等はありますが再現可能だと思います。 もう一つは Knoll Light Fa
AS3 のライブラリにBox2Dという物理演算ライブラリがあるのはご存知の方が多いと思いますが、C言語からの移植のため書式が特殊で扱いにくく気軽に手を出せないのが現状だという人が多いかと思います。 本日 twitter でQuickBox2Dなるものがあるという情報を入手。Quick というのは動作速度ではなくて、Quick に覚えられるという意味らしいです。馴染みのある書式で、5行程度のソースで動作するプログラムが書けるみたいです。私自身まだ触っていないので、一応参考になりそうなURLだけ貼っておきます。 QuickBox2D公式 QuickBox2Dを使ってBox2DAS3を簡単に（wonderfl） [QuickBox2D] + [Stardust] （wonderfl） 『 QuickBox2D はじめの第一歩 』（blog.alumican.net） Beautifl : Tag
Web DesigningでCSS特集なるものをやっていたので、今回は「外部スタイルシートはいくつに分けたほうが良いか？」というお話。 いわゆる、よくあるコーポレートサイトでは合計3つほどCSSファイルを用意すれば十分だと思う。内訳はこんな感じ。 common.css ヘッダー、フッターやタグの初期設定を記述したCSSファイル index.css TOPページ用CSSファイル content.css ２階層目以降のページ用CSSファイル 実際に各ページが読み込むのは、common.cssとindex.cssまたはcontent.cssの2つ。（読み込み順はcommon.cssが先にくるようにする） ヘッダーやフッター、ナビゲーションなどは全てのページに共通する部分が多いためcommon.cssは全てのページに読み込ませる。 index.cssはTOPページ専用CSS。トップページのメイン部
ActionScript3.0、2.0、PHP5、JavaScript それぞれのOOPの記述方法を比較してみました。基本的に各言語のサンプルは同じ振る舞いをするので、「ASは得意だけど他の言語まで覚えるのは大変そう」と腰を重くしている人は参考になるかもしれません。 ■AS3■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ package { public class Person { public var name:String; public var age:uint; public var sex:String; private var paramNum:uint; public function Person(__name:String=null, __age:uint=0, __sex:String=null) { paramNum = argum
フルフラッシュサイトの問題点としてブラウザのスクロールバーが機能しないこと挙げられますが、swfforcesize.jsを使用することで指定した最小サイズを下回るとスクロールバーが表示されるようです。 actionScriptでFlash側にスクロール機能を実装する人には不要だと思いますが、結構使いどころは多そうですね。 参考サイト： SOOHEI.NET_BLOG > swfforcesize.js
ニコ動アカウントが無い方はこちらからどうぞ。 この動画は以前制作した REEL MONTAGE 2009 のラスト部分を必要な部分だけ抜き出したものです。 基本ロジックは AEP PROJECT のyama_koさんのチュートリアルそのものなんですが、Trapcode Particular を使用したバージョンということで簡単に説明します。 ポイントがいくつかありますのでざっくり紹介します。 ヌルレイヤー（3D）をパーティクルの発生点として利用 上記ヌルレイヤーはwiggleでランダムに動くようにする。 Particular -> Physics -> Air -> Wind Z パラメータをマイナス値を指定。これによってパーティクルが後方に流れて、前進しているように錯覚します。 これだけだと動きにメリハリが無いのでカメラを適当に動かします。ヌルレイヤーはある一点を中心にwiggleでラ
・ここで見る（ニコ動アカウント不要） ・ソースをダウンロードする（要 cs4 , 推奨 Video Copilot Optical Flare , Trapcode Particular , etc... ） なるべく公式のデモっぽくなるように心がけて制作しましたが、見出しがだいぶクドくなりましたね。単純にちょっと派手なものが作りたかったのであえてそうしたわけですが、違和感を感じてしまうのはまだまだ未熟ってことですよね。。。終盤の演出は若干控えめに。らしくなっていてお気に入りです。音楽は同じく Video Copilot の Pro Scores と Designer Sound FX を使用しています。 ちなみに制作日数は4日間。作り直していたのもありますが、もっとサクッと作れるようになりたい...。それと、タイムリマップ使うとホントよく落ちる...。 デモ映像ということなので製品の説
チュートリアル風の動画をニコ動にあげたのでよかったらどうぞ。制作時間は3つ合わせて半日くらいです。 また、楽曲はREEL2009でも使用させていただいた、SHIKI さんのAngelic layerを使用させていただいてます。 ソースファイル（要 cs4、trapcodeプラグイン） http://dl.dropbox.com/u/1520896/source/tips/001_sphere.zip http://dl.dropbox.com/u/1520896/source/tips/002_burst.zip http://dl.dropbox.com/u/1520896/source/tips/003_bounce_particle.zip
次のページ
このページを最初にブックマークしてみませんか？
『ゲーム（PS4・PS5）レビューサイト KS-PRODUCT』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
