スーパーソフトウエア

08/03/2018

オフィス移転してモノトーンになりました - 代表ブログ更新

スーパーソフトウエア 東京オフィスは、事業拡大に伴い2018/3/5にオフィスを移転しました。移転先も同じ恵比寿で駅から徒歩３分、以前のオフィスより倍くらいの広さになりました。隣にはスターバックスやフードコード「...

07/03/2018

事業拡大に伴いオフィス移転しました！
恵比寿駅から徒歩3分。お近くにお越しの際は是非お立ち寄りください。

株式会社スーパーソフトウエア
〒150-0022 東京都渋谷区恵比寿南1-2-11
フォーシーズン恵比寿ビル 4F

13/04/2017

エンジニアの渡邉です。 先日、開発していたアプリがリリースされました。 リリース前はドタバタでしたが、審査に通った瞬間は本当に嬉しいですね。 開発もひと段落して、現在、次の開発に向けて、 Auto Layoutについて知見を広めようと、技術書を買って読んでいます。 その中でUIStackViewについて書かれていて面白かったので、 今回はUIStackViewについて書こうと思います。 ■UIStackViewとは StoryBoardで見かける、このパーツです。 今まで何のパーツだろうと気になりつつも、使用していなかったのですが、 ・iOS9以上で利用可能 ・UIStackViewにViewを並べると自動的に制約を設定するため、変更に対して強いレイアウトの作成が可能 ・デバイスの回転・スクリーンサイズなどに動的に対応 と中々便利そうなパーツなので、今回はこれを使ってレイアウトを作成してみます。 まずは通常通り、StoryBoardにUIImageViewを置いて制約を貼って画面を作成しました。 かなり制約を貼っているため、ごちゃごちゃしています。 同じレイアウトをUIStackViewを使用して作成してみます。 UIStackViewの設定を使用しているので、制約が少なくなりすっきりしました。 ■UIStackViewの設定値 □Axis(軸) UIStackView内のサブビューを並べる方向です。 ・Horizonal(水平方向) 　 ・Vertical(垂直方向) 　 □Alignment(揃え方) 軸が垂直方向の場合はサブビューの位置決定、水平方向の場合は縦方向の基準を選択します。 ・垂直方向 - Fill 　幅が一番広いオブジェクトに他のオブジェクトの幅を揃えます。 画像の比率の制約を貼っていたので、制約エラーがでています。 比率の制約を全部削除して、UIImageViewのContent ModeをAspect Fitにすることで同じ表示にすることができました。 ・垂直方向 - Leading オブジェクトを左に揃えます。 ・垂直方向 - Center オブジェクトを中央に揃えます。 ・垂直方向 - Trailing オブジェクトを末尾に揃えます。 ・水平方向 - Fill 高さが一番高いオブジェクトに他のオブジェクトの高さを揃えます。 垂直方向の場合と同様のエラーが出ているので、比率の制約を全部削除して、 UIImageViewのContent ModeをAspect Fitに設定します。 ・水平方向 - Top オブジェクトを上に揃えます。 ・水平方向 - Center オブジェクトを中央に揃えます。 ・水平方向 - Bottom オブジェクトを下に揃えます。 ・水平方向 - First Baseline オブジェクトのベースラインの上に揃えます。 ・水平方向 - Last Baseline オブジェクトのベースラインの下に揃えます。 ■今回のまとめ 設定値を変えるだけでレイアウトを柔軟に変更できるので、UIStackViewを使いこなせると開発の幅も広がるし スピードもアップすると思いました。 残りのDistributionについては、まだまだ奥が深そうなので、 次回に記載したいと思います。 ■参考サイト・書籍 サイト：遅ればせながら UIStackView 入門 サイト：StackViewを賢く使ってらくちんAutoLayout 書籍：よくわかるAuto Layout

http://tokyo.supersoftware.co.jp/technology/7157

エンジニアの渡邉です。 先日、開発していたアプリがリリースされました。 リリース前はドタバタでしたが、審査に通った瞬間は本当に嬉しいですね。 開発もひと段落して、現在、次の開発に向けて、 Auto

10/04/2017

Android で HTTP 通信をする際に便利なライブラリを Retrofit を紹介します。 簡単な通信なら自力で HttpURLConnection を使って実装すれば問題ないですが、 様々な API を叩くのであれば Retrofit が良いでしょう。 Retrofit とは Android 向けの HTTP クライアントです。 Java のインターフェイス形式で API の定義ができるようになっています。 public interface GitHubService { ("users/{user}/repos") Call listRepos(("user") String user); } この例ですと、 /users/:user/repos に対して GETメソッドで通信するという意味になります。 listRepos メソッドの引数に ("user") アノテーションを設定することで user に指定したものが :user に置き換わって通信されます。レスポンスは直接 Repo 型のリスト形式となって格納されます。 呼び出し側は以下のように、上記で作成した GitHubService インスタンスを生成した後にメソッドを呼び出すだけ。 Retrofit retrofit = new Retrofit.Builder() .baseUrl(" .build(); GitHubService service = retrofit.create(GitHubService.class); [ 189 more words ]

http://tokyo.supersoftware.co.jp/code/7127

Android で HTTP 通信をする際に便利なライブラリを Retrofit を紹介します。 簡単な通信なら自力で HttpURLConnection を使って実装すれば問題ないですが、 様々な API を叩くのであれば Retrofit が良いでしょう。 Retrofit とは Android

27/03/2017

エンジニアの山本です 今日はSECSについて書こうと思います。 SECSとはSEMI Equipment Communications Standardの略で、SEMIが定めたスタンダード(定義)の一つ、半導体製造業界で使用する通信プロトコルのことです。 半導体製造業界と言うと少し堅苦しい感じがするので、ものすごく簡単に言いますとパソコンやスマホのICチップや液晶テレビの液晶パネルのを作る業界と考えてもらえればわかりやすいと思います。 また、半導体の製造(以下、ウェハープロセス)についてはこのリンクを参照して頂ければ概要はつかめると思います。 SECSはその半導体製造装置と外部から通信するために使用します。 例えば、ウェハーを装置の定位置に置いて、 「このウェハーをこの条件で処理してね」 のようなSECS電文を装置に送ると装置は自動的にその条件で処理してくれます。 「でも、そんなの手作業でもできそうじゃない？」 と思う方もいらっしゃると思いますが「この条件」と言うのがとても厄介なのです。 ウェハープロセスにおけるの製造条件というのはとても多岐にわたります。 必要とする薬品、気温、湿度、気圧、電圧などにもよって製造条件が異なり、ナノメートル単位でのパラメータの調整が必要となる場合もあります。 それらの製造条件を間違えて設定してしまうと数百万～数千万円もするウェハーが没になったり、場合によっては数億～数十億円もする装置が壊れてしまう可能性もあります。 それを未然に防ぐためには、アプリケーションによる最適な製造条件の算出と設定が不可欠なのです。 アプリケーションは、蓄積された製造データや環境値から製造に最適な条件を算出します。 その条件を装置に設定するのがSECSなのです。 また、算出するための製造データを装置より取得するのもSECSです。 SECSは半導体製造装置とTCP/IPもしくはRS232Cのシリアル接続で通信します。 実際の電文はHEXでとても読みにくいのですが、展開するとStream Functionと言う電文形態になっています。 簡単に説明するとこんな感じです。 上図のようにアプリケーションがS1F1を装置に投げると、装置はS1F2を返答します。 このように対となる電文をそれぞれが送受信することで装置とアプリケーションは互いを認識し通信します。 アプリケーションが装置にパラメータを送る際にはS2F41電文を送ります。 S2F41に付加されて送られるパラメータが装置の製造条件に適しているものであれば、装置はS2F42でS2F41の受信応答を返します。 また、装置が起点となる通信もあります。 S6F11は装置において何かしらのイベントが発生した場合に装置より送られます。 指定された処理が終了された場合には、処理終了のイベントに付加されて製造データがアプリケーションに送られてきます。

http://tokyo.supersoftware.co.jp/technology/7001

エンジニアの山本です 今日はSECSについて書こうと思います。 SECSとはSEMI Equipment Communications Standardの略で、SEMIが定めたスタンダード(定義)の一つ、半導体製造業界で使用する通信プロトコルのことです。 半導体製造業界と言うと少し堅苦しい感じがするので、

27/03/2017

Unityでカメラを2つ使い、画面を分割表示したいと思います。 とりあえずCameraが1つの状態で、黄色いCubeを1つ配置し、 CameraにSkyboxを設定しました。 Skybox( はじめに現在のカメラを左側用に設定変更します。 ViewportRectを以下の設定にします。 Xが0(画面左側から)、Wが0.5(画面半分の幅)となります。 カメラが左半分に寄って、右側半分が表示されなくなりました。 次に右側用のカメラを追加し、ViewportRectを以下の設定にします。 （わかりやすいように、左とは違うSkyboxも設定してあります。） 　 Xが0.5(画面左側から半分、つまり画面中央)、Wが0.5(画面半分の幅)の表示となります。 これでカメラ2つがそれぞれ画面半分ずつの表示となります。 現状は、左右のカメラの位置が全く同じなので、Cubeの映り方が左右同じ（それぞれ画面中央）ですが、カメラの位置を動かすことで、同じCubeを別の視点から映すことができます。 以上です。

http://tokyo.supersoftware.co.jp/code/7032

Unityでカメラを2つ使い、画面を分割表示したいと思います。   とりあえずCameraが1つの状態で、黄色いCubeを1つ配置し、 CameraにSkyboxを設定しました。 Skybox(https://www.assetstore.unity3d.com/jp/ #

24/03/2017

こんにちは、エンジニアの関です。 学生時代、隣の研究室でGPSを使った測量を研究していたので、その実習のお手伝いで学んだことや、調べたことを健忘録的に書いていこうと思います。きっとなにかの役に立つはず。 GPSってなに？ もともとアメリカが軍事用に運用している測地用のシステムです。GPS衛星という人工衛星からの電波を地上で受信して測位するシステムです。カーナビやスマホにデバイスが入っているので機能に関しては皆さんよくご存知かと思います。GPS衛星は地上からの高度2万kmくらいを秒速4kmくらいで地球の周りを12時間かけて回っています。私が学生だった1991年頃は20機弱くらいが運用中だったかと思うのですが、いまは30機ほどの衛星が稼働中だそうです。人工衛星の位置( GPS 衛星」がGPS衛星です。 学生時代にどういう研究をやっていたかというと、あらかじめ位置が測量成果で確定している３地点の三角点で一定時間データを取り、ソフトウェアで処理することで、それぞれの距離がどの程度の精度で 得られるか、また、従来の測量成果に対してどうかという研究をしていました。観測に１地点最低でも２名以上が必要なので、大抵の実験に要員として参加していました。作業は設置、撤去、衛星が見える方向に木の枝があると、土地の所有者に確認してノコギリで切る、などですが。 GPSで位置がわかる仕組み GPSでの測位は三辺測量を原理としています。簡単に説明すると三辺の長さと２つ頂点の位置がわかれば、あと一つの頂点の位置が決定できます。 ２つの衛星の正確な位置がわかれば、衛星間の距離は計算できますので、赤線の「衛星との距離」を測れば２次元平面内でのGPS受信機の位置を特定する事ができます。 衛星の位置を特定するには、GPS衛星の軌道情報と時刻情報が必要です。 特にGPS衛星は秒速4kmと非常に高速で移動しているので、非常に高い精度の時刻情報が必要になります。下のWikipediaのページでは、「時刻の誤差がたとえ100万分の1秒であったとしても、距離の誤差は300mにも及んでしまう」とあります。 グローバル・ポジショニング・システム(Wikipedia) GPS衛星では、高精度原子時計を搭載しています。そして、全GPS衛星の軌道情報と時刻情報を送信しています。GPS受信機では、GPS衛星から受信する軌道情報と複数のGPSからの時刻情報から高精度の時刻情報を計算します。 上の三辺測量の図に話を戻すと、２つの衛星との測位から確定出来るのは、図の平面上の２次元の位置となります。 実際に高精度の時刻情報に同期して、３次元で位置を確定するには、４つ以上のGPS衛星の電波が受信できるのが条件になっています。 ただし、３つの衛星から受信している時には、高度を確定できませんが、緯度経度を決定できます。(地球楕円体表面に居ると仮定して演算する) GPS衛星の測地の誤差のこと GPS衛星は、直接拡散方式のスペクトラム拡散の無線で情報を送信しています。 スペクトラム拡散 #直接拡散 (Wikipedia)ひとつのGPS衛星から民間でも使用できるC/Aコードと軍用のPコードの２種類の信号が送信されています。民間用のC/Aコードを使用した一点測位で10m程度、軍用のPコードを使用すると精度は16cm程度と言われています。軍用ではミサイルの誘導などに使われています。 また運用開始～2000年5月までは、民間利用の精度を制限するために、C/Aコードの情報にノイズが乗せられており一点測位の精度は100m程度でした。これをSA（Selective Availability、選択利用性)といいます。 ただ、1990～1991年の湾岸戦争前後では、一時的にSAが解除されて、測位の精度があがりました。このことは当時はあまり知られておらず、測地の研究室で当惑していたのを覚えています。当時、中東地域での測位精度を上げるためか、GPS衛星の軌道も変えられた様で、衛星が多く見える時間帯を選ぶのに苦心していた様でした。 またGPS受信機と受信が可能なGPS衛星の位置関係での誤差があります。 GPS Test (Google Play) 上の図は、AndroidのGPSの受信状態を表示できる「GPS Test」の画面です。 「●」がGPS衛星が現在位置から見える(って肉眼で見えるわけではありませんが)方向と仰角です。「▲」はロシアのGLONASSという測地用衛星の位置です。 このスマホのデバイスでは、ロシアのGLONASSを補助的に使用できる機能を持っているようです。GLONASSを補助的に使えるデバイスは一般的にGPSのみの機種より受信できるGPS衛星の数が少ない環境での精度が高いです。 誤差の話に戻ると、もしビルの影などで、受信可能なGPS衛星が南北方向にしか位置していなかったとしたら東西方向の精度を高くすることが出来ませんので、東西方向の誤差が大きくなります。 また都市部では、電波が地面や建物に反射して、様々な経路でGPS受信機に届く事で精度が落ちます。スマホに搭載されているデバイスではマルチパスの影響を取り除くのは難しいようです。 衛星測位システム #マルチパス (Wikipedia) マルチパス (Wikipedia) スマートフォンとGPS デバイススマートフォンでのGPS測位では、A-GPSという補助機能があります。 2010年のA-GPSの記事 (携帯Watch) GPSの測位に必要な情報としては、上の方で、 測位に使うGPS衛星の軌道情報 正確な時計（または正確な時刻に同期した時計） が必要と書きました。 A-GPSを利用するとスマホが接続している基地局の情報から概算位置を割り出し、そこで受信出来るGPS衛星の軌道情報を取得する事ができます。こうすることによって、GPS衛星から軌道情報が送られてくる(50bpsと非常にゆっくり)のを待たず、短い時間で測位を完了することが出来ます。 しかし、A-GPSは基地局からの電波が届いており通信可能な条件でしか動作しないので、圏外では動作しません。 補助GPS(A-GPS) #運用モード (Wikipedia) 「MSA (Mobile Station Assisted) モード」での動作では、位置の計算までサーバ側で行わせることができます。 スマートフォンとA-GPSに関しては下の記事が詳しいです。 IIJmio mtg #5 MVNOとGPS (Slideshare) 間違いなど指摘していただけたら、とても有難いです。 では。

http://tokyo.supersoftware.co.jp/technology/7002

こんにちは、エンジニアの関です。 学生時代、隣の研究室でGPSを使った測量を研究していたので、その実習のお手伝いで学んだことや、調べたことを健忘録的に書いていこうと思います。きっとなにかの役に立つはず。  

15/03/2017

エンジニアの渡邉です。 地図機能を持ったアプリを作成するときにMapboxを使用したので、 Mapboxで地図表示する方法を書こうと思います。 1.Mapboxに登録 からユーザ登録を行います。 2.MapboxSDKをプロジェクトに追加 今回はpodを使用して追加します。 Podfileに以下を追加し、pod installを実行 3.Info.plistにMapbox access tokenを設定 access tokenはユーザのマイページから確認できます。 MGLMapboxAccessTokenに確認したaccess　tokenを設定します。 4.Map表示画面の作成 ViewController上にViewを置き、ViewのクラスをMGLMAPViewにします。 5.コード実装 Styleはユーザのマイページから作成することができます。 StyleでMapの表示カスタマイズもできるので、目的に合わせてカスタムしたMapをアプリで表示できます。 実装した結果の画面がこちらになります。 ちゃんと表示さてれいることが確認できました。 6.まとめ Mapboxは実装の難易度も高くなく、自分でMapのカスタマイズができる点が良かったと思います。 今回のブログでは記載できませんでしたが、オフラインでもマップ表示が可能なので、

http://tokyo.supersoftware.co.jp/technology/6981

エンジニアの渡邉です。 地図機能を持ったアプリを作成するときにMapboxを使用したので、 Mapboxで地図表示する方法を書こうと思います。 1.Mapboxに登録 https://www.mapbox.com/ からユーザ登録を行います。 2

13/01/2017

明けましておめでとうございます。 大掃除で綺麗になったオフィスは仕事を始められるのはすばらしいことです。 (詳細はこちら) さて、今回は Android で動画を作成してみようと思います。 スマホで動画をどうにかする需要は意外とあります。 基本的に外部ライブラリに頼ることが多いので (mp4parser など) 、勉強がてら Android SDK のみでやってみます。 Android SDK ですと、 MediaRecorder や MediaCodec などが挙げられます。 MediaRecorder は内蔵カメラ・マイクからの入力をそのままキャプチャして保存したりするのに向いています。 MediaCodec は低レベルなマルチメディアサポートインフラということもあり、様々なことができるようです。 今回は、 MediaCodec を使って動画を作成してみます。 最初なのでまずは映像のみの動画から作ってみましょう。 仕組み MediaCodec は API level 16 (Android 4.1) から追加された API で、結構な頻度でアップデートが入っています。 基本的な使い方は MediaCodec の Class OverView に書いてあります。 といっても膨大な量なので理解するのはなかなかに骨が折れます。 簡単にいってしまえば、 MediaCodec はあくまでコーデックでエンコードとデコードを担っています。 入力データを MediaCodec を介してエンコードし、 MediaMuxer を使ってファイルを作るといった形になります。 [ 1,566 more word ]

http://tokyo.supersoftware.co.jp/code/6104

明けましておめでとうございます。 大掃除で綺麗になったオフィスは仕事を始められるのはすばらしいことです。 (詳細はこちら)   さて、今回は Android で動画を作成してみようと思います。 スマホで動画をどうにかする需要は意外とあります。 基本的に外部ライブラリに頼ることが多いので (mp4parser など) 、勉強がてら Android SDK のみでやってみます。 Android SDK ですと、 MediaRecorder や MediaCodec などが挙げられます。   MediaRecorder は内蔵カメラ・マイクからの入力をそのままキャプチャして保存したりするのに向いてい...

28/12/2016

エンジニアの土屋と申します。 今回は、angular jsでLINE風チャットを作成してみました。 アプリでは、様々なサービスで吹き出しが表示される会話型のチャットがありますが、webサービスではあまり見かけません。 そのそも需要がそんなにないかもしれませんが。。 しかし、今回そのようなミッションを与えられたので、どのように実現したかを書いていきます。 専用cssを書きました いろいろ調べたのですが、Bootstrapには、チャットようの便利なコマンドはありませんでした。 先人たちの実現内容を確認したところ、やはりcssで独自に描画しているようでした。 ・chat.css /******************************* * left ********************************/ .left_balloon { position: relative; background: ; border: 1px solid #777; margin: 10px; padding: 10px; border-radius: 15px; margin-right: 20%; clear: both; max-width: 500px; float: left; } .left_balloon:after, .left_balloon:before { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .left_balloon:after { border-color: rgba(255, 255, 255, 0); border-right-color: ; border-width: 7px; margin-top: -7px; } .left_balloon:before { border-color: rgba(0, 0, 0, 0); border-right-color: #000; border-width: 8px; margin-top: -8px; } /******************************* * right ********************************/ .right_balloon { position: relative; background: ; border: 1px solid #777; margin: 10px; padding: 10px; border-radius: 15px; margin-left: 20%; clear: both; max-width: 500px; float: right; } .right_balloon:after, .right_balloon:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .right_balloon:after { border-color: rgba(133, 226, 73, 0); border-left-color: ; border-width: 7px; margin-top: -7px; } .right_balloon:before { border-color: rgba(119, 119, 119, 0); border-left-color: #777; border-width: 8px; margin-top: -8px; } /******************************* * clear ********************************/ .clear_balloon{ clear: both; } .comment_area { margin-bottom: 20px; } /******************************* * 改行 ********************************/ .new_line { white-space: pre-line; } … [ 33 more words ]

http://tokyo.supersoftware.co.jp/code/6088

エンジニアの土屋と申します。 今回は、angular jsでLINE風チャットを作成してみました。 アプリでは、様々なサービスで吹き出しが表示される会話型のチャットがありますが、webサービスではあまり見かけません。 そのそも需要がそんなにないかもしれませんが。。 しかし、今回そのようなミッションを与えられたので、どのように実現したかを書いていきます。 専用cssを書きました いろいろ調べたのですが、Bootstrapには、チャットようの便利なコマンドはありませんでした。 先人たちの実現内容を確認したところ、やはりcssで独自に描画しているようでした。 ・chat.css /*********...

14/12/2016

エンジニアの渡邉です。 エンジニアブログですが、今回は技術的なお話ではなく、 先日行った東京オフィスの大掃除について書こうと思います。 大掃除と合わせて、デスクも新調してもらいました。 デスク入れ替えの間に配線周りや、給湯室、棚など、各部隊に分かれて一気に大掃除。 丸1日使っての作業でした。 お昼にはピザを頼んで、皆で一緒にご飯！ デスクを撤去していたので、掃除用に業者さんがくれた段ボールを机代わりに。。笑 普段、お昼休みは各々作業のキリがいい時に取るので、みんなでご飯食べるのは新鮮ですね。 お昼食べてからは掃除の続きを行い、新しいデスクの搬入、ようやく夕方にはひと段落！ 新しいデスクの搬入とともに、レイアウトも変更して、前よりもオフィスが広く感じます。 デスクにキャビネットもついて、作業スペースも大分広々として、前よりも断然作業がしやすくなりました。 日々の仕事を進めるにあたりオフィスの環境って大事ですね。 ※beforeの写真がなくて非常に残念です。。撮り忘れてました。 掃除も和気あいあいと進め、終業後はお疲れ会と称して都合の付く人何人かで飲みに。非常に楽しかったです。 今年はとても多くのプロジェクトに関わらせていただき、お客さんとお話する機会も多く、 自分のスキルがすごく上がったと感じる1年でした。 2016年もあと3週間を切りましたが、気を緩めることなく開発を行っていきたいと思います。

http://tokyo.supersoftware.co.jp/info/6071

エンジニアの渡邉です。 エンジニアブログですが、今回は技術的なお話ではなく、 先日行った東京オフィスの大掃除について書こうと思います。 大掃除と合わせて、デスクも新調してもらいました。 デスク入れ替えの間に配線周りや、給湯室、棚など、各部隊に分かれて一気に大掃除。 丸1日使っての作業でした。 お昼にはピザを頼んで、皆で一緒にご飯！ デスクを撤去していたので、掃除用に業者さんがくれた段ボールを机代わりに。。笑 普段、お昼休みは各々作業のキリがいい時に取るので、みんなでご飯食べるのは新鮮ですね。 お昼食べてからは掃除の続きを行い、新しいデスクの搬入、ようやく夕方にはひと段落！ 新しいデスクの搬入と...