2018年10月 – 株式会社シーポイントラボ｜浜松のシステム開発会社

著者:asaba

【javaScript】税込み商品の計算アプリ

プログラミングを始めた時に既に作りたいものがたくさんあったのですが、まだ技術も基礎もない自分でも何か作れない

かなと試行錯誤していた時に作ったアプリです。題名は、税込み商品計算アプリです。

消費税が上がることを思い出したことをきっかけに作ったアプリです。使い方は単純で、商品と現在の消費税を入力して計算ボタンを

押すと税込み価格をテキストで表示する、本当にそれだけのアプリです。


<form name="text">
<input type="text1" id="okt1"name="add1"> ×
<input type="text2" id="okt2"name="add2">
</form>
<input type="button" id="cb" value="お会計"onclick="cash()">
<input type="button" id="res" value="リセット"onclick="reset()">
<p id="result"></p>
<script>
var num1 = document.text.okt1.value;

var num2 = document.text.okt2.value;

var res = document.getElementById("result");

function cash(){

num1 = document.text.okt1.value;

num2 = document.text.okt2.value;

res = document.getElementById("result");

sum = Math.round(num1 * num2);

if(num1==="" || num2 ===""){

res.innerHTML = "数値を入力してください。";

}else if(!isNaN(num1) && !isNaN(num2)){

res.innerHTML = "税込みで" + sum + "円になります。";

}else{

res.innerHTML = "数値以外が入力されています";

}
}

//データを削除する処理
function reset(){

document.text.okt1.value="";

document.text.okt2.value="";

res.innerHTML = "";
}
</script>

適当にコピーしていただいてchromeで開けばすぐに動きます。

プログラミングを経験しているかたにとってはものすごくチープに感じてしまうくらいしょぼい出来ですが

javaScriptでは必須スキルのフォームを作る方法を詰め込んでいるので、初心者がありがちなこのコードは何をしているか

分からない、何のための関数なのか理解できないといった最初の壁をぶち破ることができます。

reactやvue.jsではこの作法を応用してコンポーネントを作りますが、これら流行りのフレームワークも簡単なアプリを

つくっていく中でめきめきと覚えることができるのではないでしょうか。（筆者は容量が悪いので時間がかかりました）

初心者のかたで何が分からないか分からないという方は、もしjavaScriptでググってこのサイトを見つけたら何かの縁かと

思って試しに動かしてみてくださいね。

この記事いいね！ (0)

著者:村上

【Android】アプリ内にデータを保存できる「SharedPreferences」

Androidでアプリを開発する際、ちょっとしたデータを保存したいときがあるかと思います。
Webであれば、Cookie や LocalStorage が使えますが、Android の場合でもよく似た仕組みがあります。
それがこちらの「SharedPreferences」です。

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

[Android] データを保存し Android Studio で確認 SharedPreferences
https://akira-watson.com/android/sharedpreferences.html

早速使い方はこちら。

SharedPreferences dataStore = getSharedPreferences("DataStore", MODE_PRIVATE);
Editor editor = dataStore.edit();
// 保存するデータを追加
editor.putString("input", "abcdefg");
editor.apply();

なお、getSharedPreferences() の第2引数で指定している MODE_PRIVATE とは「このアプリからのみ読み書き可能」という意味になります。
基本的には、これでOKだと思います。

また、データはほかにも下記の型を保存できます。

editor.putInt("DataInt", 123);
editor.putBoolean("DataBoolean", true);
editor.putLong("DataLong", 12345678909876L);
editor.putFloat("DataFloat", 12.345f);

そして、読み出しは下記のようになります。

String dataString = dataStore.getString("input", null);

読み出しについてはいたってシンプルですね。
なお、第二引数には、データを取得できなかった場合の代用値を指定します。

他の型の取得については下記のとおりです。

int dataInt = dataStore.getInt("DataInt", 0);
boolean dataBoolean = dataStore.getBoolean("DataBoolean", false);
long dataLong = dataStore.getLong("DataLong", 0);
float dataFloat = dataStore.getFloat("DataFloat", 0);

以上、アプリ内にデータを保存できる SharedPreferences の使い方でした。
データベースに保存するまでもないような、小さなデータなどでしたらこれで事足りるかと思います。
是非、便利に使ってください。

この記事いいね！ (0)

著者:杉浦

laravel

Laravelのデバッグ用関数dd()

　dd()はdump and dieの略です。何をやるかというとLaravel用の便利なvar_dump();exit;です。
　dd()の使い方はシンプル。Laravelフレームワークのphpコード内で次の様に記述するのみです。

dd(変数名A,変数名B,..)

　これを実行した場合、次の図の様に渡した変数を読みやすい形で表示するhtmlコードが返されます。
　
　特に便利なのは図にあるquery builderの様な巨大な構造体を読みたい時です。通常のvar_dump()で表示しようとした場合、とても読めたものではありません。var_dumpでは常に全展開の為、長いkeyと深いネストを持ってしまった場合、表示すら難しいです。
　dd()の定義はvendor/laravel/framework/src/Illuminate/Support/helpers.phpにあります。

    /**
     * Dump the passed variables and end the script.
     *
     * @param  mixed  $args
     * @return void
     */
    function dd(...$args)
    {
        foreach ($args as $x) {
            (new Dumper)->dump($x);
        }

        die(1);
    }

　dieはexitと同じなので読み飛ばしです。Dumperの中を追うとvendor/laravel/framework/src/Illuminate/Support/Debug/Dumper.phpを読むことになります。

use Symfony\Component\VarDumper\Cloner\VarCloner;
use Symfony\Component\VarDumper\Dumper\CliDumper;

class Dumper
{
    /**
     * Dump a value with elegance.
     *
     * @param  mixed  $value
     * @return void
     */
    public function dump($value)
    {
        if (class_exists(CliDumper::class)) {
            $dumper = in_array(PHP_SAPI, ['cli', 'phpdbg']) ? new CliDumper : new HtmlDumper;

            $dumper->dump((new VarCloner)->cloneVar($value));
        } else {
            var_dump($value);
        }
    }
}

　ここでSymfonyのvar_dumperに渡してLaravel自身のコードは終わります。Symfonyのvar_dumperの中は満足いくeleganceな表示を行うためにいくらか大きな処理をしています。CliDumper.phpだけで600行程、htmlDumperは900行程で記事に書き起こす程読み込む気力はありませんでした。

この記事いいね！ (0)

著者:takahashi

Appleの発表会で噂されていた新型のMacBook Air と Mac miniがついに発表!!! そのスペックはもはや”廉価版Mac”ではない!?

昨晩のAppleの製品発表会、Apple Special Event ですが、僕もリアルタイム配信で見ていました。
いやぁめちゃくちゃ盛り上がってましたね！とても楽しかったです。

Apple Special Event2018年10月30日 – Apple

今回はかなり盛りだくさんの内容で、

・MacBook Air
・Mac mini
・iPad Pro
・Apple Pencil

これだけの新作ハードウェアが発表されました。
その中で、今回はMac周りに絞ってどんなことが発表されたのか、かいつまんでご紹介したいと思います。

・ついに発表！新型MacBook Air

以前から登場が噂されてはいたものの、なかなかその姿を現さなかった新型MacBook Airですが、今回の発表会でついに発表されました！！！

この発表に会場も大歓声があがりました。

一見すると外見のデザインは踏襲されているように見えますが、他のMacBook同様にUSB Type-Cポート(Thunderbolt 3)2つに統合されました。
またディスプレイ部分はアルミのベゼルではなくMacBook Proのような黒ベゼルに変わり、Retina Displayが採用、解像度も400万ピクセルにパワーアップしたとのこと。
キーボードは新世代のバタフライキーボードが採用され、耐久性が増しているということです。

そして驚くのはここから。

なんと最大で1.5TBまでストレージを増やすことができるように。
このオプションを選ぶと+11万円になりますが、モバイルPCで1TB以上もの容量のSSDが実際に搭載されるようになったというのは驚きですね。

そして筐体のサイズが、従来よりも17％小さくなっているようで、より持ち運びがしやすくなっているのも魅力的ですね。

他にも専用のセキュリティチップを搭載したり、Touch IDに対応したりと、”廉価版Mac”とは言わせないといわんばかりのスペックアップが図られています。

MacBook Air – Apple

・4年ぶりにリニューアル！新型Mac mini

なんとさらにもう一つ、以前から登場が噂されていたMacが発表されました！

新型のMac mini !!!

実に4年ぶりのリニューアルだそうです。
こちらもカスタマイズ次第で超高性能デスクトップPCにすることができます。

そして小さい筐体でありながら、使いそうなポートが沢山備えられているのも魅力です。

Ethernetポートは10Gbpsに対応し、Thunderbolt 3ポートにはeGPUを接続可能とのことです。

そんな高性能で筐体が小さいMacなので、映像制作現場でスタックさせて使うこともできますし

何ならデータセンターのサーバーマシンとしても使えますよというような説明にちょっと笑ってしまいました。

Mac mini – Apple

今回は以前から噂されていた新しいMacが2つも発表されたので、正直とてもびっくりでした。
自分は旧モデルのMacBook Air 11インチを使っていまして、持ち運ぶのにはとても使いやすい大きさなのですが、現在は残念ながらラインナップから消えてしまっていました。
このままMacBook Air自体もなくなってしまうのかな？と思っていたので、今回の新機種発表はとても嬉しいニュースですね。

旧モデルの13インチMacBook Airよりも筐体の大きさも小さくなっているようですので、もし次乗り換えるなら選択肢としてありかもなぁ、と感じました。

この記事いいね！ (0)

著者:村上

【Android】XMLをJSONに変更できるライブラリ「JSONIC」

結論から言うと、私の環境ではうまく使えなかったので、実際の使用は見合わせました。
が、かなり便利そうだったので、いつか使うとき用に備忘録としてまとめます。

今回紹介するのは、「JSONIC」というJava用のシンプルかつ高機能なJSONエンコーダー・デコーダーライブラリです。
GitHubはこちらから。

GitHub – hidekatsu-izuno/jsonic: simple json encoder/decoder for java
https://github.com/hidekatsu-izuno/jsonic

…しかし、よく見たら、今後機能強化が行われることがないメンテナンスモードに移行するとのこと。
もし利用する場合は、jackson への移行をおすすめしているとのことでした。

使い方のサンプルコードはこちら。

import net.arnx.jsonic.JSON;

// POJOをJSONに変換します
String text = JSON.encode(new Hoge());

// JSONをPOJOに変換します
Hoge hoge = JSON.decode(text, Hoge.class);

いたってシンプルです。

また、XMLをJSONに変換したい場合は、下記のようにします。

Document doc = builder.parse(new File([変換したいXMLファイル]));
String xmljson = JSON.encode(doc);

例えば、下記のようなXMLファイルを変換すると、

<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Feed Title</title>
  <entry>
    <title>Entry Title</title>
  </entry>
</feed>

変換後のJSONは下記のようになります。

["feed", {"xmlns": "http://www.w3.org/2005/Atom"},
    ["title", "Feed Title"],
    ["entry",
        ["title", "Entry Title"],
    ]
]

なお、この時、タグ間の空白文字も TextNodeとして出力されるらしいので、これが不要な場合は、DOM作成時に取り除く必要があるとのことでした。

以上、簡単ではありますが、JSONIC ライブラリの使い方でした。
もし、JSONのエンコード・デコードをシンプルに行えるライブラリをお探しでしたら、参考にしていただければと思います。
が、最初に書いたように、JSONIC は今後機能強化を行わないとのことでしたので、利用する場合は、jackson を使用するようにしてください。

この記事いいね！ (0)

著者:asaba

【cordova-react】ajax通信でerror判定の時のデバッグ方法

今日はajax通信でエラーが吐き出された時の中身を確認する方法を紹介いたします。

ajaxなどのhttp通信では、エラー時にxhr, textStatus, errorThrownをひと固まりで吐き出します。その中身を見るためにはconsole.logで

一項目ずつ引数を指定してあげる必要があります。

コードで書き表すと下記のようになります。


console.log("xhr : " + JSON.stringify(xhr));
console.log("textStatus : " + textStatus);
console.log("errorThrown : " + errorThrown.message);

上記のxhrは従来のconsole.logに入れると[Object object]で表示されなくなるので、JSON.stringify関数で囲んでください。

この中身を見ることで、クライアント・サーバー間でどのタイミングでエラーになったかを確認することができます。

例としてログで吐かれたxhrの中身を見てみます。


[INFO:CONSOLE(1)] "xhr : {"readyState":0,"status":0,"statusText":"error"}", source: file:///android_asset/www/static/js/main.7a2980e1.js (1)

引数にstatusという項目で0と返ってきていますが、この0とはタイムアウト（接続時間が長すぎて途中で切られた結果の値。サーバー側ではなくブラウザから送られてくるもの）を指します。

このほかにも、404（ファイルが存在しない）や401（許可されていない）など、原因によってさまざまな値を返してくれるので

そこから解決方法を紐付けることが出来れば素早くデバッグ処理をすることができると思います。

ajaxで通信したけどエラーが帰ってきたでも何がエラーか分からない！という方は試してみてください、それでは。

参考にさせていただいたサイトです。－＞http://taka.hatenadiary.com/entry/2013/11/10/HTTP%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6AJAX%E9%80%9A%E4%BF%A1%E3%82%92%E6%95%B4%E7%90%86%E3%81%99%E3%82%8B

この記事いいね！ (0)

著者:杉浦

テスト

モンキーテスト

　モンキーテストはプログラムのテスト手法の一つです。

　モンキーテストとは、機器やソフトウェア、システムのテスト手法の一つで、対象箇所や操作手順などを事前に定めず、実施者がその場の思いつきで操作してみる方式。開発者の意図などを一切考慮しないことを「猿に使わせてみたらどうなるか」に例えた名称である。

　引用元：モンキーテスト（アドホックテスト）とは – IT用語辞典
　人間が考えるテストはあらかじめテストケースをリスト形式で作成するものが多いです。それは主な使用用途であったり間違いの起きやすいパターンを穿ったものだったりです。しかしながら、タイミング処理、ハードウェア、やらかしたソースコード等が絡むと完成するアプリケーションは複雑化し、バグの見逃しが生まれます。全てを走査することができたならば見逃しはないでしょうが複雑なアプリケーションでそのようなことは組み合わせ爆発によりほぼ不可能です。モンキーテストはその様な、見逃しの対策として有効な方法です。
　モンキーテストのやり方は単純、ランダムに大量に操作する、というだけです。モンキーテストには、テストを回し続けた場合いずれバグの起きるレアケースな操作を引き当てるであろう、という筋道が立てられています。モンキーテストを効果的に行うには大量の操作が必要不可欠です。これは、ランダムな場所でランダムな動作を行うという処理の繰り返しで簡単に自動化できます。自動化した場合の問題点として、バグか否かの判別が必要になるというものがあります。いつバグが起きたか見過ごしてしまうと、バグが起きる条件、バグが起きた理由を探ることが非常に難しくなります。これらの対処として有効なのがassert文です。あらかじめここでこうでなければバグ、バグが起きたらメッセージを出力、としておくことで自動でモンキーテスト、自動で重要な出力だけ得る、ということができます。

この記事いいね！ (0)

著者:takahashi

IBMがRedHatを買収気になるRedHat系OSへの影響

昨日、衝撃のニュースが発表されました。

IBMがRedHat買収合意を発表。買収額約3.8兆円、クラウド分野でアマゾン・マイクロソフト追撃 – Engadget 日本版

なんとオープンソース界隈で非常に大きな影響力をもつRedHat社がIBMに買収されてしまいました。
しかもその買収額は3兆8000億というとんでもない額。これには世界中のIT界隈の人々が驚いたことだと思います。

RedHat社は商用(有料)Linuxディストリビューションの中でも非常に人気の高いRedHat Enterprise Linux (RHEL)を開発、販売している会社です。
また、Linuxディストリビューションのfedoraや、RHELのオープンソース部分を使用して作られたCentOSなどともかかわりが深く、開発に協力していたり、これらのディストリの成果をRHELにも取り込んでいたりと、かなり密接な関係をもつ、オープンソース界隈でもかなり影響力の高い企業でした。

今回の買収でRedHatが完全にIBM傘下に収められたわけですが、個人的に懸念していることがあります。
RedHatは完全にオープンソースへの協力を積極的に行っている企業なのは目に見えてわかりますが、一方IBMについては、個人的に「…？」という印象でした。
もしかすると実際はいろいろなプロジェクトを支援しているのかもしれませんが、少なくとも最近になってオープンソース支援へとシフトしつつあるMicrosoftよりも地味な印象でした。

買収後もRedHatの動きについては現状のままにしたいとIBMは言っているようですが、IBMのオープンソースへのスタンスがいまいちわからないので、個人的にはちょっと不安です。

CentOSは、もともとRHELのオープンソース部分を利用して、有志のメンバーがRHELと同等の機能を持つことを目指して開発されている、RedHat Linuxから派生したRedHat系のLinuxディストリビュージョンです。CentOS自体はもともとRedHatとは関係がありませんでしたが、2014年にRedHatが正式に派生OSとして承認を出し、RedHatから直に開発支援を受けられる状態になりました。

今更聞けない！CentOSとRed Hatの違いとは？ – エンジニアの入り口

そんなわけで、現在CentOSはサーバーOSとして非常に人気が高く、LinuxをサーバーOSとして使用する企業や団体の多くで使用されている上、各IaaSクラウドサービスのほどんどで公式フレーバーが提供されているほどになっています。

今後IBMが介入してくることでこういったCentOSや同じくRedHatが支援するfedoraとの関係が変化してしまうのではないか、と個人的に心配しています。

ただ、買収されたからと言って悪い方に転ぶとは限りませんし、今よりより良くなっていく可能性もあると思います。
今後RedHatの買収によってこの辺りがどうなっていくのか…注目していきたいですね。