Facebook Twitter Google Maps RSS
formats

【第2回】自作 Cordova プラグインの作り方 〜フォルダ構成の解説!〜

Published on 2015年8月31日, by in 未分類.

こんにちは!

陽気なシステム屋のりょーたです!

今月で2回目となるライブラリ等の使い方について投稿します。

と言っても今回はCordovaフレームワークの解説です!

Cordovaプラグイン作成

まずはじめに、Cordovaプロジェクトのpluginsディレクトリにフォルダを作成します。

フォルダ名は、今から作成するプラグインのパッケージ名にすると良いです。

例:com.example.appName

次に先ほど作成したフォルダの中に、

plugin.xml

srcフォルダ

を作成します。

plugin.xmlは、作成するプラグインの定義を行うファイルです。

画像のコメントで解説している通りに、定義ファイルを作成してください。
ここの定義を間違えてしまうと後々ハマるかも・・・。(実際私はハマりました(汗))

これでプラグインの定義が完了しました。

 

ソースファイルの作成

続いて、ソースファイルですが実装方法にいくつか注意点がありますので、その点について記述していこうと思います。
今回は代表的な例として、iOSとAndroidの解説を致します。

まずはiOSですが、ヘッダファイルには宣言と継承のみを記述してください。
ディレクトリは、[パッケージ名]/src/ios です。
plugin.h

このように、CDVPluginをimportし、継承してください。
また、メソッドの宣言は
-(void)Cordovaから呼び出すメソッド名:(CDVInvokedUrlCommand*)command;
のようにしてください。

続いて、plugin.mにソースを書いていきます。
plugin.m

こちらのファイルは、特にこれといって気をつける点はありません。
上記のように実装してください。

次にAndroidの実装方法です。
ディレクトリは、[パッケージ名]/src/android/[パッケージのディレクトリ 例:com/example/app] です。

plugin.java

Cordovaから呼び出されると、executeの第一引数にメソッド名が渡されるので、
メソッド名を条件とし、処理を記述していきます。

これで簡単な処理ではありますが、Pluginの基礎が作成できました。
ここからは用途にあったカスタマイズをしてみてください。

次の項では作成したプラグインをCordovaから呼び出す処理を解説したいと思います。

Cordovaからの呼び出し

呼び出したい箇所で、cordova.exec()メソッドを呼び出します。
記述方法は、

cordova.exec(
                function() {
                    console.log('Custom Plugin is successful.');
                },
                function() {
                    console.log('Custom Plugin is failed.');
                },
                "プラグイン名", "実行したいメソッド名",
                []
            );

です。
このメソッドの構成は、
cordova.exec(呼び出し成功時関数,呼び出し失敗時関数,プラグイン名,実施するメソッド名,引数の配列);
となっております。

あとは自作プラグインをCordovaのプロジェクトに追加しないといけません。
コンソールやターミナルでプロジェクトのディレクトリに移動し、

cordova platform remove android && cordova platform add android

cordova platform remove ios && cordova platform add ios

上記のコマンドを実行してください。
今回は、プラグインを読み込むのはplatform追加時だそうなので上記の方法を行いましたが、他に良い方法があるのかもしれません。

最後にビルドして実行すると動くはずです!

まとめ

さて、今回はCordovaフレームワークについて解説致しました。
Cordovaの自作プラグインについての情報が少ないため、今回の題としてみました。
少しでも参考になれば幸いです!

また、今回Cordovaのソースを読むことで理解が深まった部分が多々ありました。
余裕がある際はこういったことも面白いかもしれません。

弊社開発実績はこちら

formats

【第1回】ライブラリの使い方 〜 Swiper.js 〜

こんにちは!
陽気なシステム屋のりょーたです!

本日からスキルアップも兼ねてライブラリ等の使い方を毎月一回投稿しようと思います。
困った時の参考にしていただければ幸いです。

さて、本日は現在実際の業務でも使用している、Swiper.jsの使い方を解説します!

Swiper.jsとは

JavaScriptとCSSのみで構成されている軽量なスライダーで、
レスポンシブデザインにも対応しており、スマホでも軽快に動作する優れものです。

説明を聞くより実際に触った方が分かりやすいと思いますので、公式サイトのデモをご覧ください。

使い方

公式サイトより、Swiper.jsをダウンロードしてください。

次に、ダウンロードしたファイルのdistフォルダ内にある、swiper.jsとswiper.cssをHTMLに読み込みます。


次にSwiperの本体であるHTMLを追加します。

ここで、swiper-containerで囲んでいる部分がSwiperの大枠となります。
その中にswiper-wrapper、swiper-slideがあり、swiper-slideがスライドされる要素になります。
画像やテキスト等、swiper-slideで囲むことでスライド可能な要素になるということですね。

ちなみにSwiperのサイズは以下の方法で変更できます。

.swiper-container { width: 600px; height: 300px; }

これでHTMLの準備が整いました。
続いて、JavaScriptでSwiperの初期設定を行っていきます。

 

このように、

var (任意の名前) = new Swiper (‘.swiper-container’, {

});

とすることでSwiperを作成することができます。
オプションやパラメータ、メソッドも多く用意されており、ここで設定することができます。
例としてここで設定しているloop属性は、Swiperのスライド1→スライド2→スライド3→スライド1→…のように際限なく繰り返す、というものです。

ですが、このloop属性が少し厄介で苦労しましたので、後述します。

他にもたくさんありますが、数が多く書ききれないため詳しくは公式APIを探ってみてください。

さて、以上でSwiperが動作するようになったと思います。
ですが実際はここからが本番で、個人の目的に合わせカスタマイズしていきますよね。

そこで、私が実際にハマった点とその解決方法をご紹介したいと思います。

ハマった点

私の実現したかった機能として、
”DBから画像を取得・設定後、Swiperを自動で動かしループさせ、表示されているスライド画像をクリックするとリンクを開く”
という、ごく普通でよくある機能でした。

はじめにIndexで制御できないかと思い、現在アクティブなスライドのインデックスをとるメソッド、mySwiper.activeIndexを使用し、DBから取得している画像のリンクとひも付けて表示させようとしました。
しかし、結果はうまくいかず、indexが一意ではなく意図しているものが取れない状態に陥りました。
悩んだ私は、APIドキュメントとにらめっこしていると、loop属性にこんな表記がありました。

直訳すると、”ノート:ループモードではアクティブなインデックス値は常にループ/重複スライドの数にシフトされます”。
つまりループを実現させるために、内部でスライダーを二つ・あるいは複数用意しており、それらを切り替えてループしているように見せているわけです。
そのため、どのスライダーを参照しているかによりIndexが一意では無くなってしまうということでした。

これには困りました。どのように現在のスライドを取得すればいいのかわからずIndex周りを探り、
previousIndex(一つ前のスライドのIndex)、clickedIndex(クリックしたIndex)も念のため見てみましたが同じ現象で変わらずでした。


解決策

他に使えそうなメソッドがないかと探していると、clickedSlideというメソッドがあり、
クリックしたスライドのHTMLElementを取得できるようでした。

そこで、各スライドに独自データ属性としてURLを持たせ、JavaScriptから、
mySwiper.clickedSlide.getAttribute(‘data-○○○’)とすると、URLを取得でき、リンクを開くことができました。
もし同じようなことで悩んでる方は一度試してみてください。

まとめ

ここまで一通り説明してみましたが、いかがでしたでしょうか。
この記事を何かの参考にしていただけると幸いです。

このライブラリは非常に使いやすく、動作も軽量なのでオススメです。
ですが、loopでのIndexの扱いには気をつけてくださいね。

これから毎月投稿していくので宜しくお願いします。

弊社開発実績はこちら

formats

behat導入と基礎

こんにちは!

駆け出しプログラマー安東です。

今回は最近現場で使ったテストツール「behat」について書きます!

■Behatとは

・PHP用のBDDフレームワーク
・Gherkin
・内部的にはsymfony2で作成されている
 symfony2との親和性が高い
 symfony2系以外のFWでも利用可能

■behatのダウンロード

まず適当なディレクトリにbehatをダウンロード!
※今回は事前にbehatディレクトリを作成し、そこにダウロードします。

composerを使ってダウンロードしましょう。
behatディレクトリで以下コマンドを実行しましょう。

#curl -sS https://getcomposer.org/installer | php
#php composer.phar require –dev behat/behat=’~3.0.4′

上記コマンドでbehatのダウンロードが完了です。
ダウンロードできると以下のディレクトリが構成されています。

behat/
 vendor/
  bin/
   behat/
 composer.json
 composer.lock
 composer.phar

■behatの実行環境構築

上記ディレクトリ構造配下にappディレクトリを作成します。

#mkdir app

behat/
 vendor/
  bin/
   behat/
 composer.json
 composer.lock
 composer.phar
 app/

appディレクトリで下記コマンドを実行

#../vendor/bin/behat –init

上記コマンドを実行すると以下のようなファイルが設置されます。

 vendor/
  bin/
   behat/
 composer.json
 composer.lock
 composer.phar
 app/
  features/
   booststrap/
    FeatureContext.php

■behat.ymlの準備

behatでは実行のための設定ファイルをbehat.ymlに記述します。
今回はappディレクトリにbehat.ymlを作成します。

#touch behat.yml

 vendor/
  bin/
   behat/
 composer.json
 composer.lock
 composer.phar
 app/
  behat.yml: 作成した設定ファイル
  features/
   booststrap/
    FeatureContext.php

behat.ymlに以下のように記述

**~behat.yml~**

※%paths.base% : 実行ディレクトリを指している

1.autoloadを指定して、bootstrap配下のFeatureContext.phpを読み込む
2.suitesを用いて記述します。
  suitesを使用することで、pathsとcontextsを名前(今はdefault)をつけて管理することが可能
3.pathsは「.feature」ファイルがあるディレクトリまでのパスを記述
4.contextsでautoloadで読み込んだFeatureContext.phpファイルのクラスを指定

■テストケースの作成

テストはbehat.ymlのpathに指定したディレクトリ以下に作成していきます。
テストファイルの拡張子はfeatureにする。

#touch test.feature

 vendor/
  bin/
   behat/
 composer.json
 composer.lock
 composer.phar
 app/
  behat.yml: 作成した設定ファイル
  features/
   test.feature:作成したテストケース
   booststrap/
    FeatureContext.php

**~test.feature~**

「#Language:en」で言語を指定しています。

■behatの実行

この状態でbehatの実行をしてみましょう。
appディレクトリまで移動して、下記コマンドで実行できます。

#../vendor/bin/behat

長くなりましたが、
以上で簡単ですが、behatの導入と基礎でした!

テストケースを日本語でも書けるのが魅力ですが、
やはり英語で記述したほうが良いのかな。。。

ではこのへんで(∩´∀`)∩

【番外編】

behatにライブラリを導入し、
簡単なブラウザテストを実行してみます。

まず、composer.jsonに下記項目を追加します。

“require-dev”: {
 ”behat/mink”: “1.*”,
 ”behat/mink-extension”: “*”,
 ”behat/mink-selenium2-driver”: “*”,
}

そして、phantomjsをインストールしておいてください!

これで準備は完了です。
まず、phantomjsを起動しましょう。
下記コマンドを実行します。

$phantomjs -webdriver=4444

次にbehat.ymlを編集します。

次にFeatureContextクラスでMinkExtensionを継承します。

最後にtest.featureファイルを編集します。

これで完了です。

これを実行すると下記画像のようになるはずです。

これはほんの一例ですが、このような形でブラウザテストをすることが可能です。

MinkExtensionにテストケースがたくさん準備されているので、
それらを用いて様々なテストを実行することが可能だと思います。

以上
番外編でした!!


ECサイト構築はこちら


ホームページ製作はこちら

formats

電源って大事だね

こんにちは。
陽気なシステム屋の一員の「ごめん寝、すまん寝の画像で癒されながらコードを書く者」です。

技術については、ググれば沢山出てくる昨今ですので、

HDDについての私の体験を少し話したいと思います。

うちには都合6台のPCが常時稼働しています。(mac book proを入れれば7台)

HDDについてはお気に入りのメーカーがあり、このメーカーのエンタープライズ向けのHDDをバルクでせっせと昔から買っていました。

HDDが怪しくなると、RMAがあるものは交換に出していました。(意外と送料が馬鹿にならない)

新品で戻ってきて、やれやれと思って、PCにつけると即日怪しくなります。

なんじゃこりゃ?。と、何度も交換に出して、やっとまともなものが手に入ることも度々です。

数年前、ある記事が発表されました。知る人は知る、HDDの壊れやすいランキングです。

このランキングトップがなんと私のお気入りのメーカーでした。

私は愕然とするとともに、あーやっぱりと、妙な納得をしてから、

メインのメーカーを鞍替えしました。

ただ、先のメーカーはRMAが残っていれば、物理的な破損が外部にない限り、即交換してくるのはありがたかったです。

で、タイトルの事ですが、ある怪しいHDDがでてきました。カーン、カーン、カタ、カタと音は様々ですが、

明らかに物理的に怪しい音です。データを読み取ろうとすると、途中で永遠と0MB/sとなり、思い出したようにまた読み出したりを繰り返します。あー、こりゃだめか。といつもならデータをあきらめて交換に出すのですが、

ふと気まぐれに、電源からでているSATA用の2本のケーブルのうち、使っていない方をHDDにつないでみると、

先の不調がうその様に読み書きをしてくれます。ん?たまたまか?と、電源ケーブルを戻してみるとまた、同じ現象。

もう一本に変えてみると、とても順調。そのHDDはRMAが切れていたので、ごみに出すこともできない、ごみになるところが、

いまだに元気に動いています。

今考えると、不調だと思っていたHDDは、HDD本体のせいではなく電源のせいではないかと。

電源トラブルで電源を買い替えたことは何度もあったのですが、その時は、PC自体が起動しないなどでしたので、

目からうろこ状態でした。電源ってやっぱり大事ですね。電源は消耗品だなとつくづく思わされました。

ちなみにHDDは燃えるゴミにも燃やせないゴミにも、資源ごみにも出せません。PCでもありませんので、有料での回収もありません。どう処分してよいやらわからないHDDが20本程、ひっそり眠っています。業者に頼むと、一本900円くらいで破砕処理してくれるようですが。

ここまでは、私のつたない体験談ですが、お役に立つ情報を一つ。

昨今のHDDはTBが当たり前、ただし、古いマザーボードでは、4TBなどのHDDを指すとBIOSでは認識してもWindowsでは、(うちのWindowsは基本8.1です。)正しい容量で認識しません。マザーボード用のデバイスドライバが古い為、致し方ないのですが。

そこでお立合い。限定的な条件になってしまいますが、

あなたのマザーボードが、LGA775で、チップセットがICH10なら、4TB以上のディスクでも使える可能性があります。

マザーボードのドライバでインテルマトリクス・ストレージ・マネージャーを使っているのなら、

これを削除し、インテルのサイトから、インテル・ラピッド・ストレージ・テクノロジー落としてきて、インストールするれば、利用できる可能性があります。

ただし、インストールできるのは、iata_cd.exe  となっている、一番古いバージョンです。

うちの上記条件のマザーで、見事4TBを認識して正常な容量で使えるようになりました。

マザーボードメーカーのドライバではなく、インテル純正のドライバですので、100%うまくいく保証はありません。

ドライバをインストールする事で、不調をきたす可能性もあります。

うちの環境では、たまたまうまくいっただけかもしれません。

ですので、一切の責任は持てませんのでくれぐれも自己責任でおねがいします。

全く関係ない話ですが、私はマウスよりトラックボール派です。先日、ケンジントンのスリムブレイドトラックボールを購入したのですが、むちゃくちゃ使い勝手がいいです。ネットではいまいちと言われている方もいますが、私にはあたりでした。

親指トラックボールは右手でしかまともに操作できないので微妙です。やっぱり、人差し指、中指ででかいボールをぐりぐりできるトラックボールが使いやすい。

ではでは。

formats

AR技術って何?

Published on 2015年6月12日, by in 未分類.

おはようございます!こんにちは!こんばんは!
初めまして陽気なシステム屋新入りのポンタです!

初めてなことばかりで勉強することが多いですが、
知識を取り入れていくことは好きなので、日々楽しく過ごしております!

ところでみなさん!
AR技術という言葉を知っていますか?
もしくは、聞いたことはあるけど知らない…
なんてことはありませんか?
そんなみなさんにAR技術について説明したいと思います。

AR技術とは

AR技術とは、コンピュータを用いて現実世界に情報を付加する技術のことです。
一見難しく感じるかもしれませんが、みなさんも見たことがあるかもしれません。
例をあげて説明しますと、カメラ越しにまたは特殊なメガネをつけて、
ある一定の場所を見ると現実世界に3Dの物体が現れるなんてことを、
実際に経験したり、テレビ等で見たことはありませんか?
これもAR技術の一つなんです!

どこで利用されているの?

実際利用されている一部を紹介したいと思います。

・雑誌や図鑑の生き物を3Dモデルで表示
・広告にカメラをかざすと、ビデオが流れる
・風景上に情報を投影するカーナビ
・現実世界がゲームの舞台になる
・ARを利用した体験型イベント

一部ですが、いろんな所に利用されていますね。

AR技術の特徴

AR技術についてなんとなく想像できたかと思います。
次は、技術的な特徴について説明したいと思います。
AR技術の特徴ですが大きく2つに分けることができます。

1つめは、GPS等位置情報を利用するものです。
これは先ほどの利用例にあげた「風景上に情報を投影するカーナビ」等があります。

2つめは、画像・空間を認識することで情報提示を行うものです。
「雑誌や図鑑の生き物を3Dモデルで表示」「広告にカメラをかざすと、ビデオが流れる」等ですね。

それぞれにメリット・デメリットがあり、
利用内容によりどちらの技術を使うのかが変わってきます。

まとめ

AR技術は最近よく聞くようになってきたと思います。
私も現在ARを利用したアプリを作成しています。
おもしろそう!興味がある!等思っていただけたならARを利用したアプリもありますので、
ぜひこの機会に体験してみてはいかがでしょうか!

弊社開発実績はこちら

Tags:
formats

CakePHPでSecurityコンポーネント+AjaxでPOST送信

こんにちは、陽気なシステム屋です。

CakePHPでSecurityコンポーネントを使用しつつAjaxをPOST送信すると、
セキュリティチェックエラーになってしまう。
その解決策を考えてみたので書いておこうと思います。

検証環境は PHP 5.5.24、CakePHP 2.4.7 です。

まず、Securityコンポーネントのトークン生成とチェックの流れはこんな感じ。

▼ページ描画時

トークンを生成、セッションに格納。(トークンはランダム値をキーに、有効期限を値にした配列)
トークンキーをリクエストデータに格納、フォームヘルパーによってフォーム内にhiddenで描画される。

↓こんな感じで。

<input type=”hidden” name=”data[_Token][key]” value=”6ab2d0043ab0a0d7974324ccefe17806cb1279d5″ id=”Token1858912179″>

▼リクエスト送信時

POST/PUT送信時、セッション内にリクエストデータのキーに該当するトークンが存在するかチェック。
チェック終了とともにセッションから該当トークンを削除。(ワンタイムトークン設定=trueの場合)

で、Ajaxで普通にPOST送信するとトークンキーを送ってないので上記チェックではじかれてしまう。
解決策を考えてみます。

①Ajaxアクションでトークンチェックをしない。

AjaxアクションがあるコントローラのbeforeFilterで一時的に設定変更。
一番簡単だけどセキュリティ的には非推奨。

public function beforeFilter() {
 parent::beforeFilter();
 // CSRFチェック、POSTバリデートともOFF
 $this->Security->unlockedActions = array('アクション名');
 // CSRFチェックのみOFFならこちら
 if ($this->params['action'] == 'アクション名') {
   $this->Security->csrfCheck = false;
 }
}
②Ajaxでトークンキーも同時にPOST送信してセキュリティチェックを行う。

さらに新しく発行されたトークンキーを受け取ってJSでフォームに反映する。ちょっと面倒。

// クライアント側
$.ajax({
 url: '/xxx/ajaxHoge',
 type: 'post',
 dataType: 'json',
 data: {
  'data[_Token][key]': $('#targetForm').find('input:hidden[name="data[_Token][key]"]').val()
  'data[xxxxx]': $('#xxxxx').val(), // 必要な値を送る
 },
}).always(function(data){
 // トークンキー書き換え
 if (typeof data.token !== 'undefined') {
  $('#targetForm').find('input:hidden[name="data[_Token][key]"]').val(data.token.key);
 }
});

// フォームデータを丸ごと送信してもいい。
$.ajax({
 data: new FormData($('#targetForm').get(0)),
 ・・・・
});

// サーバ側
public function ajaxHoge() {
 $result = array();
 // ~~ 必要な処理をする ~~
 if (!empty($this->request->params['_Token'])) {
  $result = array('token' => $this->request->params['_Token']);
 }
 echo json_encode($result);
}
③ワンタイムトークンをfalseにしておき、Ajaxでトークンキーも同時にPOST送信してチェックする。

トークンキーを変更しないのでフォーム値の書き換えが不要。でも安全性は下がる。
※POST送信するところは②と同じ。

public function beforeFilter() {
 parent::beforeFilter();
 // ワンタイムトークンをOFF
 $this->Security->csrfUseOnce = false;
}

ちゃんとチェックしているということで、なんだか面倒ですが②を使っております。
もっといい解決策があったら知りたいですね。

formats

Vagrantを使用してWebサイトを作る~FuelPHP導入編~

こんにちは!

駆け出しプログラマー安東です。

前回vagrantにPHPを導入しましたので、
今回はFuelPHPをサーバに載せ、FuelPHPのWelcomeページを開いてみます。

では早速vagrantを立ち上げましょう!!
下記コマンドで立ち上がります。

vagrantを立ち上げるコマンド等は過去の記事をご覧ください。
 ****過去記事URL****
 http://www.system-i-enter.com/blog/?p=5867

仮想環境が立ち上がったら、TeraTermからログインしましょう!
ログインできたら、root権限に変更してください。

srcディレクトリにFuelPHP本体を格納しようと思います。
/var/www/html/配下にsrcディレクトリを作成します。
ディレクトリの作成は下記コマンドで実行できます。

#mkdir src

ディレクトリが作成できましたら、
FTPソフトを使用して、FuelPHP1.7.2をサーバにアップロードします。
予めローカル環境にFuelPHP1.7.2をダウンロードしておいてください。

FTPソフトは私はWinSCPを使用しました。
下の画像のようにホスト名、ポート番号、ユーザ名、パスワードを入力しログインボタンをおしてください。

WinSCPで接続できると下の画像のようになります。

ローカル側はfuelphpを保存しているディレクトリに移動し、
サーバ側は/var/www/html/srcに移動します。

このままサーバ側にファイルをコピーするとパーミッションエラーで
コピーすることができないので、
srcのパーミッションを変更します。

TeraTermで/var/www/html/に移動し
下記コマンドを実行してください。

#chmod 757 src

これでパーミッションエラーが表示されず、
ファイルがコピーできるはずです。
パーミッションとは権限のことで、
 ディレクトリ、ファイルには読み取り権限・書き込み権限・アクセス権限が与えられています。
 上記コマンド実行前だと書き込み権限がないため、
 ファイルをコピーする事ができません。
 よって、ディレクトリに書き込み権限を付けました。
 757とは権限のことで、通常パーミッションはrwxrwxrwxのようになっています。
 始めのrwxがファイル、ディレクトリの所有者、次が同じサーバを利用できるユーザ
 最後が第三者の事を指しています。
 r:読み取り権限
 w:書き込み権限
 x:アクセス権限
 よってWinSCPでアクセスするため、
 第三者に書き込み権限とアクセス権限を付与します。
 数字で表しているのは以下のようにrwxが対応しており、
 その数字の足し算で記述できるからです。
 r:4,w:2,x:1
 したがって757とはrwxr-xrwxのことを指します。

上の画像のようにサーバ側にコピーできていれば完了です。

サーバ側で/var/www/html/src/fuelphpに移動し、
このままだとfuelphpが使用できないため、
セットアップをします。
下記コマンドを実行してください。

#php composer.phar self-update

実行が完了したら、
/var/www/html/src/fuelphp/composer.json
上記ファイルを編集します。
composer.jsonに下記項目を追加してください。

”monolog/monolog”: “1.5.*”,
“fuelphp/upload”: “2.0.*”,
“michelf/php-markdown”: “1.4.*”

追加する個所は

”require”: {
“php”: “>=5.3.3”,
——ここに追加してください——
}

追加が完了したら、composer.jsonを保存し、
次に/var/www/html/src/fuelphp/fuel/core/config/config.phpファイルを編集します。

‘default_timezone’ => null –before–
‘default_timezone’ => ‘Asia/Tokyo’ –after–

上記のように’Asia/Tokyo’を設定してください。

この2つのファイルの設定が終了したら、
下記コマンドを/var/www/html/src/fuelphpで実行してください。

#php composer.phar update

これでセットアップ完了です。

適当なウェブブラウザからアクセスしてみましょう。
アクセスURLは私の環境ですと下記になります。
http://192.168.33.10/src/fuelphp/public/

上の画像が表示されていたら完了です。

今回はFuelPHPのWelcomeページの表示までしました。
次回は簡単なコードを書いて実行しようと思います。

ではこのへんで(∩´∀`)∩


ECサイト構築はこちら


ホームページ製作はこちら

formats

今日からできるアカウントロックポリシー(Windows OS)

はじめまして!

今年4月から入社した陽気なシステム屋新入り、
エンジニア見習いのたかしゃんです!
現在は毎日元気に研修に励んでいますっ

ところで!
いきなりですが、インターネット社会に生きる皆さん、
「何かのサービスやシステムにログインする時にパスワードを忘れてしまい、
当てずっぽうに何度か入力してみたらロックがかかって利用できなくなってしまった」
というような経験はありませんか?

実はそれ、Windows OSにおいては「アカウントロックポリシー」という
セキュリティ機能の1つなんです。

【アカウントロックポリシーとは】

パスワードを間違えてログオンに失敗し、
その失敗回数があらかじめ指定された上限回数を超えると、
一時的にそのユーザーアカウントが使用できなくなるという仕組みのこと。

Windowsでは、
【コントロールパネル】→【システムとセキュリティ】→【管理ツール】→【ローカルセキュリティポリシー】
→【セキュリティの設定】→【アカウントポリシー】→【アカウントロックアウトのポリシー】
の配下から設定することができます。

このような仕組みは何のためにあるのでしょうか??

それは・・・

パスワードクラッキング

への対策のためです!

PCやネットワークを通じて行われるサイバー攻撃手法の1つに、
「パスワードクラッキング(パスワード解析攻撃)」があります。

アカウントロックポリシーを設定することにより、
パスワードクラッキングの代表的な手法である、
・辞書攻撃
・ブルートフォース攻撃(総当り攻撃)
を防ぐことができるんです!

【辞書攻撃とは】

パスワードによく使われる文字列や単語などを辞書ファイルに登録しておき、
それらを順に試していくことによるパスワードクラッキング。

【ブルートフォース攻撃(総当り攻撃)】

あらゆる文字列の組み合わせをPCなどを用いて解析し、
それらを順に試していくことによるパスワードクラッキング。

特にブルートフォース攻撃(総当り攻撃)をされてしまうと、
どれだけ複雑で長~~いパスワードを設定していたとしても、
悪意を持った攻撃者に狙われた時、
時間をかけさえすればパスワードはいずれ解析されてしまいます・・・。
このような攻撃への対策手段として、「アカウントロックポリシー」があるわけですねっ

1つ注意しなくてはならないことは、
このアカウントロックポリシーはデフォルトでは設定されていないということです。
つまり自分で設定を行わなければ、何度ログインに失敗してもユーザーアカウントはロックされません!

上限回数を設定するには、【アカウントロックアウトのポリシー】配下の
【アカウントのロックアウトのしきい値】から設定しましょう。
ただし上限を「2回」などに設定してしまうと、
ユーザーの入力ミスによってアカウントがロックされてしまう場合があるので、
情報の重要度によって加減して設定してくださいね。

【アカウントロックアウトのポリシー】配下ではこの他に、
パスワードの入力ミス回数をリセットするまでの時間や、
ロックアウトされてから一時的に使用不可になる期間の設定を行うことができます。

知らなかった!という方は、今日からアカウントロックポリシーを設定して、
パスワードクラッキングの脅威からあなたのPCを守ってあげましょう!

弊社開発実績はこちら

formats

URLエンコードについて

こんにちは。陽気なシステム屋のがおまるです。

だんだん暑くなってきましたね。
このまま一気に夏突入なのでしょうか!?
外出されている方はこまめに水分補給してくださいね!

さて、本題ですが、URLエンコードはご存知でしょうか?
文字列を「http://www.apple.com/」から
「http%3A%2F%2Fwww.apple.com%2F」のように変換することです。

なぜこのような事をしなくてはいけないかというと、
URLで使える文字が決まっているからなのです。

例:検索キーワードに「&」が入力された時
本当に「&」が入ったキーワードを検索したいのか、URLパラメータの「&」なのか
区別がつかなくなってしまう為。

RFC3896というURLエンコーディングに関する決まりがあります。
その中には、URLにそのまま使って良いのは下記のように定義されています。

・アルファベット大文字小文字
・数字
・「-._~」の記号

変換しなくてはいけないのは
・「:/?#[]@!$&'()*+,;=」の記号

 

■iOSでのURLエンコード

ただ単純にUTF-8変換してしまうと「&」記号が変換されずに、
URLに渡すパラメータが意図しない動きになります。

以下が対策。

NSString* keyword = @"アイエンター&ドラゴンズ";

CFStringRef originalString = (__bridge CFStringRef)keyword;

CFStringRef encodedString = CFURLCreateStringByAddingPercentEscapes(
                                       kCFAllocatorDefault,
                                       originalString,		// ←エンコード前の文字列
                                       NULL,
                                       CFSTR(":/?#[]@!$&'()*+,;="),
                                       kCFStringEncodingUTF8);
NSLog(@"encodedString=%@", (NSString*)encodedString);

変換後
%E3%82%A2%E3%82%A4%E3%82%A8%E3%83%B3%E3%82%BF%E3%83%BC%26%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%82%BA

 

■URLデコード

さきほど変換したものを元にもどします。

CFStringRef decodedString = CFURLCreateStringByReplacingPercentEscapesUsingEncoding(
                                                       kCFAllocatorDefault,
                                                       encodedString,
                                                       CFSTR(""),
                                                       kCFStringEncodingUTF8);
NSLog(@"decodedString=%@", (NSString*)decodedString);

変換後
アイエンター&ドラゴンズ

 

■まとめ

iOSでのURLエンコードですが、iOSのバージョンによって動きがまた変わる可能性もあります。
また上記の例ではUTF-8変換していますが、サーバーの文字コードが特殊な場合は、
サーバーに合わせた文字コードに変換する必要があります。

 

弊社開発実績はこちら

formats

Cordovaでハイブリッドアプリ開発

こんにちは!
陽気なシステム屋最年少のりょーたです!

ここ最近は時間の進み方がとても早く、楽しんで毎日を過ごしております。
このままどんどん歳を重ねていくことが楽しみであったりしていますw
私自身は今が知識を詰め込む時期だと思ってるので、本気で頑張らないとな〜と意気込んでおります。

さて、本題のCordovaの利点や一連の流れを説明したいと思います!

まずはじめに…

■Cordovaって?

Cordovaとは、HTML5,CSS3,JavaScriptのワンソースで、
iOS,Android,Windows Phone 等、マルチプラットフォームに対応したハイブリッドアプリを作成できる便利なフレームワークです。
ハイブリッドアプリは簡単に言うと、ネイティブアプリとWebアプリのいいとこ取りができるものです。
Cordovaのプラグインを入れることによって、端末のGPSなどにもアクセスすることができます。
ワンソースで開発を行えるので保守性も高く、低コストで開発ができるのです!

■Cordovaのいいところ

やはりCordovaのメリットといえばワンソースで各プラットホームに対応し、
今まで、アプリ作りたいけどJavaしかわからないのでiOSが出せない・・・
Webアプリやホームページ作成の技術しかない・・・
等の方にも、手軽にとりつき易いものだと思います。
また、HTML等の技術をアプリに生かすことができるのも嬉しい点です。
それと、前述しましたが低コストで開発を進めることができるのもハイブリッドアプリならでは!だと思います。

■Cordovaは悪いところがない?

先ほどのようにメリットばかり取り上げると、Cordova最強!のように思われるかもしれませんが、そうとも限らないのが難しいところです。
やはりハイブリッドアプリとは言っても元はWebアプリ。
パフォーマンスはネイティブアプリに劣ります。
ゲーム等の高パフォーマンスが要求されるものには不向きだと思います。
また、各プラットフォームに依存する部分もあり、すべてを吸収できるわけではないので注意が必要です。
あと最後に、個人的な意見ではあるのですが、開発環境の構築が少し難しいかなと感じました。

■Cordovaを使うべきアプリ

Cordovaを使うべきところは、業務系アプリや情報閲覧アプリ等、
そこまでパフォーマンスを必要としないものが向いていると思います。
また、はじめに述べたようにとりあえず何かアプリをリリースしてみたい!などのニーズにも応えることができるものだと思いました!

■まとめ

手軽にアプリをリリースでき、誰でも取り組みやすいものだと思いますので、
ぜひこの機会にやってみてはいかがでしょうか!

弊社開発実績はこちら