タグ

ブックマーク / blog.asial.co.jp (19)

  • Visual Studio Code ではじめるシーケンス図

    テキストでUMLやシーケンス図、クラス図などを作成できる言語です。 ダイアグラムをテキストで記述できるため、Gitで管理することもできます。 Visual Studio Codeでは、次のようにPlantUMLプレビューでダイアグラムを確認しながら作成できます。 まず、Visual Studio Codeが端末にない人はインストールをしてください。 Visual Studio Code – Code Editing. Redefined また、Javaもインストールが必要となります。 無料Javaソフトウェアをダウンロード インストールが完了したら、Visual Studio Codeで拡張機能としてPlant UMLを追加します。 Marketplaceから「plantuml」と検索してインストールします。 下のリンクからでもインストールできます。 marketplace.visuals

    Visual Studio Code ではじめるシーケンス図
  • 外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法

    外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 こんにちは、鴨田です。 タイトルが長くなってしまってすみません。 皆さんの中で、自分のサイトコンテンツの中で、 iframeを使って外部サイト(自分で更新できない)を表示したいときに、 iframe内のコンテンツを拡大縮小出来なくて困ったことがあったり、 サイトコンテンツをレスポンシブレイアウトではなく、 固定幅のまま、あらゆるブラウザで、 ウィンドウサイズに合わせてピッタリに拡大縮小したい、 と思ったことがある人はいないでしょうか? 前置きが大変長くなりましたが、 そんなことがあったけど出来なくて諦めたとか、 これからそんなことをしないといけないという方がいたら、 是非とも参考にしてください。 iframe内コンテンツの拡大縮小 例えば、このアシアルブログを横幅600px内で

    外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
  • MonacaアプリをECMAScript6で書いてみよう

    npm install --save-dev gulp gulp-babel \ babel-preset-es2015 gulp-sourcemaps \ gulp-concat インストールしているライブラリを解説します。 gulp : Node.js用のタスクランナーです gulp-babel : BabelのGulp用プラグインです babel-preset-es2015 : Babelを使うことを指定します gulp-sourcemaps : ECMAScript6のソースマップを生成しています gulp-concat : 変換されたJavaScriptファイルを連結しています Gulpファイルを記述する Babelを使うための設定を行います。今回はGulpの設定もECMAScript6で書きたいと思います。そこでまず package.json に下記の設定を追加します。 imp

    MonacaアプリをECMAScript6で書いてみよう
  • kvmでwindows7を入れてみました

    kvmでwindows7を入れてみました 仮想化といえば、VMWareやXenが有名ですが、 今回は割と新しいkvmを使用したいと思います。 kvmと言っても切替器ではなく、KernelbasedVirtualMachineのkvmです。 kvmとは http://ja.wikipedia.org/wiki/Kernel-based_Virtual_Machine 要は、軽量でシンプルな仮想化システムです。 kvm自身では何もできないので、フロントエンドとしてqemuを使用します。 ぐだぐだ書いてもおもしろくないので、百聞は一見にしかず。ぜひ試してみてください。 0・前提条件 ・カーネルは2.6.20以降が必要 ・AMD-V、IntelVTなどの仮想化機構が必要 ・~/vm/ にvmのディスクイメージを入れます ・~/win7.iso がwindows7のDVDイメージです 1・kvmのイ

    kvmでwindows7を入れてみました
  • Onsen UI を使用して、HTML5ハイブリッドアプリを作ってみよう

    今回の記事は、Onsen UI blogで2月に公開した”Developing hybrid mobile applications with Onsen UI“の翻訳記事です。 ハイブリッドアプリ開発のお話を、最近はあちらこちらで耳にするようになりました。プログラム知識が乏しい初心者マークの方、手っ取り早くアプリを開発したい方には、ネイティブアプリ開発のハードルは、高いのが現状です。ネイティブアプリを開発するためには、各プラットフォーム専用のプログラム言語を学び、かつ、開発対象の端末側の機能も学ぶ必要があります。 もちろん、パフォーマンスが良い、端末側のリソースが利用できるなど、ネイティブアプリの開発にも、利点はたくさんあります。 一方、ハイブリッドアプリで使用するテクノロジーは、Web アプリで使用するもの ( HTMLCSSJavaScript ) と同様であり、プラットフォーム

    Onsen UI を使用して、HTML5ハイブリッドアプリを作ってみよう
  • Onsen UIをWebサイトで使ってみよう

    HTML5のUIフレームワークであるOnsen UIはMonacaとの相性を考えて開発されていますが、必ずしもハイブリッドアプリ専用という訳ではありません。Webサイト開発にも利用が可能です。 GoogleがWebサイトのモバイル対応が行われているかどうかを検索順位に反映することを発表していたり、HTML5によってWebもどんどん多機能になっている中、Onsen UIを使うことで高速な描画で使いやすいWebサイトが構築できるはずです。 そこで今回はOnsen UIをWebサイト開発に利用する方法について紹介したいと思います。 準備 Onsen UI自体はJavaScript/スタイルシートで出来ていますのでダウンロードして配置するだけですが、今回はbowerを使って行いたいと思います。Onsen UIはbowerからコマンド一つでインストール可能です。bowerはnode.jsのパッケージ

    Onsen UIをWebサイトで使ってみよう
  • http://blog.asial.co.jp/1241

    http://blog.asial.co.jp/1241
  • http://blog.asial.co.jp/1249

  • 【Winアプリ】ブラウザの自動操作!~Selenium WebDriver~ : アシアルブログ

    はじめに 今回はSelenium WebDriverをご紹介します。ブラウザ操作を自動化する際には最適な仕組みです。Webシステムのend-to-endテストを自動化する際には、ブラウザ操作が必要になることがあります。そんな時にSelenium WebDriverはとても便利です。 Selenium Seleniumとは、ブラウザをプログラムで動かすフレームワークです。この仕組みを使うことで、ユーザーテストなど、様々な処理を自動化できます。現在のところ、Seleniumは以下のWebブラウザを制御できます(公式サイト)。 Internet Explorer Firefox Chrome Opera Android標準Webブラウザ Safari (iPhone標準Webブラウザ) 実際に使用する際には、以下の2つの仕組みのどちらかを使用します。

    【Winアプリ】ブラウザの自動操作!~Selenium WebDriver~ : アシアルブログ
  • CakePHP2で簡単にACLを使う方法

    チョーシドウダ?カラダァ?どうも、高橋です! 今朝、CakePHP2.3.0-beta版がリリースされましたね! 今回のリリースでは、パフォーマンス、セキュリティ、使いやすさを向上させる新機能が追加されました。 また完全に下位互換があるので、2.2系からのマイグレーションは(おそらく)容易でしょう。 というわけで、早速Cake2.3を使ってACLを実現してみたいと思います。 イメージが掴みにくいと思ったのでデモを作成しました。(がんばりました! ログイン:http://s1.asial.co.jp/~yuya/blog/20121029/users/login username: adminuser / password: 0000 ACL管理 :http://s1.asial.co.jp/~yuya/blog/20121029/admin/acl またCakePHPのセットアップについて

    CakePHP2で簡単にACLを使う方法
  • CakePHPで国際化の方法を試してみました

    __関数ですが、第1引数に文字列を渡し、第2引数はデフォルトはfalseでecho出力し、trueを渡すと戻り値として返却になります。 (※basics.phpに関数定義されています。) そして、cakeのコンソールを使って翻訳ファイルを作成します。 $ /path/to/myproject/cake/console/cake i18n Hello yoshiki, Welcome to CakePHP v1.2.0.6311 beta Console --------------------------------------------------------------- What is the full path you would like to extract? Example: /data/myapp [Q]uit [Q] > /path/to/myproject/app #

    CakePHPで国際化の方法を試してみました
  • Monaca + enchant.js でお手軽スマフォゲームアプリ開発

    <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="initial-scale = 1, user-scalable=no"> <meta charset="utf-8"> <title>RPG sample on Monaca</title> <script type="text/javascript" src="enchant.js"></script> <script type="text/javascript" src="ui.enchant.js"></script> <script type="text/javascript" src="game.js"></script> <style type="text/css"> body { margin: 0; } </style> <script type="t

    Monaca + enchant.js でお手軽スマフォゲームアプリ開発
  • Titanium で iPhone開発を始めるときに気をつけておきたいこと7つ

    こんにちは、亀です。 当は今日はアシアルの日常を書く、という名目のブログ当番なんですが、どうせエンジニアの日常なんてコード書いてますよね。 ということで、最近使ってみたTitaniumについて書いてみる事にしました。 さて、最近ちまたでTitanium Mobileがあつい!という話が出ていて、入門記事もいろんなところで上がり始めていますね。 Titaniumをご存じない方のために簡単に説明しておくと、JavaScriptを使ってiPhone/Androidアプリを作ってしまおう、という物です。 果たしてどんなもんか!と、手元で作成中だったアプリをTitaniumを使って再実装してみたのですが、世間で言われるとおり所々で凝った事をしづらいものの、想像していたよりはずっと、リッチ・簡単・高速に作れる印象でした。 早い、安い、うまいなんてぎゅうどn(ry その開発の際に、Objective

    Titanium で iPhone開発を始めるときに気をつけておきたいこと7つ
  • もうアイコン画像はいらない! Webフォントを使って、iOS風タブバーとアイコンを作成する方法

    最近話題になっていたこちらのサイトがとても便利です。 Fontello – http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭文字を取るとか、abc~とかにするとかですかね。 文字列の指定が終わったら、フォントファイルのダウンロードを行います。 サイト右上にある「Download webfont(n)」をクリックしましょう。 「fontello-xxxxxxxx.zip」がダウンロードされます。 解凍して中身を見てみましょう。 fontello -cssフォルダ -icons.css -icons-codes.css -icons-ie7.css

    もうアイコン画像はいらない! Webフォントを使って、iOS風タブバーとアイコンを作成する方法
  • HTML5+CSS3の導入時に役立つ7つの設定

    こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 1.HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam

    HTML5+CSS3の導入時に役立つ7つの設定
  • イラストでわかる!git入門の入門

    こんにちは、アシアルの志田です。 社内でもgitが浸透し、皆バージョン管理といえばgitだよね、という空気になってきました。 ですが、これまでバージョン管理システムを使ったことがない人にオススメしても、 「gitて…まあ…そりゃ…ねえ、いつかやらないといけないけど…」 「ギット?ジット?俺はgiはジと読む派なので、gitは胡散臭いと思う」 「そもそもバージョン管理して何が嬉しいの?なんか難しそうでいやだ」 というような反応ばかりでした。 きっとみんな、gitって難しくて訳のわからんもんだと思っているのでは?と思い、 今回はgit入門の入門、gitってなんだ?というところから、簡単にgitを使う際の流れについてご説明します。 ちょっと不安を覚えるようなイラストがついていますので、頑張って読んでください。 バージョン管理ってなに? プログラムを書いていて、こんなことありませんか?私はあります…

    イラストでわかる!git入門の入門
  • 使えるとちょっと便利なSSHのTIPS

    こんにちは、牧野です。久々の、9か月以上ぶりのブログです。。 仕事では、ここ1年近くずっっとインフラ関係のことをやっていました。 今日は、SSHに関するTIPSを紹介します。 1. 特定のサーバーにSSHログインする時に、特定の設定を使用する ホームディレクトリ/.ssh/configファイルに設定を書いておくと、特定のサーバーにログインする時に、自動的に特定の設定を使うようにできます。 SSHのオプションをサーバーによって分けたい時に入力が楽になります。 以下は、xxx.yyy.zzz.aaaでアクセスする時に使う秘密鍵をid_rsa_testに設定しています。 .ssh/config Host xxx.yyy.zzz.aaa IdentityFile /home/asial/.ssh/id_rsa_test 2. ホストキーをチェックしないようにする LinuxからサーバーにSSH接続

    使えるとちょっと便利なSSHのTIPS
  • Twitter BootstrapでさくさくWeb開発 : アシアルブログ

    <div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい!!コードを見せるならこれがよさそうですね! さて、かっこいいGoogle Prettifyですが、こ

    Twitter BootstrapでさくさくWeb開発 : アシアルブログ
  • jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる

    久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下

    jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
  • 1