著者アーカイブ 村上

村上 著者:村上

【jQuery】要素に指定したclass名などの属性の値を取得する方法

HTML要素に指定された class 名や id 名などを取得する方法です。
私は今回、class名を取得するのに使いました。

 

使用するメソッドは「attr()」です。
サンプルコードはこちら。

// div要素のclass名を取得
var className = $("div").attr("class");

<div class="sample">DIV要素です</div>

上記を実行すると、変数 className には div要素のクラス名である「sample」が代入されます。

属性の取得についてはこんな感じです。
とても簡単でした!

 

また attr メソッドは、属性を取得するだけではなく、追加することもできます。
サンプルコードはこちら。

// div要素のid名にsampleと指定
$("div").attr("id", "sample");

<div>DIV要素です</div>

こちらを実行すると、div要素に id=”sample” が追加されます。

classの追加なら .addClass() メソッドもありますが、こちらの attr() メソッドは、属性名と値を指定できるので、class以外にも、id、href、type、value なんかも追加できます。
また、下記のように属性を一度に複数追加することもできるので、コードがすっきりして分かりやすいです。

$("div").attr({id : "sample",
               class : "text"});

 

追加があるなら削除もできる、ということで、属性の削除には removeAttr() メソッドを使います。

// div要素のclass名を削除
$("div").removeAttr("class");

<div class="sample">DIV要素です</div>

上記を実行すると、class属性が削除されます。

このあたりはセットで覚えておくと良さそうですね。

 

ということて、要素に指定された属性の値を取得する方法でした!
class名に○○が指定された要素を取得、というのは使用したことがあるのですが、divに設定されたクラス名自体を取得する、というのはやったことがなかったので、今回調べてまとめてみました。
似たような箇所で悩んでいる方は、是非ご参考にしてください。

村上 著者:村上

【Android Studio】「パッケージorg.apache.http.clientは存在しません」が発生した時の対処法

Androidアプリをビルドした時に遭遇したエラーその3。
ちなみに、これがラストです。

 

今回は、「エラー: パッケージorg.apache.http.clientは存在しません」というエラーです。
アプリ内で、org.apache.http.client をインポートしているのですが、こちらが存在しないためインポートに失敗して発生したエラーのようです。

なお、今回参考にさせていただいたサイトはこちら。

エラー: パッケージorg.apache.http.clientは存在しません への対策
http://www.what-a-day.net/entry/2016/12/11/124959

対処法はいたって簡単。
build.gradle に「useLibrary ‘org.apache.http.legacy’」を追加するだけです。

android {
    compileSdkVersion 19
    buildToolsVersion "19.1.0"

    useLibrary 'org.apache.http.legacy' /* この行を追加 */

    defaultConfig {
        ……
    }
}

あとは普通にビルドすれば、他のエラーがない限り成功するはずです。

もしくは、下記のように記述してもOKとのこと。

dependencies {
    compile files('libs/org.apache.http.legacy.jar')  /* この行を追加 */
}

こちらの方法は試していないので、有効かどうかはわかりませんが、1つ目の方法を試したところ、ビルドに成功しました。

 

とても簡単ですが…以上、「パッケージorg.apache.http.clientは存在しません」エラーの対処法でした。
今回、様々なエラーに遭遇しましたが、すべて検索結果に簡単に引っかかるものばかりだったので、そこまで苦労せずに済みました。
もし、同じエラーにお困りの場合は、こちらの記事を参考にしていただければと思います。

村上 著者:村上

【CSS】テーブルのセルの横幅を均等にする方法

テーブルで表を作成するとき、覚えておくと便利そうなスタイルが table-layout というプロパティです。
先日初めて使いましたが、このプロパティを適用すると、テーブルのセルの横幅が均等になるので、なかなか見やすい表を作成できました。
ただ、表示させるデータにもよるかな。

 

サンプルは下記のとおりです。

上は、表の横幅を指定しただけのテーブルで、下は table-layoutfixed を指定したテーブルです。
上記のように、横幅が均等になるので、類似データを表示するときに重宝しそう。

下の表のコードは下記のとおりです。

<table border="1" id="fixed">
    <tr>
        <th>月曜日</th>
        <th>火曜日</th>
        <th>水曜日</th>
        <th>木曜日</th>
        <th>金曜日</th>
        <th>土曜日</th>
        <th>日曜日</th>
    </tr>
    <tr>
        <td>Monday</td>
        <td>Tuesday</td>
        <td>Wednesday</td>
        <td>Thursday</td>
        <td>Friday</td>
        <td>Saturday</td>
        <td>Sunday</td>
    </tr>
</table>
#fixed {
    width:800px;
    table-layout: fixed;
}

見てわかる通り、table-layout: fixed; を指定しているだけです。
なお、table-layout プロパティは、テーブルの横幅が指定されていないと有効にならないため、必ず width プロパティを指定しましょう。

ちなみに、table-layout を適用したうえで、特定のセルのみの横幅のサイズを指定することもできます。
その場合は、横幅を指定したセル以外のセルは、引き続き均等の横幅で表示されます。

 

ちょっとしたことですが、セルの横幅が揃うだけでも、見やすさは大きく影響されますね。
また、テーブルに table-layout: fixed; を指定すると、最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、 表示が速くなるメリットがあるのだとか。
行数が多いデータを扱う場合は、積極的に使っていきたいですね。

以上、テーブルのセルの幅をそろえて、見た目を整える方法でした。

村上 著者:村上

【CSS】IEでのみ適用されるスタイルを指定する方法

今回は久しぶりにスタイルシートについての記事です。
Chromeとかでは問題ないのに、IEで閲覧した時だけ、ここのアイコンの位置がずれる…ってことあるかと思います。
そういったときに、IEでのみ余白のサイズを○pxにするなど、ブラウザを指定してスタイルを適用する方法です。

参考にさせていただいた記事はこちら。

IE11にのみ適用するスタイルシート – Qiita
https://qiita.com/eturlt/items/d43b1e19d7878ed41456

 

記述方法は、下記のとおりです。

image {
    width : 300px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    image {
        width : 250px;
    }
}

上記のようにメディアタイプを指定し、閲覧に使われているブラウザが IE だと判断したら、その中で記述した CSS を適用するという方法です。
こちらを使うと、例えば上記のコードでは、Chrome などで閲覧したときは画像の横幅は 300px で表示されますが、IE で閲覧したときのみ、画像の横幅は 250px で表示されます。
こちらを指定したところ、狙い通りに IE でのみ特定のスタイルを指定することができました。

が、こちらの方法、実はあまり推奨されていない方法なのだとか。
そのことについてまとめてあるサイトはこちら。

-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 / JeffreyFrancesco.org
https://jeffreyfrancesco.org/weblog/2017042601/

また、こちらの方法では、依然として Microsoft Edge でデザインが崩れたままでした。

 

やはり IE、Edge は癖があって苦手です…!
が、とりあえずは IE では意図したとおりのデザインで表示させることができたので、一旦これでOKとしようかな…。
もし、他にいい方法があるようでしたら、あらためてご紹介します。

村上 著者:村上

【Android】「Could not find method runProguard() for arguments」エラーの対処法

今回は、Androidアプリのビルド時に遭遇したエラーについて。

【Android Studio】「Error:error: uncompiled XML file passed as argument. Must be compiled first into .flat file..」エラーの対処法
https://cpoint-lab.co.jp/【android-studio】「errorerror-uncompiled-xml-file-passed-as-argument-must-be-compiled-first-into-flat-file-」エラーの対処/

こちらで紹介したエラー同様、他のスタッフが少し前に開発したアプリをビルドした時に発生したエラーです。
こちらが遭遇したエラー2つ目で、実はもう一つあります。

 

で、こちらのエラーですが、対処法自体は、build.gradle ファイルの1行を書き換えるだけと、かなり簡単だったのですが、エラー文がかなり長くて、初見でちょっとビビってしまったので、今後驚かないようにまとめます。
まずは、エラー全文はこんな感じ。

Could not find method runProguard() for arguments [false] on BuildType_Decorated{name=release, debuggable=false, testCoverageEnabled=false, jniDebuggable=false, pseudoLocalesEnabled=false, renderscriptDebuggable=false, renderscriptOptimLevel=3, minifyEnabled=false, zipAlignEnabled=true, signingConfig=null, embedMicroApp=true, mBuildConfigFields={}, mResValues={}, mProguardFiles=[], mConsumerProguardFiles=[], mManifestPlaceholders={}} of type com.android.build.gradle.internal.dsl.BuildType.

name=release, debuggable=false, testCoverageEnabled=false …など、等式がずらずら並んでいたので、これはややこしいのでは!?と思い込んでしまったんですよね。

で、対処法ですが、build.grade ファイルに下記の1文が記述されているかと思います。

runProguard false

これを、下記に書き換えるだけ。

minifyEnabled false

あとは、いつも通りビルドするだけです。

 

エラー文にビビりましたが、思ったよりも簡単に直せたので一安心でした。
同じエラーにお困りの方は、是非参考にしてください。

村上 著者:村上

【Android】Buttonのデザインを変更する方法

最近 Android の開発ネタばかりで申し訳ありません…が、今日も性懲りもなく Android について!
今回は、ボタンのデザインを変更する方法です。
デフォルトのデザインって、グレーに角ばった形をしていて、かなり味気ないというか素っ気ないデザインなので、これを変更していきます。

参考にさせていただいたサイトはこちら。

Android UI基本 Buttonをカスタマイズする
http://tech.pjin.jp/blog/2016/02/09/android ui基本-buttonをカスタマイズする/

 

さて、今回のコードで作成できるボタンのデザインは下記の2つです。

まず、ボタンのデザインを指定するxmlファイルを、drawable フォルダ以下に作成します。
左側の、背景色が水色の丸角ボタンのコードはこちら。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#4cb4fa"/>
    <corners android:radius="8dp"/>
</shape>

ファイル名は、entry_button.xml としています。

右側の、背景色が白色で枠線が水色の丸角ボタンのコードはこちら。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#FFF"/>
    <corners android:radius="8dp"/>
    <stroke android:color="#4cb4fa" android:width="1dp"/>
</shape>

こちらのファイル名は、entry_button_noactive.xml としました。

で、ボタン自体は下記のように指定します。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="#FFF">
    <Button android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        android:text="公開"
        android:textColor="#FFF"
        android:background="@drawable/entry_button"
        android:layout_margin="3dp"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        android:text="下書き"
        android:background="@drawable/entry_button_noactive"
        android:layout_margin="3dp"/>
</LinearLayout>

重要なのは、12、19行目android:background を指定している箇所です。
ここで、先程作成した xmlファイルを指定すると、xmlファイルに記述したデザインがボタンに反映されます。
レイアウトファイルがごちゃごちゃしないので、分かりやすくていいですね。
xmlファイルの記述については、ググれば色々出てくるので、難しくはないはず。

 

以上、ボタンのデザインの変更方法でした。
味気ないデフォルトのデザインや、背景色変えるだけよりも、ぐっとお洒落になるので、Androidアプリを開発している方は是非取り入れてみてはいかがでしょうか。

村上 著者:村上

【Android】リリース版アプリをビルドするときにkey aliasを忘れた場合の対処法

会社の人に教えていただいた方法ですが、これは覚えておかねば!と思ってまとめ。
Androidアプリをリリースする際に、リリース版APKのビルドを行いますが、その時に入力する key alias という項目を忘れてしまったときの対処法です。
こちらは、Android Studio のメニューバーの Build > Generate Signed APK をクリックしたときに表示される下記のウィンドウの入力欄に入力する項目です。

教えてもらった記事はこちら。

もしandroid.keysotreのkey aliasを忘れてしまったなら – Qiita
https://qiita.com/mmusasabi/items/e0dbd1fb01c0410f791a

なお、こちらの投稿には、パスワードを忘れてしまった場合の対処法へのリンクも貼ってありますので、こちらも是非ご参考にしていただければと思います。

 

さて、その方法ですが、コマンドプロンプトなどのツールを起動して、下記のコマンドを実行するだけ!

keytool -list -keystore <アプリのキーストアのパス>

こちらを実行すると、キーストアのパスワードを聞かれるので、パスワードを入力してエンターキーを押します。

実際の実行画面はこんな感じです。

ちょっとアレかな?と思われるところは白塗りにしましたが、重要なのは、赤く塗りつぶした箇所です。
正常に動作すれば、こちらに key alias が表示されます。
あとは、こちらを使って、リリース版ビルドを実行して完了です。

 

他の人が開発&リリースしたアプリだったので、パスワードしかわからず、どうしよう…となっていたので非常に助けられた記事でした。
同じ事で悩んでいる方がいらっしゃれば、是非参考にしていただければと思います。

村上 著者:村上

【Android】ボタンなどのパーツを横並び&横幅均等で配置する方法

久しぶりにAndroidアプリの開発をして、大分忘れていたので備忘録としてまとめ。
今回は2つ以上のボタンを横並びに配置し、かつボタンの横幅を均等に揃える方法です。

参考にさせていただいた記事はこちら。

PercentRelativeLayout で均等配置 – Qiita
https://qiita.com/kojionilk/items/50b0d1c111791a6b419f

なお、タイトルにある「PercentRelativeLayout」は非推奨となりましたので、使用しないようにとのこと。

 

コードはこちら。
LinearLayout という、要素を横一列もしくは縦一列に並べるときに使用するレイアウトの中に、並べたい要素を記述します。
今回は横並びにしたいので、orientation=”horizontal” を指定します。
なお、今回はボタンを2つ並べます。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        android:text="ボタン1"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        android:text="ボタン2"
</LinearLayout>

今回重要なのは、4、10行目の layout_width=”0dp” と 6、12行目の layout_weight=”1″ という指定です。
これらを指定することで、2つのボタンを綺麗に同じ横幅かつ横並びにすることができます。
なお、layout_weight では重み付けを行っているので、例えば 1つ目のボタンで 1、2つ目のボタンで 2 を指定すると、1つ目のボタンは 1/3 に、2つ目のボタンは 2/3 の大きさになります。

 

ボタン以外にも、均等に横並びをさせたいことは結構あると思うので、覚えておくと便利です!
ただし、親要素は LinearLayout でなければならず、FrameLayoutRelativeLayout ではできないので、そこだけ注意が必要です。
使わないとすぐ忘れてしまうので…このくらいは覚えておきたいものですね。

村上 著者:村上

【Android Studio】「Error:error: uncompiled XML file passed as argument. Must be compiled first into .flat file..」エラーの対処法

業務中、他のスタッフが数年前に開発した Androidアプリをビルドしようと実行したところ、いくつかのエラーに遭遇しました。
今回はその中の1つをご紹介。
なお、他のエラーについては、今後覚えている範囲でご紹介します。

 

エラー文はこちら。

Error:error: uncompiled XML file passed as argument. Must be compiled first into .flat file..

Google翻訳にかけてみたところ、「コンパイルされていないXMLファイルが引数として渡されました。 最初に.flatファイルにコンパイルする必要があります。」という意味のようでした。
これだけだと何をどう直せばいいかさっぱりだったため、こちらのエラー文をそっくりそのまま検索にかけたところ、下記のページがヒットしました。

java – AAPT2 link failed Crashlytics – Stack Overflow
https://stackoverflow.com/questions/45222264/aapt2-link-failed-crashlytics

こちらのページによると、gradle.properties というファイルに、下記の1文を記載すれば解決するとのことでした。

android.enableAapt2 = false

実際に上記一行を追加し、再ビルドしたところ、無事エラーが解消しました!

 

少し古いアプリを実行しようとすると、SDKのインストールやらアップデートやら、さらにエラーの対処等も必要になる場合もあるため、ビルドだけでも一苦労ですね。
エラーに遭遇した場合は、とにかくエラー文を読んで、分からなければテキストを丸ごと検索することをおすすめします。
よっぽどのことがない限り、他の誰かも同じエラーに遭遇していて、さらに別の誰かが解決策を提示しているはずです!

村上 著者:村上

【CSS】テキストや画像の縦方向の位置を指定する「vertical-align」が効かない時の対処法

ある要素内のテキストや画像などを縦方向の位置を指定するときに便利な「vertical-align」プロパティですが、時折聞かないことがあるそう。
私もこの現象に遭遇したので、備忘録としてまとめ。

 

まず、書いたコードはこちら。

<div id="outer">
    <div id="inner"></div>
</div>
#outer{
    width: 500px;
    height: 500px;
    background-color: blue;
    vertical-align: middle;
}
#inner{
    width: 200px;
    height: 200px;
    background-color: green;
}

で、上記で何が問題かというと、そもそも「vertical-align」プロパティが適用されるのは、インライン要素テーブルセルのみだったことです。
したがって、上記でいうと #outer に、「display: table-cell;」を追加したところ、あっさりと #inner の要素が #outer 要素に対して縦方向の中央揃えになりました。

分からないとドツボにハマりそうですが、案外原因ってこんな些細なことだったりするんですよね…。
私は分からないと判明してすぐに調べたので、長時間調べることもなく原因が判明しました。

 

なお、中央揃えする方法なら、こちらの方法もあります。

【CSS】DIV要素を上下左右で中央揃えする方法(IE、Safari対応)
https://cpoint-lab.co.jp/【css】div要素を上下左右で中央揃えする方法(ie、safari/

こちらは、親要素に「position: relative」を、子要素に「position: absolute」を指定して、さらに子要素に「top: 50%」「transform: translate(0, -50%)」を指定する方法です。
具体的には下記のとおりです。

#outer{
    width: 500px;
    height: 500px;
    background-color: blue;
    position: relative;
}
#inner{
    width: 200px;
    height: 200px;
    background-color: green;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

上記のコードでも、vertical-align: center を指定した時と同じ結果になります。
なにかしらのCSSプロパティの制約がなければ、お好きな方をお使いいただければいいと思います。

 

ということで、要素の縦方向の位置を指定する方法でした。
他にも、margin を指定するなど、色々方法はあると思いますので、自分のコードにあった方法をお試しください。