著者アーカイブ asaba

asaba 著者:asaba

【html5】ラジオボタンをどのデバイスでも一列に表示させる方法

今回は、inputタグでradioボタンを複数使う時に縦に表示されてしまうradioボタンを、一列に表示させる方法についてお話させて

いただきます。

早速ですが、radioボタンを隣接させるのに一番早い方法は、idとforを使用することです。

forは一般的にコーディングで使用するfor文とは関係ないです。


 <<span class="pl-ent">input</span> type="radio" name="radio02" class="<span class="pl-ent">radio02-input</span>" id="<span class="pl-ent">radio02-01</span>"<span class="pl-k">></span>
 <<span class="pl-ent">label</span> for="<span class="pl-ent">radio02-01</span>"<span class="pl-k">></span>ラジオ01</<span class="pl-ent">label</span><span class="pl-k">></span>

chromeでは無事に表示させることができました。

もしかしたらfirefoxやIEだと違う挙動になってしまうかもしれないですが、chromeAPPでアプリを作る際は

この方法を使っても問題ないと思います。
 

asaba 著者:asaba

【javaScript】constとletの違いを肌で知った

前回記述した、ファイルをアップロードするソースコードを少しいじってmyImageを外の関数からも

参照・代入ができるようにしたかったのですが、ここで少しハマりました。

エラーを見ると、Uncaught TypeError: Assignment to constant variable.at FileReader.reader.onload

かみ砕いてみると「onload内で無効な割り当てがありました。」

一瞬狼狽えましたが、変数の宣言はしていないので間違いなくmyImageに原因があると思いました。

調べてみると、どうやらconstは再代入を許さないらしく、一回初期化をしてしまっているのでもうmyImageには

何も入れられませんという意味を持っていたみたいです。

再代入が許されるのはletとverのみで、こちらは何回も代入することはできますが、何回もアクセスして変数が

目まぐるしく変わるので、メンテンナンスに手こずりそうなので大規模なプロジェクトではやはりconstを

使った方が安全性の面では最良だと感じました。

それでもletは二重の宣言を禁止したりアクセスの幅を狭めたりとconstともそこまで性質は変わらないので、ぎちぎちに

変数のアクセスをしたくないけど安全性を保ったコードを書きたいというかたには向いているかなと感じました。

<script>
      const target = document.getElementById('upload');
    //window.onloadにアクセスができる
      <span style="color: #0000ff;">let myImage = '';</span>
      target.addEventListener('change', function (e) {
        const getImg = document.getElementById('myImage');
        const file = e.target.files[0]
        const reader = new FileReader();
        reader.onload = function (e) {
          getImg.height = 200;
          getImg.src = e.target.result;
          myImage = getImg.src;
          localStorage.setItem('image', myImage);
          console.log(myImage);
        }
        reader.readAsDataURL(file);
      }, false);
      window.onload = function(){
        document.getElementById("submit").addEventListener("click", function(){
          console.log(myImage);
          alert("ボタンが押されました");
        });
      }
    </script></pre>
<pre>

参考にさせていただいたサイト→varじゃだめなの?? constとletを使おう!

asaba 著者:asaba

【html-css-javascript】PureCSSで無骨なページをそれっぽくする

前回は、PureCSSで色々いじくり倒していましたが、今回はちゃんとしたアプリっぽい見た目で作ってみました。

今回は、imgタグとinput fileを使った画像を表示するページを作りました。備忘録ぽいですがご容赦ください。

input fileといえばボタンを押すと画像ギャラリーに飛ぶあのコンテンツです。

メジャーなので知らない人はいないと思いますが、そのままこいつを使うとどうも雰囲気が堅いというかなにも

手を付けていないようで野暮ったいです。

せっかくなので前回でも使ったこのPureCSSで今風のボタンにかえてあげましょう。

html↓

    <div class="thumb-wrapper">
      <img id='myImage'>
    </div>
    <div class="button-wrapper">
      <span class="label">
        画像アップロード
      </span>
        <input type="file" name="upload" id='upload' class="upload-box" placeholder="Upload File">
    </div>

CSS↓


/*画像が表示されるコンテンツの位置調整*/
    .thumb-wrapper {
      position: relative;
      height: 50px;
      text-align: center;
      margin: 20% auto;
    }
/*ボタンの幅と位置の調整*/
    .button-wrapper {
      position: relative;
      width: 150px;
      text-align: center;
      margin: 20% auto;
    }
/*ラベルの設定*/
    .button-wrapper span.label {
      position: relative;
      z-index: 0;
      display: inline-block;
      width: 100%;
      background: #00bfff;
      cursor: pointer;
      color: #fff;
      padding: 10px 0;
      text-transform:uppercase;
      font-size:12px;
    }
/*実際に働くボタン*/
    #upload {
        display: inline-block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 50px;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }

JavaScript。↓

    <script>
      const target = document.getElementById('upload');
      const img = document.getElementById('myImage');
      target.addEventListener('change', function (e) {
        const file = e.target.files[0]
        const reader = new FileReader();
        reader.onload = function (e) {
          img.height = 200;
          img.src = e.target.result;
          console.log(img);
        }
        reader.readAsDataURL(file);
      }, false);
    </script>

script側は従来の画像を表示させる機能だけなので割愛させていただきます。

今回使うオブジェクトは4つ。一つ目は画像が表示された時の場所を調整するCSSです。画面中央にくるように

してありますが、このコンテンツは特にPureCSSの恩恵を受けていないのでそこまで語るまでもないです。

二つ目のCSSははボタンの幅を調整しています。これもアップロードするボタンの位置を決めているだけで

こちらも特にPureCSSの影響は受けません。

三つ目のCSSですが、ここでボタンの基本的な部分を生成しています。

button-wrapper span.labelを指していますが、これはbutton-wrapperタグの中のspan.labelを操作しますよという意味合いに

なります。divの中にspanで定義されているので、それが操作の対象になります。

ここでbackgroundやwidthで調整するとこんな感じに仕上がります。

角があった従来のフォームよりクリーンな出来になりました。

 

最後の#uploadオブジェクトですが、こちらは本来あったあのフォームをposition: absoluteを使い

上のボタンで被せるような役割をもっています。

htmlのinput fileのIDにも書いてあるとおりこちらが本体となっており、前のフォームがラベルに隠れて作業をしていたと考えると

分かりやすいです。

最後にここで実装したフォームの全体画像を載せて終了になります。

 

今回も公式を参考にしたコードです。PureCSSに慣れるまでまだかかりそうなのでご容赦くださいまし。

 

 

asaba 著者:asaba

【html5,CSS】Pure.CSSを少しかじる

開発においてhtml5とCSSを使う機会が増えてきたので、この際その周辺の

フレームワークの使い方でも覚えておこうかなと考えております。

今回使うフレームワークはPure.CSSです。

だけどフレームワークと言ってもまず数が多くどれを使ったらいいか迷いがちです。

一般的(html5やJavaScriptを触ったことがある人)にはCSSのフレームワーク

といえばbootStrapが浮かびますが

このpureCSSというフレームワークは、それよりも軽量で機能もごちゃごちゃしていないので

webでのwebでの開発の幅を広げたいというかたやbootStrapを始めたけど使いにくいというかたにはおすすめだなと感じました。

筆者もCSSのフレームワークに触れることはほぼなかったので学習もかねてブログに跡を残していきたいと思います。

 

例えば、なにも手を付けていない状態だと、大きな画像はブラウザを狭めたときに横にスクロールされてしまいページ枠から飛び出してしまいます。

 

 

このままでは一定の大きさで表示することができないので、さっそくPure.CSSで修正してみました。

<head>の中に<link rel=”stylesheet” href=”https://unpkg.com/purecss@1.0.0/build/pure-min.css”>を入れて

<body>に<img src=“apple.jpg” class=“pure-img”>と記述してみましょう。

すると、見事にブラウザの大きさに合わせてリサイズするようになりました!androidやreactで悩んでいたことがこんな簡単に

できるとは正直考えもしなかったです。classにpure-imgを設定するだけで柔軟に対応できるのですごく使い勝手がいいなと

感じました。

 

これで満足してしまいそうでしたが、まだhtmlの基本でもあるフォームを作っていないことを思い出したので

とりあえず公式のサンプルを見ながら書いてみました。

※コードは、公式に似たようなものがあるのでそちらをご覧ください。

各フォームとセレクトボタンを作ってみました。従来のhtmlで作るボタンと比べると角がないというか今どきの

フォームっぽくて安心感がありますね。(某就活サイトとかブログの新規登録ページとかがこんな感じでした。)

これだけでも達成感がでてしまいましたが、更に掘り進んでテキストとかボタンの色を変えてみたいなとか思いついたので

送信ボタンの色を変えてみました。

ほんとにサンプルで書かれたものに数行スパイスを加えた程度のコーディングでしたが、特にこれといって難しい問題は

見つからずにいい意味でさっぱりとしたフォームだと思いました。

この次はinput type = “file”やimgタグをいじってみようかと思います。もしこっちでも使用感がよければ

主要フレームワークとして使っていきたいなと思います。

asaba 著者:asaba

【javaScript】split関数を使って文字列を分割する方法

先週は丸々一週間androidの記事だったので他の話題も振っていきたいと思います。

splitはStringオブジェクトの組み込みメソッドとして用意されており、文字列を任意の箇所で区切って分割することが可能になります。

今回はそのsplit関数を使ってスラッシュで区切られている値を切り分けて取得する方法を書いていきたいと思います。

はじめに、ごくシンプルなコードで説明していきます。

ここでは例として動物の名前をカンマで区切って、それをsplitで分割していきたいと思います。

[javaScript]
var str = 'user-1,user-2,user-3';

//「, (カンマ)」で区切って分割する

var result = str.split(',');

[/javaScript]

console.logで試してみると、resultの中にしっかりと動物ごとに区切られて格納されていることが分かると思います。

[javaScript]
["うさぎ", "ネコ", "タヌキ"]

[/javaScript]

また、分割された文字列は配列のように番号を指定した取り出すことができます。

取り出す方法は受け取ったresult変数で番号を指定するだけ。ここまで取得できれば後は煮るなり焼くなりで好きなように

各値を扱うことができます。

[javaScript]
const rabbit = result[0];
const cat = result[1];
const raccoon = result[2];
[/javaScript]


reactでも同じ形式で使えるので、splitを使ってみたいという方の参考になればと思います。

ここまでのベーシックな使い方を覚えていれば捻った運用などをしなければ困らないかと思われます。

split関数は、Dateで取得した時刻や生年月日をハイフンやスラッシュで区切って切り分けた度分秒や年月日

を利用したい変数に各々入れて使ったりと小回りが利くので、使いこなせるようになると便利ですね。

asaba 著者:asaba

【cordova-react】componentWillReceivePropsが廃止になっていた話

componentWillReceivePropsというライフサイクルメソッドは最新のstateを受け取って更新することができ、前のページで受け取った値を

上書きしてstateに設定することができるメソッドです。

自分はselectタグで何も入力せずに次のページに進む、つまりデフォルトの値を最新の状態で受け取りたかったので

使っていたのですがずいぶん前に廃止するって決められていたみたいです。

Reactはv16まではこれまでのバージョンとほぼ同じ動きをするように決められていたのですが

v17になってからはRender Phaseという実装がrenderする度に何度も呼ばれ、これがループのようにぐるぐる回ってしまうため

危険視されているみたいですね・・・。

 

render部分がループすれば当然コンポーネントでバグがわんさかでて保守性が著しく落ちてしまうので使うのを避けてくださいなので

代わりにcomponentDidUpdateかUNSAFE_componentWillReceivePropsに置き換えてねという記事を見かけたので

後者のUNSAFE_componentWillReceivePropを使うことにしました。

 

どちらもprop・state共にrenderに影響を及ぼすことなくsetStateできるので値を遷移する前に更新したい

もしくは他の関数の影響を受けないように最後にstateの更新をしたいというかたは今使っているcomponentWillReceiveProps

を避けて上のどちらかに切り替えれば安牌なのかなぁと感じました。

※componentDidUpdateでthis.stateすると、無限にstateし続けることを知ったのでUNSAFE_componentWillReceivePropを

使ってください!!

asaba 著者:asaba

【anadroidJava】続・ExifInterfaceで画像の向きを変える

ExifInterface記事の三回目になります。

前回はExifInterfaceクラスを使って画像の向きを取得していたと思いますが、今回はその画像の向き情報を使って

実際に向きを正しい位置に変えて表示するコードを書いてみようと思います。

まず、通常通りメソッドを書きますが、ここでの引数は前回取得した画像の向き情報が入っている変数locatateになります。

<pre>public void replace(int locatate,Bitmap bitmap){
//ここに処理を書きます
}</pre>

二つ目の引数は、このメソッドを叩く前に取得したBitmapのデータになります。

つまり、まだ正しい向きに修正されていない画像が変数に入っている状態ですね。

ここで実際に向きを変える工程に入りますが、まず最初にMatrixクラスをnewします。

画像を動的に編集する手段は枚挙に暇がありませんが、このMatrix拡大・縮小・回転など画像に関するアクションを全て揃えており

androidで画像をいじるときはよく重宝して使っています。

このmatrixを使う前にswitch文を使って角度別に処理を分けていきたいと思います。

case別で90,180,270とありますが、これは前回のORIENTATION_ROTATE_〇〇に合わせて指定した角度に修正するように

制御しており、引数のlocatateが90ならば一番最初のcase90で処理を受けて加工されていきます。

ORIENTATION_ROTATE_〇〇なんてわかりにくいという方も見受けられますが、慣れてくれば「ああこの角度に修正すればいいのね。」

みたいに感覚で慣れてくると思います。

public void replace(int locatate,Bitmap bitmap){
<pre>    int imageWidth = bitmap.getWidth();
    int imageHeight = bitmap.getHeight();
    Bitmap bitmap2;
    // Matrix インスタンス生成
    Matrix matrix = new Matrix();</pre>
<pre>     switch (locatate) {
        case 90:
            matrix.setRotate(90, imageWidth/2, imageHeight/2);
            // 90度回転したBitmap画像を生成
            matrix.postScale(0.3f, 0.3f);// 0.5倍調整
            bitmap2 = Bitmap.createBitmap(bitmap, 0, 0,
                    imageWidth, imageHeight, matrix, true);
            imageView.setImageBitmap(bitmap2);
            break;
        case 180:
            matrix.setRotate(180, imageWidth/2, imageHeight/2);
            // 90度回転したBitmap画像を生成
            matrix.postScale(0.3f, 0.3f);// 0.5倍調整
            bitmap2 = Bitmap.createBitmap(bitmap, 0, 0,
                    imageWidth, imageHeight, matrix, true);
            imageView.setImageBitmap(bitmap2);
            break;
        case 270:
            matrix.setRotate(270, imageWidth/2, imageHeight/2);
            // 90度回転したBitmap画像を生成
            matrix.postScale(0.3f, 0.3f);// 0.5倍調整
            bitmap2 = Bitmap.createBitmap(bitmap, 0, 0,
                    imageWidth, imageHeight, matrix, true);
            imageView.setImageBitmap(bitmap2);
            break;
            default:
                matrix.postScale(0.3f, 0.3f);// 0.5倍調整
                bitmap2 = Bitmap.createBitmap(bitmap, 0, 0,
                        imageWidth, imageHeight, matrix, true);
                imageView.setImageBitmap(bitmap2);
    }
}</pre>
}

三日間ExifInterfaceのお話をしましたがまだまだ作っているアプリにも改善の余地があるのでまた画像周りを

いじることがあれば記事に載せるかもしれません。

あと前にも書きましたが、androidStudioのgradleや実機のスペックが人によって違ってくるのでここで紹介した

設定に合わせる必要は全くないのでそこは皆さんの環境に合わせてください。
 

asaba 著者:asaba

【androidJava】exifInterface:exif情報の取得

前回はexifInterfaceを使うためのgradleの設定をしたので、今回いよいよ実際にコードを書いて説明していきたいと思います。

 

前述のサポートにより、画像を扱うアプリではInputstreamを使うことでExifInterfaceがぐっと使いやすくなりました。

これにより、受け取ったURIから直接画像のexif情報を取得できるようになりました。

exifInterfaceをnewする前にInputStreamを初期化しておきましょう。

<pre>InputStream in = null;</pre>

ここでようやくexifInterfaceクラスを使うことが出来ます。次に向き(orientation)の取得ですが、ここではexifInterfaceクラスの

メソッドgetAttributeIntを使って向きを取得します。getAttributeIntの使い方ですが、取得する情報のタグを指定して値を取得する.

だけで使うことができます。例えば、何の変哲もない修正していない画像を取得する場合はExifInterface.ORIENTATION_NORMALを

指定します。

<pre>int orientation = exifInterface.getAttributeInt(
        ExifInterface.TAG_ORIENTATION,
        ExifInterface.ORIENTATION_NORMAL);</pre>

無事に取得できれば後はこのorientationを変更したい角度に合わせてswitch文にセットすれば対象の画像のexif情報を

取ってくることができますね。

<pre>switch (orientation) {
    case ExifInterface.ORIENTATION_ROTATE_90:
        rotation = 90;
        break;
    case ExifInterface.ORIENTATION_ROTATE_180:
        rotation = 180;
        break;
    case ExifInterface.ORIENTATION_ROTATE_270:
        rotation = 270;
        break;
}</pre>

ExifInterface.ORIENTATION_ROTATE_〇〇はぱっと見分かりづらいですが、ものすごくかみ砕いて「この角度にすれば正しい位置になるよ」

と解釈しておけばその内慣れてくると思います。

次回はこのメソッドで取得したrotation変数を使って実際に向きを変えて表示してみましょう。

断片的なコードだけでは戸惑うかたもいると思うのでメソッド含めた全コードを載せておきます。


public class sample extends AppCompatActivity {

private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sample);
imageView = findViewById(R.id.image_view);
int locatate;
int rotation = 0;
Bitmap bitmap;
Uri uri;
Intent intent = getIntent();
uri = intent.getParcelableExtra("imageUri");
try {
bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), uri);
//画像の向きを取得
getBmp(uri,rotation);
} catch (IOException e) {
e.printStackTrace();
}
}
public int getBmp(Uri uri,int rotation) {
  InputStream in = null;
  try {
    in = getContentResolver().openInputStream(uri);
    ExifInterface exifInterface = new ExifInterface(in);
    //緯度経度を取得
    getLatlong(exifInterface);
   //画像の向きを取得
    int orientation = exifInterface.getAttributeInt(
    ExifInterface.TAG_ORIENTATION,
    ExifInterface.ORIENTATION_NORMAL);
   switch (orientation) {
     case ExifInterface.ORIENTATION_ROTATE_90:
     rotation = 90;
     break;
     case ExifInterface.ORIENTATION_ROTATE_180:
     rotation = 180;
     break;
     case ExifInterface.ORIENTATION_ROTATE_270:
     rotation = 270;
     break;
  }
    System.out.println(rotation);
  } catch (IOException e) {
    e.printStackTrace();
  } finally {
    if (in != null) {
      try {
        in.close();
      } catch (IOException ignored) {
    }
  }
}
     return rotation;
}
}

 

 

asaba 著者:asaba

【androidJava】exifInterfaceの初期化

長い間exifInterfaceの使い方がおぼろげだったのですが、理解が深まってきたところで小出しで記事をかくことにしました。

今回はチュートリアルみたいな感じでいきなり実践はせず設定の部分だけアウトプットすることにしました。

 

本題ですが、このexifInterfaceというのは1994年に富士フィルムが開発した画像のデータを含んだ形式のことを指します。

このデータを使うことで、角度を修正したりリサイズをしたり写真を撮った位置所法を取得できたりと画像を扱うプログラム

ならほぼ網羅することができます。

 

このExifInterfaceはapiレベルが24以上と推奨されていましたが

Support Library 25.1.0 のリリースに合わせて新たに ExifInterface Support Library が追加されたので、

apiが24以下の端末でも利用できるようになりました。

 

まずはgradleでminSDKVersionが実機より高くないか確認して、高かった場合はその実機のAPIより低くする必要

があります。

例えば、使用している実機のapiが22で、minSdkVersionが24だった場合はこのままでは怒られて使用できないので

minSdkVersionのapiレベルを下げましょう。

 

しかしminSDKVersionが低すぎても警告を受ける場合があるので今実機として使っているandroidのapiレベルが同じになるように

合わせてgradleのminSDKVersionを調整してみてください。

例えば実機のapiレベルが22の場合は


<span style="font-size: 14pt;">minSDKVersion 16 ×</span>

 


<span style="font-size: 14pt;">minSDKVersion 22 〇</span>

 

念のためにぴったりにしておいたほうが間違いないのでw

 

マニフェスト部分にもしっかりとパーミッションを書いておきましょう。

<pre><uses-sdk android:minSdkVersion="22" /></pre>

 

これでexifIterfaceを使う下準備は終わりました。次回は実際にexifInterfaceを使って向きを取得してみましょう。

 

 

 

 

asaba 著者:asaba

【androidJava】カメラ・ギャラリーを同じダイアログに入れて選択させる方法

javascriptでできなかったカメラとギャラリーが同じダイアログに入った機能があっさりできてしまいました。

この場合はコードを先にみてしまった方が早いと思うので端折ります。

//一番最初にカメラ・ギャラりーを識別するための定数を記述しておく
private static final int REQUEST_CHOOSER = 1000;
private void showGallery() {

    //カメラの起動Intentの用意
    String photoName = System.currentTimeMillis() + ".jpg";
    ContentValues contentValues = new ContentValues();
    contentValues.put(MediaStore.Images.Media.TITLE, photoName);
    contentValues.put(MediaStore.Images.Media.MIME_TYPE, "image/jpeg");
    m_uri = getContentResolver()
            .insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, contentValues);

    Intent intentCamera = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
    if (intentCamera.resolveActivity(getPackageManager()) != null) {
        // Create the File where the photo should go
        File photoFile = null;
        try {
            photoFile = createImageFile();
            System.out.println(photoFile);
        } catch (IOException ex) {
            // Error occurred while creating the File
            Log.d("Error", ex.getMessage());
            Toast.makeText(getBaseContext(), ex.getMessage(), Toast.LENGTH_SHORT).show();
        }
    }
    // ギャラリー用のIntent作成
    Intent intentGallery;
    if (Build.VERSION.SDK_INT &amp;amp;amp;lt; 19) {
        intentGallery = new Intent(Intent.ACTION_GET_CONTENT);
        intentGallery.setType("image/*");
    } else {
        intentGallery = new Intent(Intent.ACTION_OPEN_DOCUMENT);
        intentGallery.addCategory(Intent.CATEGORY_OPENABLE);
        intentGallery.setType("image/jpeg");
    }
    Intent intent = Intent.createChooser(intentCamera, "画像の選択");
    intent.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Intent[] {intentGallery});
    startActivityForResult(intent, REQUEST_CHOOSER);
}
</pre>
<pre>private File createImageFile() throws IOException {
    // Create an image file name
    String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
    String imageFileName = "PNG_" + timeStamp + "_";
    File storageDir = getExternalFilesDir(Environment.DIRECTORY_PICTURES);
    File image = File.createTempFile(
            imageFileName,  /* prefix */
            ".png",         /* suffix */
            storageDir      /* directory */
    );
    // Save a file: path for use with ACTION_VIEW intents
    mCurrentPhotoPath = Uri.parse(image.getAbsolutePath());
    return image;
}</pre>
<pre>

カメラ・ギャラリーから取得した画像をonActivityResultで受け取って処理をします。

 

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);

    if(requestCode == REQUEST_CHOOSER) {
  //ここに書きたい処理を書く</pre>
<pre>  resultUri = (data != null ? data.getData() : m_uri);</pre>
<pre>  } 
} 

二番目の引数と定数REQUEST_CHOOSERが同じ値なので、if内に処理をしていきます。

上記の例のようにgetDataでuriを取得をすればもうご自由にuriを使うことが出来ますね。