信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

LIST OF ARTICLES

記事一覧

  • テクログ

    スマホのモバイルシミュレーターの使い方

    こんにちわ。パグ(▼・(エ)・▼)です。 暑いです。暑くて溶けそう。溶けそうで、定期的に更新しようと 思っていた技術ブログを溜め込んでいたので放出します。 最近はスマートフォン対応というものがWEBでは多くて、 PC用画面をスマホ用にするやつです。 お客様によっては1px程度の調整を要求される場合もあったり・・・ 画面デザインのテストで、CSSの確認をしたい時に、 FTPでサーバーにあげて・・・テスト端末で開いて・・・ って手順はとても面倒です。そんな時にはシミュレーターを使いましょう。 勿論、シミュレーターなので、実機でみると画面が崩れた! なんて事もあります。 が、しかし、 正しいCSSで組んであれば、 実はシミュレーターでも崩れませんし、実機でも崩れません。 画面崩れを指摘すると、 「シミュレーター側で崩れているのは、実機では大丈夫です!」と 自信ありげに答える子が多いですが、多少の崩れはあるものの、 実は、シミュレーターで崩れないものは、 様々な機種で試しても、崩れない状態の事が多いのです。 また逆もしかりで、シミュレーターで崩れてなかったのに、 実機で見ると崩れるっていうのはCSSが適切に組めていない証拠です。 (ややマージンがずれてるとかは勿論ありますが) ロジック側のコーダーはCSS+HTMLのプロではないので、 CSSが苦手な人が多いので、裏側の複雑なロジックはさくっと組めるのに、 CSS+HTMLに鬼はまりして時間が経過していったりします。 iphoneでは~なのに、Andoridでは~なった・・・ っていうのは、実際シミュレーターで見てみると、 ぐちゃぐちゃ・・・なんて事が多いです。 適切なCSSの組み方をして、あらゆるシミュレーターで確認したものを、 実機で確認すると、シミュレーターと実機、iphoneとAndoroidの見た目に、 大きな差が出ないと思いますよ! 実際デザイナーさんに組んで頂いたCSSは大抵シミュレーターでの 崩れはほとんどありません。 それが、開発課とデザイン課の差か!!!と思うほど。 そんな訳で、私もやや複雑なデザインを組む時は、シミュレーターで しっかり表示される状態にしてから、実機で微調整を行います。 では、シミュレーターの使い方です。 まず、FireFoxの場合、 ツールのアドオンからアドオンの入手で、 Firebugをインストール そうすると、ツール内にFireMobileSimulator というものが入るので、そこから見たい端末にしてクリック。 もうスマートフォンの見た目になります。 次にSafariです。シミュレータでは最も秀逸かもしれません。 大規模なSP開発の際は必ず使用しています。 ブラウザの幅によって、表示がされるので、ブラウザ幅の縮尺で、 縦のデザイン、横のデザインの確認が可能です。 safariのシミュレーターは編集>設定>詳細のタブで、 メニューバーに開発メニューを表示を押します。 そして、開発メニューが表示されますので、ユーザーエージェントから 端末を選択します。 縦横もブラウザ幅で確認できます~。 最後にChromeです。 Chromeはちょっと分かりにくい所にあります。 F12キーを押して開発用のメニューを開いてください。 その後右下にあるねじのマークをクリック overrides>UserAgentを選択します。すると、表示がかわります。 FireFoxのシミュレーターはCSS3に弱いので、ドロップシャドウなんかが うまくでませんが、Safariのシミュレーターだとちゃんと表示されます。 また角丸なんかも、Safariのシミュレーターのが良いようです。 逆にFireFoxではfloatを使った時のイメージがしっかりでるようです。 floatごりごりの画面の微調整は、FireFoxで行っています。 実機で、うまく表示「できてるように見える」要素の組み方をせず、 きちんと要素ごとの位置を決めてあげて、古い機種、新しい機種でも 崩れないものを作りたいときは、是非、 色々なエージェントで試してみて、最終的なテストは実機で行って、 開発効率をあげてくださいね★。 では、パグでしたぁ~ヽ(・∀・)ノばいばいぷぅ☆ミ
  • テクログ

    listにfloatかけたら崩れたとき

    こんにちは。デザイン課のいまべぇです。webのデザインをするようになってまだまだ日が浅い私ですが、デザインもさる事ながらやはり苦戦するのはコーディングです。そこで、最近の案件で私がコーディングの際に困ったことについて書いてみようと思います。 このサイトのジャンル項目部分ですが、<li>タグにcssで{float: left;}をかけています。 ところが、FirefoxやIE8.9.10ではちゃんと表示されるのですが、IE7で崩れてしまいます。  そこで、{white-space:nowrap}をCSSに書き込んであげると、IE7でも崩れません。 ソースはこんな感じです。 【html】 和食 洋食 中華 イタリアン・フレンチ 焼肉・韓国料理 ダイニングバー 各国料理 居酒屋 そば・うどん スイーツ カフェ ラーメン パン 【CSS】 .section ul li { float: left; margin: 0px 10px 7px 0px; white-space:nowrap /*IE7対策 */ } コーディングを始めたばかりの頃はこういう事でよくつまづいていた気がします。まだまだ勉強中ですが、これからも精進していこうと思います。  
  • テクログ

    fuelphpでランダムなパスワードを作成(少し強力に)

    「fuelphp」は「few得るphp」だと誰が言ったんだ!? ・・・よく考えたら誰も言ってませんでした。 お世話になっております、ミネックです。 今回はfuelphpで、パスワード用のランダムな文字列を作成してみようと思います。 実はfuelphpには、すでにその機能があります。 $pass = Str::random('alnum', 16); 基本的には↑でOK。 ランダムな16桁の英数(大文字小文字区別)が作られます。 お気付きの通り、'alnum'となっているところを変えることで、色んなタイプのランダム文字列を生成できます。 そしてさらにお気付きの通り、数字の部分(↑では16のとこ)に任意の数字を入れることで、桁数をいじれます。 最高ですね! でも少しだけ不満が。 16桁に設定してる時はそうでもないんですが、10桁ぐらいだと、 生成される文字列に数字が含まれないことが結構あります。 はい、今回いじってみたのはこの部分です。 コード あんまり引っ張っても、意味が無いので以下そのコード。 //パスワードの文字数 $pass_len = 10; //パスワードに含まれる数字の数 $num_len = mt_rand(1,4); //パスワードに含まれるアルファベットの数 $al_len = $pass_len - $num_len; $num = Str::random('numeric', $num_len); $al  = Str::random('alpha', $al_len); //文字列をシャッフル $res = str_shuffle($num.$al); これで、数字が必ず入ってきます☆ パスワードに含まれる数字の数はお好みで。
  • テクログ

    xamppを複数入れる

    更新が遅くなりました、申し訳ありません。準備がありませんので、先日自PCに行ったxamppを複数入れる手順を書こうと思います。   ただしこの方法ですぐに実践できる前提として、・windows・インストーラ版のxamppは1つまで・新しく使うxamppはzip版・ドライブ直下にxamppフォルダを置く・HDDドライブ1つにつき、1xampp   ですので、用途は限定的かもしれません。「今まで使っていたxamppは残しつつ、最新版のPHPをローカルで使いたい」ような場合には是非。   ---------------------------------------------------例えば私の場合は、Dドライブにインストーラ版のxampp(1つ目)Cドライブにzip版のxampp(2つ目)← これを新たにインストールしたいでした。   『appach』基本的に、インストールしたxamppコントロールパネルからstartし直せば動きます。動かないときは・タスクマネージャからappachのプロセスをすべてきる・右下のタスクから、xamppアイコンをすべて消す   をしてからコントロールパネルを開きなおしてstart。起動に時間が掛かっても、ボタン連打せず根気よく待ちます。   『mysql』こちらには少し設定を加えます。おそらく、Cドライブのxamppからコントロールパネルを開くとエラーが出ているばず。   MySQL Service detected with wrong pathChange XAMPP MySQL settings orUninstall/disable the other service manually firstFound Path: D:\xampp\mysql\bin\mysqld.exe --defaults-file=D:\xampp\mysql\bin\my.cnf mysqlExpected Path: c:\xampp\mysql\bin\mysqld.exe --defaults-file=c:\xampp\mysql\bin\my.ini mysql   Cドライブ(新)のmysqlを読みに行くはずが、Dドライブ(旧)のmysqlを読みに行っているエラーです。もともとwindowsの「サービス」としてDドライブ(旧)のmysqlを登録してしまっているためだと思われます。   そこで、サービスに登録されているmysqlの情報を少し変更します。   「管理ツール」の「サービス」に「mysql」があることを確認。ダブルクリックでプロパティを開くと「実行ファイルパス」がDドライブ(旧)のxamppを指しているはず。これをCドライブに修正します。   レジストリエディタを開いて修正します。   win+R(ファイル名を指定して実行) → 「regedit」 と入力で、レジストリエディタが開きます。   「サービス」の場所はHKEY_LOCAL_MACHINE\System\CurrentControlSet\Servicesなので、左のツリーから選択する   「mysql」の表示を見つけてクリック、右側の「ImagePath」をダブルクリック   「値のデータ」をエラーメッセージの「Expected Path:」のものに書き換えるここを編集することで、mysqlサービスの場所を指定できます。   xamppコントロールパネルを開きなおして、エラーが出てなければ完了です。 ----------------------------------------   こんな手間を掛けるなら1.「D:_xampp」にリネーム(退避)2.zip版xamppを置くしたほうが早いことに気づいたのはずいぶん後でした。 ありがとうございました。
  • テクログ

    Laravel4 で特定のIPアドレスからのアクセスを許可するメンテナンスモードパッケージを作りました。

    Laravel4 には標準でメンテナンスモードが用意されています。 $ php artisan down # メンテナンスモードに入ります $ php artisan up # メンテナンスモードを解除します このメンテナンスモードは、storage/meta/down という空ファイルの存在のみが基準なので、メンテナンスモード中は社内からのアクセスも出来なくなります。メンテナンスモードでソースの更新やDBのマイグレーションを行い、社内からアクセスして確認後、メンテナンスモードを解除。というフローは、現バージョン(4.0.5)では無理です。 今回、Laravel4 のパッケージ作成方法の調査がてら、特定のIPアドレスからのアクセスを許すメンテナンスモードパッケージを作成しました。 https://github.com/core-tech/laravel-packages-exdown https://packagist.org/packages/core-tech/exdown 以下、パッケージの作成方法と、作成したパッケージのインストール方法です。 パッケージの作成方法 作成したパッケージを使いたいだけであれば、読み飛ばして頂いて構いません。 以下、Laravel4 のプロジェクトルートに居ることとします。 composer コマンドにパスが通っていなければ、通します。実行権限も与えておきます。以下はMacでの例です。OS毎の差異等は調整して下さい。 $ sudo cp composer.phar /usr/bin/composer $ sudo chmod +x /usr/bin/composer app/config/workbench.php の name と email を変更しておきます。name は必須です。この値はパッケージ用に自動生成される composer.json で使われます。 artisan workbench でパッケージの雛形を生成します。 $ php artisan workbench core-tech/exdown --resources Package workbench created! resources オプションをつけることで、以下も併せて作成されます。 public src/config src/lang src/migrations src/views app/config/app.php の providers に CoreTechExdownExdownServiceProvider を追加します。 ブラウザから適当にアクセスして何のエラーも出なければOKです。 ExdownServiceProvider に対する not found のエラーが出たならどこかで失敗しています。 ExdownServiceProvider に到達しているか確認してみます。 /**  * Register the service provider.  *  * @return void  */ public function register() { dd('test'); } ブラウザからアクセスすると、到達していました。 作成したパッケージのインストール方法 composer.json の require に 以下を追加して update します。 "core-tech/exdown": "dev-master" app/config/app.php の providers に CoreTechExdownExdownServiceProvider を追加します。メンテナンスモード判定パッケージなので、先頭に追加するのが良いと思います。 以下のコマンドで config ファイルを app 下にコピーします。 $ php artisan config:publish core-tech/exdown config ファイルの "allowed_ips" は許可するIPアドレス一覧です。 config ファイルの "view" は使用する view ファイル名です。 パッケージの config を環境毎に設定したい場合は、ヤマジュンの記事 を参考にして下さい。 以下でメンテナンスモードになります。 $ php artisan exdown 以下でメンテナンスモードが解除されます。 $ php artisan exup
  • テクログ

    Laravel4のパッケージ調査

    前回は、FuelPHP の Sentry パッケージを作りましたが、 今回は、Laravel4 のパッケージについて調査してみました。 なお、以下の調査内容については、不備があるかもしれませんので 参考程度にして頂ければと思います。 パッケージの環境毎の設定ファイル 通常、環境毎の設定ファイルは app/config/【環境】に配置しますが、 パッケージの場合は、下記のコマンドにより app/config/packages/【vendor名】/【package名】 に配置されます。 php artisan config:publish 【vendor名】/【package名】 環境毎にパッケージの設定ファイルを配置する場合は、 app/config/packages/【vendor名】/【package名】 /【環境】に配置します。 プロファイラパッケージ 先月末にリリースされた Laravel4 ですが、 Laravel3 にありましたプロファイラがインストール時にありませんでした。 Packagist にいくつか登録されている Laravel4 でも使用できるプロファイラについて記載します。 ■1.loic-sharma/profiler Laravel3 で使用していたプロファイルの Laravel4 版になります。そのためか、 パッケージの命名規則で vendor名の箇所が、「Profiler」になっています。 デザインは綺麗ですが、Bladeテンプレートを使用していると影響がありました。 ■2.kr4Y/laravel-profiler シンプルで使いやすく、Bladeテンプレートの影響はありませんでした。 ■3.onigoetz/profiler Session や Cookie 情報も表示されるプロファイラです。 設定変更は、vendor 以下の設定ファイルを変更しなければなりません。 (ただし、環境が「production」であれば無効になります) (設定ファイル名が、config.php ではなく profiler.php でした) また、Bladeテンプレートを使用していると影響がありました。