ガラケーはFlashLiteに対応しており、多数のゲームが開発されてきました。そうした既存の資産を活かすべく開発されているのがFlashForwardです。iOS向けにFlashLite1.1からHTML5へ変換するソフトウェアです。 デモは多数用意されています。 アニメーションします。 SVGの他にCanvas阪も用意されています。 テキスト含めたアニメーションも可能です。 こういうゲーム系で活躍します。 陣取りゲーム風ゲームも再現できています。 こういうアニメーションはCanvasのが高速です。 指定した形を描きます。 日本語も使えます。 複雑なキャラクターも描けて、アニメーションもばっちりです。 左右に動いたりします。 バナーレベルは十分に使えます。 まさにゲーム用途にぴったりです。 FlashForwardでは予めSWFファイルを解析し、HTML5/SVGまたはCanvas/Jav

For the first tutorial of 2012 we wanted to have a really good one and the most important thing a very easy one because our goal for this new year is to provide good tutorials with simple techniques that achieve great outcomes. In this first case we will explore ways to create letterpress effect using Photoshop only. So in this tutorial we will show you how to create a super easy and realistic let

AMPPSはApache+PHP+MySQLに加えてPerl、Pythonそして254ものWebアプリケーションをインストールできるソフトウェアです。 社内でサーバを立てて、WikiやCMS、SNSといったソフトウェアをインストールしようと考えたならばAMPPSを使ってみましょう。実行環境に加えて無数のWebアプリケーションが簡単にインストールできます。 インストールです。ウィザードに沿って行います。 インストール場所を指定します。 インストール中です。 完了しました。早速起動してみます。 Apache、MySQLのセキュリティ警告が出ます。 管理画面です。ここからApache、MySQLの起動、終了が設定できます。 PHPの設定です。Extensionを読み込ませられます。 PHPはバージョンの変更もできます。 その他php.iniを編集できます。Apache、MySQLの設定ファイルが

Writen by Bogdan+ / Comments Off on 17 Great Business Card Templates Which Are Free To Use Let’s say you need a business card and unfortunately you are not a designer or you don’t have the budget to hire one. In this case, you have three options: ask someone, try to make it yourself or look for a template. As I said, if you aren’t a designer, then the best scenario is to ask someone who knows how

GitHub がオープンソースの場として魅力的な理由は、Git という優れた分散・協調型リビジョン管理システムのリポジトリー・ザーバーとして誰でも利用できるということはもちろん、README などのドキュメント生成機能やコメンティング機能、問題のトラッキング機能など、Git を補助し、オープンな分散・協調開発を支えるサブシステムが充実している点が挙げられるでしょう。無料でもかなりのことができるのに、ビジネスとしてもちゃんと成立している理由はこんなところにあるように思います。 ただ、同種サービスの Google Code や Bitbucket と決定的に異なり、GitHub の最大の魅力となっているのは、GitHub Pages という1種のホスティング・サービスではないかと思います。成果物をただずらずらと味気ないページに並べるのではなく、趣向を凝らした紹介ページを自由に作り、プロジェクト

pathmenu.jsはPath（iPhoneアプリ）で実装されているメニュー表示をTitaniumで行うモックアプリ。 PathというiPhoneアプリに実装されているメニュー表示、選択機能が人気です。Objective-Cで実現するのはQuadCurveMenuですが、さらにTitaniumで実装したプロジェクトが登場しました。それがpathmenu.jsです。 初期表示です。右下にアイコンがあるのでタップします。 メニューが開きます。もちろんアニメーション付きです。 項目をタップすると拡大されます。 デモ動画です。Path風に動いているのが分かります。 pathmenu.jsが面白いのはモジュールを使うのではなく、JavaScriptだけで実装したということではないでしょうか。うまくすればWebベースでさえ使える可能性がありそうです。 pathmenu.jsはTitanium用、Ja

ドラッグ&ドロップで要素を入れ替えるスマホ向けjQuery pluginを作った カテゴリ：Javascript関連 2011年12月31日 09:10 dragreplace.js とある案件で作る必要があったので、それをカスタマイズしてjQueryプラグインの形にしてみたのが今回作成したdragreplace.jsです。 できることはシンプルで、ドラッグ&ドロップで要素を入れ替えられるようにしました。ただ、主にスマホ(WebKit)で使うことを想定して作っています。 そのため動作はWebKitだけになっています。（transitionやtransformを使って操作しているため） pluginについてはgithubでも公開しています。 デモ jsdo.itでデモを公開しています。それを貼りつけたのがこちら↓ (WebKit系のみ対応しているので、WebKit系ブラウザでご覧ください)

Crunch!はLESSコンパイルツール兼エディターです。 CSSの煩わしさから解放してくれる記法が幾つかありますが、今回取り上げるのはLESSです。そしてCrunch!はLESSファイルを編集するためのエディタで、CSSへのコンパイル機能を備えています。 インストールです。Adobe AIRが必要です。 インストール自体はウィザードで進められます。 起動しました。左がファイルブラウザ、右がエディターになります。 ファイルを開いたところです。ハイライト表示に対応しています。 CSSを生成して保存できます。 フォルダを開きました。その内容が左にツリー表示されています。 ファイルツリーはリアルタイムに更新されます。編集したら画面中央のCRUNCH ITを押すとCSSが生成されます。 LESSからCSSを生成するソフトウェアは幾つかありますが、エディタ機能を備えているのはあまり多くありません。A

2011年、当ブログで「いいね！」が多かったFacebook関連エントリーのベスト10+αです。 これからFacebookを始める方も、これらのエントリーにざっと目を通しておけば、Facebookの主な機能と動向が分かるかもしれません。 タイトルをクリックすれば該当記事にジャンプします。 １．Facebookフィード購読機能の徹底解説 2011年9月にフィード機能が搭載されました。フィード機能は友達以外のユーザーの投稿を読んだり、自分の投稿をフィードで友達以外の人に公開することができます。 ２．Facebookが2012年1月1日に予定している変更点について この記事の賞味期限もあと2日となりましたが、Facebookが2012年1月1日に予定している変更点をまとめた開発者向けの記事です。 Platform Updates: Operation Developer Love ３．Faceb

本日から大晦日までは毎年恒例のまとめ記事を書いていきたいと思います。 最初は管理者が2011年にお世話になったGreasemonkeyスクリプトを一気に19個ご紹介したいと思います。継続的に利用しているものが多いので、毎年そう代わり映えしませんが、気に入ったものがあれば是非使ってみてください。 1.Amazon Cross Book Check アマゾンの商品ページ内に他の書店サイトの中古価格を表示してくれます。 参考記事：Amazonの商品ページに他の書店の中古価格を表示できるGreasemonkeyスクリプト「Amazon Cross Book Check」 2.Amazon Lowest Price Checker Amazonで商品検索を行った際、価格.comでの最安値を表示してくれるというスクリプトです。 参考記事：Amazonの商品ページ内に価格.comの最安値を表示するGre

JSGBはJavaScriptで作られたゲームボーイエミュレータです。 昔懐かしいゲームボーイのエミュレータは数多いですが、今回紹介するJSGBは何とJavaScriptで作られたゲームボーイエミュレータになります。 2色の感じがゲームボーイっぽさを出しています。 アニメーションもレトロな感じです。 拡大表示できます。 平面なのに立体を感じる、そんなデモ。 レトロな動作がいい感じです。 ワリオが走るデモです。 三倍表示にしました。 こういうアニメーションもいい感じです。 動作デモです。 配布されているROMはムービーレベルで操作することはできませんが、公式サイトでは実際に遊べるゲームがROMとして読み込めるようになっています。音は鳴らないようですが、FPSは60近く出ており十分遊べるレベルです。 JSGBはJavaScript製、GPLのオープンソース・ソフトウェアです。 MOONGIFT

さて、いよいよ今年もあと2日。今日で仕事納めという方も多いのではないでしょうか。 年末まとめ記事もそろそろ書くことが無くなってきましたので、今回は管理者がFirefoxの情報を得たりブログ記事にするためのネタ元として購読しているウェブサイトやブログなどをご紹介したいと思います。 ご紹介するサイトはオフィシャルページやオフィシャルブログなど皆さんおなじみのサイトから、海外の個人ブログまで様々ですが、どれも読んで役立つものばかりですので参考にしてみてください。 *（en）は英語サイト（ja）は日本語サイトです。また、（RSS）と記載したサイトはフィードが提供されています。 1.Mozilla Wiki-Releases（en） Firefoxをはじめ、ThunderbirdなどMozillaソフトウェアのリリース日などがまとめられた公式ページです。内容は随時変更されますが、ここをチェックしてい

Firefoxユーザーの皆さんは今年どんなアドオンを導入・利用されたでしょうか。 私も毎日のように複数のアドオンをテストし、記事としてご紹介してきましたが、多くの魅力的なアドオンの中でも常用するのはそのほんの一部に過ぎません。今回は、そんな管理者が2011年お世話になった素晴らしいアドオンをまとめてご紹介したいと思います。 1．About config button ツールバーに専用のボタンを設置すれば、about:configをワンタッチで開くことができるようになります。設定を頻繁に変更する方におすすめです。 2．Add to Search Bar お気に入りサイトの検索窓を自分の検索エンジンリストへ簡単に登録できます。 参考記事：あらゆるサイトの検索窓をFirefoxに追加する「Add to Search Bar」 3．All-in-One Sidebar 説明不要のサイドバーパワーア

人体の描き方から、塗り、色調補正、背景、絵の上達法まで、 あらゆる絵の描き方を学べるpixiv講座。 その中で、特におすすめの講座・メイキングをまとめました。 【人体講座】 動きのあるポーズを描く時に）ry 手の描き方 手の苦手な人の為に 個人的な腕（肘）肩の描き方 個人的下半身の描き方 横顔が安定しない人のための描き方講座 【講座】人が上手く描けない、描きたいひとへ【まがい】 お手軽　足とか講座 萌え絵の顔の見方と描く方法 人体パース講座 人体研究 【講座】手を描くときのコツ 肩と胸部 足の3つのアーチ 首と肩の構造 【講座】目の描き分け特集【超初心者向け】 目のメイキング 目を色々な種類・角度で自然に見せるコツ あんまり才能のいらない絵の描き方 筋肉を描いてみよう！ 【イラストテクニック】 布の描き方・基礎編 超簡単レースの描き方 パンツ講座 服のしわの塗り方まとめ フリルの描き方講座

Writen by Bogdan+ / Comments Off on 15 Very Creative Examples of Business Cards In this article you will see 15 examples of very creative business card designs which I found last week. Some of them are so daring that they are rising this type of design to another level. Check them out and tell me what do you think.  For example, would you use one similar to Megan Harrigan’s business card? TrafficG

このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。

Recreating the Nikebetterworld.com Parallax Effect パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル。 単なるスライダーではなく背景とコンテンツが別々に動くスライダーが作れます。 パララックス効果を使うことで奥行きを出せて画面が切り替わるインパクトも強くすることができますね 見本は nikebetterworld.com というnikeのサイトです。インパクト重視なサイトを作りたい場合に使えそうですね 関連エントリ ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超

カスタム投稿タイプ、非常に便利ですよね。 しかしデフォルトでは一覧ページを使うことはできません。 固定ページを作成し、そこからget_postsやquery_postsなどで読み出すような使い方でもいいんですが、これではスマートじゃないですよね。 日本語のリファレンスには載っていなかったんですが、カスタム投稿タイプの設定時にhas_archiveパラメータを設定してあげると良いようです。 register_post_typeにhas_archiveをセット function my_custom_post_type() { // ニュースの投稿タイプ $labels = array( 'name' => '新着情報', 'singular_name' => '新着情報', 'all_items' => '新着情報一覧', 'add_new_item' => '新着情報を追加', 'add_

CSSファイルに変更を加えてもページのリフレッシュ無しで変更を反映させるスクリプト（とブックマークレット）を紹介します。 CSSrefresh - automatically refresh CSS files [ad#ad-2] CSSrefreshは制作時に役立つスクリプトで、CSSファイルに変更を加えて保存すると、ページのリフレッシュ無しで変更を反映させます。 CSSrefreshの使い方 使い方は簡単で、2通りあります。 CSSrefreshをインクルードする 使用するページにCSSrefreshを外部スクリプトとして記述します。 <head> <link rel="stylesheet" type="text/css" href="css/site.css" /> <script type="text/javascript" src="js/cssrefresh.js"></sc

さくらのクラウドを設定するなど試してみました。 IaaS型パブリッククラウド「さくらのクラウド」｜さくらインターネット 基本的な仕様について いろんなことができるようですが、かなり大規模なサイトを運用する目的じゃなければルーターとか必要なさそうなので、専有サーバ1個作る気分でサーバーと追加ディスクのみでOKだと思います。 追加ディスクについて 基本的にサーバーの容量は20GBで、容量がたくさん欲しい場合は追加ディスクを契約して増やしていきます。 それでも初心者視点で当初、100GBのディスクを作って足りなくなったら200GBと、どんどん増やしていけるものだと思っていましたが、実際には100GBのディスクを作ったらそれはそのまま、さらに必要になったら100GBのディスクを新しく契約して追加という感じです。 ※未確認ですが予めディスクを用意しておけば最初から大容量でも可能かもしれないです。 追

*filter :INPUT ACCEPT [0:0] :FORWARD ACCEPT [0:0] :OUTPUT ACCEPT [0:0] :RH-Firewall-1-INPUT - [0:0] -A INPUT -j RH-Firewall-1-INPUT -A FORWARD -j RH-Firewall-1-INPUT -A RH-Firewall-1-INPUT -i lo -j ACCEPT -A RH-Firewall-1-INPUT -p icmp --icmp-type any -j ACCEPT -A RH-Firewall-1-INPUT -p 50 -j ACCEPT -A RH-Firewall-1-INPUT -p 51 -j ACCEPT -A RH-Firewall-1-INPUT -p udp --dport 5353 -d 224.0.0.251 -j

Toxiclibs.js - Open-Source Library for Computational Design ド派手なビジュアリゼーションを実現できるJSライブラリ「Toxiclibs.js」 WebGLなんかも活用しつつグラフィカルな図形描画ができるライブラリです。 他のライブラリを必要とせず単体で動作するとのこと。 こうしたライブラリを使うことはあまりないかもしれませんが、知っておくといざ組むって時には使うと便利そうですね。 関連エントリ データのビジュアリゼーションに使えるJSライブラリ「d3.js」

Twitterの検索結果をリアルタイム表示するjQueryプラグイン「monitter」を紹介します。スクリーンショットは「Android」の検索結果をリアルタイム表示したものです。 このプラグインはやや古いもので、現在では公式の検索ウィジェットもありますが、公式のものは日本語の設定が面倒なのとデザインが限られるので、意外にこちらの方が使いやすいかもしれません。 １．機能 Twitterの検索APIとjQueryプラグインを組み合わせてウィジェットをウェブサイトに表示し、ウィジェットに検索結果をリアルタイムで表示します。 ウィジェットは1つのページに複数設置できます。設定方法については４項以降で解説します。 ２．公式サイトのデモ 公式サイトでデモを確認できるので、操作方法を紹介します。 公式サイトの「monitter」にアクセスします。 ページ左上にある「tweets containing

本年も皆様のおかげで多数のアドオンをご紹介させていただきましたが、1日に1記事強しか書けないこともあり、まだまだ紹介しきれていない便利なアドオンが山のようにあります。 そこで今回は、不定期まとめ記事として、紹介しきれなかったちょっといいアドオンを一気にご紹介したいと思います。 どれも一つの記事にするほど高機能だったりするわけではありませんが、きっとどなたかのお役に立てるものがあると思いますので、おつきあいください。 1．Right-Aligned Bookmarks Bar ブックマークツールバーをタブバーなどに移動した際、アイテム全体を右寄せにしてスペースを稼ぎます。 2.AddressBarCleaner ロケーションバー右側に表示されているアドレスをクリアできるiPhoneライクな[×]ボタンを追加します。 3．About config button ツールバーカスタマイズにより、a

Ember.jsは旧SproutCoreの後継プロジェクトです。リッチなWebアプリケーションフレームワークになります。 SproutCoreがFacebookに買収されました。SproutCoreはリッチなWebアプリケーションを開発できるフレームワークですが、今後の開発についてはEmber.jsとして継続される模様です。 スマートフォンに特化している訳ではありませんが利用できます。 デスクトップ向けでHello World。 コードを見ると分かりますが、HTMLを直接ではなく、テンプレートです。 デモのTodoアプリです。 登録したりチェックして削除したりできます。データは保存していないので再読み込みすると消えます。 Todoアプリのコード。こちらはビュー側です。 こちらはコントローラ、モデル側。コードは見やすいです。 Ember.jsはMVCに分かれており、コードも見やすく使い勝手が

LaptopはUbuntu、Mac OSXのRuby on Rails開発環境をまとめてセットアップします。 これからRailsの勝発をはじめてみたい、そう思ったMac OSX/Ubuntu利用者にお勧めなのがLaptopです。30分であなたのマシンが開発マシンに様変わりします。 例えばこれがMac OSX用。 こちらはUbuntu用。 インストールされるソフトウェアです。 Laptopはたった一行のコードを実行するだけで多種多様なソフトウェアが一気にインストールされます。Homebrew（Mac OSXの場合のみ）/QT/Ack/Tmux/Postgres/Redis/ImageMagick/RVM/Ruby 1.9.2/Rails/Heroku/Tapsなどがインストールされます。ネットワーク状況によりますが、だいたい30分はかかるとのことです。 LaptopはBashスクリプト製、M

Backbone.jsとは？ Backbone.jsは、JavaScriptによる大規模なアプリケーション開発を行う際に力を発揮するMVCフレームワークです。データバインディングとカスタムイベントを備えたModel、配列情報を表すCollection、イベントをハンドリングするView、サーバーサイドのアプリケーションと連携するためのRESTful JSONなどをフレームワークとして備えています。 大規模な業務アプリケーションのユーザーインタフェースをJavaScriptでゴリゴリと作ろうとした場合、100%に近い確率で失敗するかと思います。これは、Flexのようなビルド時のコンパイラエラーを検出できないこと、存在するフレームワークがインタラクションやビジュアルに特化していること、ブラウザーやOSの組合せでAPIレベルの仕様が異なる事、同じブラウザーでもバージョンの違いにより挙動が異なる事