Monthly Archives: January 2015

Xcode:Storyboard で Unsupported Configuration の警告が出た場合の解決法

Xcode 6 になってから更に使いやすくなった Storyboard ですが、この Storyboard で作業を行っているときに発生する Unsupported Configuration という警告の解決法のメモです。 storyboard で Unsupported Configuration の警告が出た場合の解決法 この左端に出ている Unsupported Configuration は ViewController を Storyboard 上に配置した場合に発生します。解決法は… 右のインスペクター から Identity inspector > Identity > Storyboard ID に ViewController の ID を定義すれば警告は解除されます。 まとめ これまで Storyboad を避けてコーディングでレイアウトを行っていましたが、今後 Apple のデバイスの画面サイズが多岐に渡る可能性を考えると、Storyboard や Auto Layout は iOSアプリ開発に必須と言えるのではないでしょうか。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:iOSアプリ起動画面(スプラッシュ)を動画に変更する

アプリが起動すると表示されるスプラッシュ画像は Xcode 上で設定すれば簡単に表示されますが、このスプラッシュ画像を静止画ではなく動画にしたいと思ったことはないでしょうか。 今回はこのスプラッシュ画像を動画にする方法を紹介したいと思います。 アプリ起動画面(スプラッシュ)を動画に変更する 冒頭ではアプリの起動画面に動画を表示すると述べていますが、具体的には通常のスプラッシュの後に mp4 等の動画ファイルを再生する方法を説明していきます。 通常のスプラッシュ画像は設定をしないか、アニメーションの背景色と同じ画像を設定しておくことで、スプラッシュが動画になっているように見せるというものです。 概要 動画ファイルを準備する Xcode プロジェクトに動画ファイルをコピーする 必要なフレームワークのインポート AppDelegate.m にコードを記述する アプリをビルドし確認する 手順詳細 動画ファイルを準備する 起動時に表示したい動画ファイルをあらかじめ準備しておきます。Objective-C のプレイヤーがサポートしている形式 mp4、mov、avi、mpg 等で出力したものであれば問題なく使用できるかと思います。 Xcode プロジェクトに動画ファイルをコピー (1)で準備した動画ファイルを Xcode のプロジェクトにドラッグして追加します。ここでは SpriteKit Game のテンプレートを使用しています。 Destination の Copy items… にチェック、Create Groups… を選択し、Add to targets をチェック し Finish をクリックします。 必要なフレームワークのインポート 動画の再生に必要なフレームワークをインポートします。 プロジェクトの設定 General の Linked Frameworks and Libraries 項目の 「+」をクリックし MediaPlayer.framework を追加します。 AppDelegate.m にコードを記述する AppDelegate.m のソースコードを開き #import “AppDelegate.h” の下に MPMoviePlayerViewController を定義します。 次に – (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions メソッドに以下のコードを追加します。 続いて上記メソッドの下に動画再生後に実行される以下のメソッドを追加します。このメソッドでは動画再生完了後に、画面がブラックアウトするアニメーションを再生、ブラックアウト完了後にスプラッシュに関連するビューを削除するというものです。 このメソッドは動画の内容に応じて実行する内容を変更しても構いません。 アプリをビルドし確認する ビルドしアプリが起動すれば、起動時に動画が再生され、再生完了後に ViewController の画面が表示されます。 まとめ アプリがダウンロードされるかどうかは、もちろんアプリそのものの出来不出来こそが重要なファクターですが、アプリを起動したときの画面に動きがあるだけで「このアプリはちゃんと一手間かけて作られているんだな」という印象をユーザーに対し与えることが出来ます。 アニメーションの制作から実装まで、全ての工数を考えると大変手間のかかる作業ですが、多数のアプリのなかから差別化をはかり、アプリのブランディング力を高めるためにとても効果的ですので、ぜひ一度お試し下さい。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

TIPS:jQuery や JavaScript のアニメーション実行時のチラつきの対処方法(Safari,Chrome対応)

JavaScript(jQuery等)でスライドショー等の動きのある表現を行なったとき、アニメーションに連動して要素の一部分、もしくは画面全体かけて文字等がちらつく(フリッカー)現象が発生することがあります。 挙動自体に問題はなく発生範囲が限定的であっても、一度目にすると看過するわけにはいかないものです。 今回はこの問題を解決する方法をメモしておきたいと思います。 問題発生の原因によっては、今回紹介するパターンでは解決できない場合もありますが、是非一度お試しください。 jQuery や JavaScript のスライドショー実行時のチラつきの対処方法 中見出し まず、原因ですが、チラつきの現象がおこる対象はスタイルに position: relative が適用されている可能性が非常に高いです。 この場合であれば、以下の方法にてチラつきが解決できるかと思います。 いくつか解決パターンがあるので、上から順番に試していってみてください。 スライドショー等のアニメーションが実行されている要素のレイヤーを最前面にする 要素の position に relative が適用されている場合は z-index:1; (もしくは1以上の数値)を追加します。 スタイルシートに1行加える メインのスタイルシートの先頭に以下の1行を追加して下さい。{}は不必要です。 問題が発生する要素に position: relative を適用しない チラつきの対象に position: relative が意味もなく適用されている場合は、このスタイルを削除することで解決します。以下の例ではコメントアウトで対処しています。 まとめ この他にも、ネガティブマージンを指定している場合にも似たような問題が発生するときがあるみたいです。CSS の継承や擬似要素、擬似クラス等に関してもまだまだ勉強が必要ですね。 CSS に関してはまた別の機会に掘り下げてみようと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tools:HTMLのテーブルタグ生成ツール

自分用にHTMLのテーブルタグを出力するスクリプトを作成しました。 シンプルな row と col のみの出力となります。 テーブルタグ生成ツール row: col : 結果 まとめ 今回のツールは手抜きではなく、これしか必要なかったのです。。。Zencoding とか emmet を使えって話なんですけどね(笑) この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。