ラベル コード の投稿を表示しています。 すべての投稿を表示
ラベル コード の投稿を表示しています。 すべての投稿を表示

2015年11月7日土曜日

【HTML】【CSS】コピペで使えるサンプル集-引用部分編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは他サイトから文章を引用した時に使う引用部分(brockquote)のデザインについて
コピペだけで利用できるタグを紹介してきたいと思います。

CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、
画像は使用しません。


■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください


関連記事

【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)
【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)
【HTML】【CSS】コピペで使えるサンプル集-ボタン編
【HTML】【CSS】コピペで使えるサンプル集-背景編



────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

引用部分サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────


「引用部分①」
画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEを
いろいろデザインする




引用部分②
ここに引用する文章を記載してください。



Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples.
tympanus




【HTML】【CSS】コピペで使えるサンプル集-背景編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここではホームページやブログのデザインに大きく営業する背景や模様について
コピペだけで利用できるタグを紹介してきたいと思います。

CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、
画像は使用しません。


■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください


関連記事

【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)
【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)
【HTML】【CSS】コピペで使えるサンプル集-ボタン編
【HTML】【CSS】コピペで使えるサンプル集-引用部分編


────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

背景サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

背景・模様①



背景・模様②



背景・模様③



2015年11月1日日曜日

【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは以前紹介した見出し編(シンプル)に少し多めにCSSを使って、少し凝ったデザインの見出しをまとめていきます。


CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しています。
画像は使用しておりません。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・見出しのタイトルは書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください


関連記事

【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)
【HTML】【CSS】コピペで使えるサンプル集-ボタン編
【HTML】【CSS】コピペで使えるサンプル集-背景編
【HTML】【CSS】コピペで使えるサンプル集-引用部分編



────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

見出しサンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

見出し①




見出し②




見出し③





2015年10月29日木曜日

【HTML】【CSS】コピペで使えるサンプル集-ボタン編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

第二弾は「ボタン」編として一般的に使用されているようなものをまとめていきます。
コピペだけで使用可能なものだけを紹介しています。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・ボタンのキャプションはご使用時には書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください

関連記事

【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)
【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)
【HTML】【CSS】コピペで使えるサンプル集-背景編



────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

ボタン サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

※マウスを載せた時の動作は【WEB】マウスホバーエフェクトの導入の方法を利用しています。














2015年10月10日土曜日

【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは見出し編として一般的にブログ等で使用されているシンプルな見出しをまとめてみましたので、
気に入ったものがあればご利用ください(^o^)/

CSSがわかる方は色や大きさも好きにカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しています。
画像は使用しておりません。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・見出しのタイトルは書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください


関連記事

【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)
【HTML】【CSS】コピペで使えるサンプル集-ボタン編
【HTML】【CSS】コピペで使えるサンプル集-背景編



────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

見出しサンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

見出し①



見出し②




見出し③





2015年8月31日月曜日

【アプリ開発】アプリのショートカットを作成

しばらくぶりの更新となってしまいましたが、
アプリのショートカットの作成方法について書いていきたいと思います。
更新が不定期ですいませんm(_ _)m


データフォルダアプリでもアプリのショートカットを作成する方法を用いて対応していますので、
今回その点について関数にまとめたりしたのでサンプルコードとして紹介しておきたいと思います。

❏パーミッション


必要なパーミッションは、アプリからショートカットを作成するためのパーミッションを追加します。
    <uses-permission android:name="com.android.launcher.permission.INSTALL_SHORTCUT"></uses-permission>

もしアプリからショートカットを削除する場合には、次のパーミッションも追加しておきます。
    <uses-permission android:name="com.android.launcher.permission.UNINSTALL_SHORTCUT"></uses-permission>


❏サンプルコード

このコードは、ギャラリーからintentで画像を取得して、取得した画像でショートカット作成を行うサンプルコードになります。
 @Override
 protected void onActivityResult(int requestCode, int resultCode, Intent data)
 {
  if(requestCode == REQUEST_GALLERY && resultCode == RESULT_OK)
  {
   try {
    InputStream in = getContentResolver().openInputStream(data.getData());
    Bitmap img = BitmapFactory.decodeStream(in);
    in.close();
    // 選択した画像をアイコン(ショートカット)として追加
    shortcutAdd(getString(R.string.app_name), img);
   } catch (Exception e) {
    e.printStackTrace();
   }
  }

 }

 /*********************************************************************
  * アイコン(ショートカット)の作成
  *********************************************************************/
 private void shortcutAdd(String name, Bitmap bmp)
 {
  // Delete Shortcut
  shortcutDel(name);

  // Intent to be send, when shortcut is pressed by user ("launched")
  Intent shortcutIntent = new Intent(Intent.ACTION_MAIN);
  shortcutIntent.setClassName(this, MainActivity.class.getName());

  Bitmap scaledBitmap = Bitmap.createScaledBitmap(bmp, 128, 128, true);

  // Decorate the shortcut
  Intent addIntent = new Intent();
  addIntent.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);
  addIntent.putExtra(Intent.EXTRA_SHORTCUT_NAME, name);
  addIntent.putExtra(Intent.EXTRA_SHORTCUT_ICON, scaledBitmap);
  //addIntent.putExtra(Intent.EXTRA_SHORTCUT_ICON_RESOURCE, icon);

  // Inform launcher to create shortcut
  addIntent.setAction("com.android.launcher.action.INSTALL_SHORTCUT");
  sendBroadcast(addIntent);
 }

 /*********************************************************************
  * アイコン(ショートカット)の削除
  *********************************************************************/
 private void shortcutDel(String name)
 {
  // Intent to be send, when shortcut is pressed by user ("launched")
  Intent shortcutIntent = new Intent(Intent.ACTION_MAIN);
  shortcutIntent.setClassName(this, MainActivity.class.getName());

  // Decorate the shortcut
  Intent delIntent = new Intent();
  delIntent.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);
  delIntent.putExtra(Intent.EXTRA_SHORTCUT_NAME, name);

  // Inform launcher to remove shortcut
  delIntent.setAction("com.android.launcher.action.UNINSTALL_SHORTCUT");
  sendBroadcast(delIntent);
 }

ショートカットの作成には"com.android.launcher.action.INSTALL_SHORTCUT"のIntentを
ブロードキャスト送信することで行います。
ブロードキャスト送信に渡すIntentには各情報をputExtraで渡して設定します。
Intent.EXTRA_SHORTCUT_INTENTには、作成するショートカットアイコンのclassを設定したIntentを渡します。
Intent.EXTRA_SHORTCUT_NAMEには、作成するショートカットの名前のStringを渡します。
Intent.EXTRA_SHORTCUT_ICONには、作成するショートカットアイコンのBitmapを渡します。
Intent.EXTRA_SHORTCUT_ICON_RESOURCEを使用すれば、リソース(Parcelable)を渡すことでも
作成するショートカットアイコンの設定が可能です。

Intent.EXTRA_SHORTCUT_ICONでBitmapを渡す際は、サイズが大きすぎると設定されないため、アイコンサイズを128x128位に設定しています。

ショートカットの削除する場合には"com.android.launcher.action.UNINSTALL_SHORTCUT"のIntentをブロードキャスト送信することで行います。

❏その他

今回のサンプルコードはショートカットのアイコンをギャラリーから選択して好きなアイコンに設定して作成できるものを
想定しています。

アプリのアイコンについて動的に変更させたいと思っていたのですが、
アプリのアイコンの指定はAndroidManifest.xmlで行われているため、アプリが動作している最中に
直接編集することはできないため、動的な変更は無理であることがわかりましたΣ(゚Д゚)
その代替案として、ショートカットを作成することで対応できる場合もあるかなと思います。

2014年8月14日木曜日

【アプリ開発】ProgressBarの色

今回プログレスバーの色の設定で少し戸惑ったため処理方法を書き留めておきます。


ProgressBarの色の設定方法

プログレスバーの色を変更して表示するための方法です。

 <!-- 読込中表示プログレスバー -->
 <ProgressBar
         android:id="@+id/loadingProgress"
         style="?android:attr/progressBarStyleHorizontal"
         android:progressDrawable="@drawable/ic_progress_green"
         android:layout_width="match_parent"
         android:layout_height="3dp"/>


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:id="@android:id/background">
     <shape>
  <corners android:radius="5dip" />
  <gradient
   android:startColor="#000000"
   android:centerColor="#000000"
   android:centerY="0.5"
   android:endColor="#000000"
   android:angle="270"
  />
  </shape>
 </item>
 <item android:id="@android:id/progress">
  <clip>
  <shape>
  <corners android:radius="5dip" />
  <gradient
   android:startColor="@color/holo_green_dark"
   android:centerColor="@color/holo_green_light"
   android:centerY="0.5"
   android:endColor="@color/holo_green_dark"
   android:angle="270"
  />
  </shape>
  </clip>
 </item>
</layer-list>




ProgressBarのアニメーション表示

プログレスバーを読み込み中のようにアニメーション表示するための方法です。


     <!-- 読込中表示プログレスバー -->
     <ProgressBar
         android:id="@+id/loadingProgress"
         android:layout_width="match_parent"
         android:layout_height="3dp"
         android:indeterminateDrawable="@drawable/ic_progress_indeterminate_green" />




<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >
    <item android:duration="200">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerY="1.0"
                android:endColor="@color/holo_green_dark"
                android:centerColor="@color/holo_green_light"
                android:startColor="@color/holo_green_dark"
                android:type="linear" />
        </shape>
    </item>
    <item android:duration="50">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerY="0.8"
                android:endColor="@color/holo_green_dark"
                android:centerColor="@color/holo_green_light"
                android:startColor="@color/holo_green_dark"
                android:type="linear" />
        </shape>
    </item>
    <item android:duration="50">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerY="0.6"
                android:endColor="@color/holo_green_dark"
                android:centerColor="@color/holo_green_light"
                android:startColor="@color/holo_green_dark"
                android:type="linear" />
        </shape>
    </item>
    <item android:duration="50">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerY="0.4"
                android:endColor="@color/holo_green_dark"
                android:centerColor="@color/holo_green_light"
                android:startColor="@color/holo_green_dark"
                android:type="linear" />
        </shape>
    </item>
    <item android:duration="50">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerY="0.2"
                android:endColor="@color/holo_green_dark"
                android:centerColor="@color/holo_green_light"
                android:startColor="@color/holo_green_dark"
                android:type="linear" />
        </shape>
    </item>
    <item android:duration="70">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerY="0.0"
                android:endColor="@color/holo_green_dark"
                android:centerColor="@color/holo_green_normal"
                android:startColor="@color/holo_green_dark"
                android:type="linear" />
        </shape>
    </item>

    <item android:duration="100">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerY="0.2"
                android:endColor="@color/holo_green_dark"
                android:centerColor="@color/holo_green_normal"
                android:startColor="@color/holo_green_dark"
                android:type="linear" />
        </shape>
    </item>
    <item android:duration="100">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerY="0.4"
                android:endColor="@color/holo_green_dark"
                android:centerColor="@color/holo_green_normal"
                android:startColor="@color/holo_green_dark"
                android:type="linear" />
        </shape>
    </item>
    <item android:duration="100">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerY="0.6"
                android:endColor="@color/holo_green_dark"
                android:centerColor="@color/holo_green_normal"
                android:startColor="@color/holo_green_dark"
                android:type="linear" />
        </shape>
    </item>
    <item android:duration="100">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerY="0.8"
                android:endColor="@color/holo_green_dark"
                android:centerColor="@color/holo_green_normal"
                android:startColor="@color/holo_green_dark"
                android:type="linear" />
        </shape>
    </item>
    <item android:duration="100">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerY="1.0"
                android:endColor="@color/holo_green_dark"
                android:centerColor="@color/holo_green_normal"
                android:startColor="@color/holo_green_dark"
                android:type="linear" />
        </shape>
    </item>

</animation-list>

2014年4月4日金曜日

【アプリ開発】アニメーションGIF画像の再生

最近データフォルダでアニメーションGIF画像の再生に対応してアップデートしました(^O^)
Googleでも画像検索で最近Gif画像の再生に対応しましたね(^^)

データフォルダでは、以前からアニメーションGIF画像の再生には対応していましたが、
ViewPagerタイプの画像表示画面では対応していなかったため、
ImageViewを拡張したGifImageViewを作成し派生させて利用しました。


アニメーションGif画像を表示する方法は2通りあるため、
ここではその2つのGifImageViewを紹介したいと思います。

Movieクラスを使用したアニメーションGIF画像の再生
GifDecoderを使用したアニメーションGIF画像の再生



Movieクラスを使用したアニメーションGIF画像の再生

public class GifImageView extends ImageView 
{
    private Movie mMovie;

    private long mMoviestart;

    public GifImageView(Context context, InputStream stream) {
        super(context);
        
        mMovie = Movie.decodeStream(stream);        
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.TRANSPARENT);
        super.onDraw(canvas);
        final long now = SystemClock.uptimeMillis();

        if (mMoviestart == 0) { 
            mMoviestart = now;
        }

        final int relTime = (int)((now - mMoviestart) % mMovie.duration());
        mMovie.setTime(relTime);
        mMovie.draw(canvas, 10, 10);
        this.invalidate();
    }
}

まず、ImageViewを拡張したGifImageView内に
アニメーションGIF画像再生用のMovieクラスのメンバ変数を持たせ、
GIF画像をInputStreamとして渡してMovieクラスにdecodeStreamで読み込ませて再生させます。

割りと簡単に実装ができ、Movieクラスの動作はNativeであるため、軽快に動作しますが、全てのGIF画像には対応していないため、その場合にはGifDecoderを使用して動作させると良いかと
思います。


2013年11月14日木曜日

【アプリ開発】ActionBarSherlockからActionBarActivityへの切替作業まとめ

データフォルダでは「ActionBarSherlock」を使用してアクションバーを実装していましたが、
サポートライブラリ v7 でアクションバーが実装されたため、全面的に切り替えを行いました。

ちょっと調べてみると簡単に切り替えられます、とあったのですが、
細かいところで意外に苦戦しました(^^;

その時に覚書として作業をメモっておきます。
後々まとめます。

事前準備

サポートライブラリに含まれる android-support-v7-appcompatプロジェクトをインポートし、
対象となるアプリの依存するライブラリとして、
プロジェクトの[プロパティー]→[Android]内のライブラリで設定してから、以下の作業を行いました。


変更作業

①継承するクラスの変更
 ・SherlockFragmentActivity → ActionBarActivity
 ・SherlockActivity       → ActionBarActivity


②テーマの変更
 ・setTheme(R.Style.Theme_Sherlock); → setTheme(R.Style.Theme_AppCompat);
 ・setTheme(R.Style.Theme_Sherlock_Translucent);  → setTheme(R.Style.Theme_AppCompat);
                                  (代わりになるのが見つからなかった…)

③メニューアイコン設定の変更
 ・subMenu.getItem().setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
     ↓
  MenuItemCompat.setShowAsAction(subMenu.getItem(), MenuItemCompat.SHOW_AS_ACTION_ALWAYS);


④アクションバー関係の変更
 import android.app.ActionBar; → import android.support.v7.app.ActionBar;
 Activity.getActionBar() → ActionBarActivity.getSupportActionBar()


⑤画像の変更※ActionBarSherlockのプロジェクトから画像を呼び出している箇所
abs__ic_menu_moreoverflow_normal_holo_light → abc_ic_menu_moreoverflow_normal_holo_light



その他

■ActionBarActivityで用意されているテーマ
 Theme.AppCompat
 Theme.AppCompat.Light
 Theme.AppCompat.Light.DarkActionBar


■問題点
・サブメニュー関係がダイアログで表示される
 → リストでの表示は難しい?
・サブメニューが開かなくなる場合がある
 →要調査



■他サイト資料
 →つ部 Android 勉強会 2013年9月 発表資料 (Slide Share)