ラベル ライブラリ の投稿を表示しています。すべての投稿を表示

2015年11月2日月曜日

【WEB】マウスホバーエフェクトの導入

今回はGitHubに公開されているcssライブラリ（Hover.cssファイル）を導入することで、
手軽にマウスがのった時のボタンやリンクの動作（ホバーエフェクト）を設定する方法をご紹介いたします。

しばらくAndroidアプリ開発からは離れHTMLやCSSを利用したWEB開発の方法を紹介していますが、
これも後々アプリ開発に繋がると思っていますので今は情報をまとめておきたいと思います(^^;

Hover.cssの導入手順

導入手順は以下のとおりです。
ブログなどに導入する場合は＜HEAD＞タグが編集できる必要があります。

①Hover.cssをダウンロードします。

②ダウンロードは以下のページにアクセスして「Download ZIP」から行います。

　https://github.com/IanLunn/Hover

③「Hover-master.zip」というファイルがダウンロードされますので、

　中の「css」フォルダにある「Hover.css」ファイルをコピーしておきます。

④「Hover.css」をWEB上に公開し、以下のようにHEADタグ内に記載します。

<head>
    <link href="css/hover-min.css" rel="stylesheet">
</head>

Demo

主な動作としては、開発者の方がDemo用のページを用意していますので、まずはそちらをご覧ください。

http://ianlunn.github.io/Hover/

Demoではボタンのみの動作を紹介していましたが、これはリンクでも画像でも利用可能です。

Pulse

ボタン以外にも「Hover.css」を有効活用できる効果的な利用方法を紹介していきたいと思います。

テキスト編

ほたるの光　まどの雪
書（ふみ）よむつき日　かさねつつ
いつしか年も　すぎのとを
あけてぞけさは　わかれゆく

ほたるの光
まどの雪
書（ふみ）よむつき日
かさねつつ
いつしか年も
すぎのとを
あけてぞけさは
わかれゆく

画像編

随時更新予定…

2014年11月19日水曜日

【アプリ開発】ライブラリ導入－JazzyViewPager

今回新しいアプリを作成中で、そのアプリに新規にライブラリを導入してみましたので紹介していきます(^o^)／

ページを左右にフリックする際に様々なエフェクトを追加できるライブラリです。

❏JazzyViewPager

ページ切替の際に色々と効果を入れてみたいと思っていましたが手を出せずにいましたので、
まずはライブラリで試していきたいと思います(^^ゞ

エフェクト一覧（TrasitionEffect）

全部で12種類あるようです。
設定でそれぞれ切り替えれるようにしてみましたので、それぞれのイメージも載せていきます。

Standard
Tablet
CubeIn
CubeOut
FlipVertical
FlipHorizontal
Stack
ZoomIn
ZoomOut
RotateUp
RotateDown
Accordion

1.Standard

一般的なフリックでのページ切替動作になります。
普通にどのアプリでもみかける動作ですね。

2.Tablet

タブレットでみられるページ切替動作のようです。
タブレット自体あまり操作していませんが、実際はこうゆう動作をしているんでしょうね(^^;

3.CubeIn

手前側を中心にページが回転するようなページ切替動作になります。
3Dダンジョンなんかで視点が回転するようなイメージでしょうか(´・ω・`)

4.CubeOut

奥側を中心にページが回転するようなページ切替動作になります。
両方のページを見ることができるので、両方のページを確認したいときなんかに便利そうです♪

2014年6月13日金曜日

GitHubなんかで公開されている数多くのライブラリのサンプルを実際にアプリ内でダウンロードして実行できるデモアプリです。全部確認してみましたが、自分のアプリにも取り入れたい物が結構ありましたので、いずれ使っていきたいですね。

動作している端末によっては、デモの内起動できないものもありますが、デモ自体は随時更新されているので、日々新しいライブラリを確認することができてとても便利です☆

今回その中で、簡単に組み込めそうで今後使っていきたいと思っているものを紹介していきます(^O^)／

①PagedDragDropGrid

このライブラリはグリッドで画像等を表示し、アイテムを長押しするとそのアイテムを別な場所に
移動することができます。自動で並び替えをせず、ユーザーが好きに並び順を決めたい場合に
使えるかと思います。

データフォルダでは自動で並び替えているため使いドコロが今のところありませんが、
いずれ新しいアプリででも使用してみたいライブラリです(^^)

対応OS:Android2.2(API 8)以上

②Showcase View

最近色々なアプリでみかけるようになったライブラリですね。
ヘルプやチュートリアルなどで、操作の説明するときなどに使われています。
ボタンを強調してテキストで説明したり、アニメーションによる解説、強調位置を移動させて順々に説明することができます。

使える用途も多いかと思いますし、初回のチュートリアルなんかで丁寧に解説したいときに取り入れていきたいなと思っています。

できれば説明なしに直感で使えるアプリにできることが理想ですけど、
機能を増やすとどうしても説明が必要になってきますしね(^^;

③ArchMenu

画面上には２つのボタンがありますが、左上のボタンをタッチするとボタンからみぎにメニューが飛び出します。

その下のボタンをタッチすると右上にメニューがそれぞれ飛び出してきます。

NEXUS5では解像度の関係でメニューが小さく表示されてしまっているようですが、調整できれば

ビジュアル的にもよさ気なので、ゲーム等のアプリを作った際には試してみたいライブラリです。

色々ライブラリを見つけてて思うのですが、使いドコロを考えるのが難しいですよね(^^;

対応OS:Android 2.0以上