よく使うboaderの設定一覧
こんにちは、スウェルデザインのWです。
備忘録と言うか、よく使うboaderの設定をいちいち調べに行って
一度に欲しい内容を得ることができないなぁと感じていたので自分用にメモとして残します。
CSSでよく使われるスタイルとしてboaderは比較的上位ですよね
何気ない部分に薄く細くグレーのboaderを入れるだけで凝っているように感じられたり
tableなんかにもよく使われます。table×boaderの組み合わせはややこしくなりがちなので
どうにか簡単にならないものですかね。
See the Pen JYqwxE by swelldesign (@w-swelldesign) on CodePen.
また、他のCSSでの記述どおり、boaderの後【boader-top】等にすることにより上下左右別々に指定することができます。
Playframework2.3.9をAWS環境で快適に運用する(2)
前回に引き続き、Playframework2.3.9を利用して開発したアプリをAWS環境で快適に運用する方法を記載いしていきたいと思います。
- VPC+RDSを利用したElasticBeanstalkを稼働する
- 開発したアプリをElasticBeanstalkで動くようにdistする
- 開発したアプリをElasticBeanstalkにデプロイする
1.については前回をお話ししたので今回は2, 3についてお話していきたいと思います。
まず、Playframework2.3.9で開発したアプリを稼働できる状態に出力する方法です。
公式ページにも記載されております通りプロジェクト直下で以下を実行
activator dist
すると以下のようなファイルが出力される。
target\universal\[Project名]-1.0-SNAPSHOT.zip
このままではElastic Beanstalk上では動かないので下記に従い、zipファイルを生成しなおす。
簡単に説明するとzipファイルを解凍して「Procfile」を下記のような内容で準備し、直下に配置し再度zipで固める
web: sh bin/[Project名]
この時、オプションとして以下を付け加えてあげることでElasticBeanstalk上でスマートに動くようになる。
-Dhttp.port
ElasticBeanstalkのウェブサーバ(java)で環境を作成した場合、HTTPサーバ(nginx)から接続されるポート番号はデフォルト5000のため起動オプションとして設定する。当然nginxの設定をPlayframeworkのデファルト9000に合わせてやることでも対応は可能
-Dconfig.file
データベースの接続先などテスト環境と本番環境で変更したいものはElasticBeanstalkの環境変数として定義して読み込ませたい場合、通常の開発で利用している定義ファイルを拡張して環境変数を利用するよう起動オプションとして設定する。
-Duser.timezone
ElasticBeanstalkで起動されるEC2は日本時間ではないため、Javaの標準時間を利用しようとすると時間がずれてしまい都合が悪い場合があるのでタイムゾーンを指定するための起動オプションを設定する。
最終的には下記のような起動シェルとなる
web: sh [Project名] -Dhttp.port=5000 -Dconfig.file=/var/app/current/bin/ebenv.conf -Duser.timezone=Asia/Tokyo
定義ファイルの拡張についてもう少し触れておくと、通常playframeworkの開発で利用している定義ファイル「application.conf」を拡張する形で下記のようなファイルを「bin/ebenv.conf」として作成する（名前やパスは任意）
include "application.conf"
db.default.url=${RDS_URL}
db.default.user=${RDS_USER}
db.default.password=${RDS_PASSWORD}
でもって${RDS_URL}などはElasticBeanstalkの環境変数として下記の要領で設定すると、同じアーカイブを利用して別の環境で稼働することが可能となる。
後は環境を作成して「アップロードとデプロイ」を行えばOK！
おまけ、環境を作成するとSSH接続がフルオープンになってしまい毎回セキュリティグループを更新する必要があるので、以下のようにしておくとよい。
前述のzipにおいて「.ebextensions」フォルダを作成し起動時に以下のようなリソースプロパティを定義しておく。下の例ではプライベートアドレスからのみ22番ポートが接続可能となる。
※よりセキュアにするためには環境作成時、キーペアを指定しないでSSH接続を閉じることもできる
option_settings:
- namespace: aws:autoscaling:launchconfiguration
option_name: SSHSourceRestriction
value: tcp, 22, 22, 10.0.0.0/16
他にも色々出来るようだが、今回はここまでとします。
リソースプロパティは以下を参照（参考まで）
j.k
JavaScriptを使わないaccordionと横並びの可能性
こんにちは、スウェルデザインのWです。
アニメーションで縦に表示されるアコーディオンを
CSSのみで可能にしたソースを紹介します。
下記サイトを参考に作成いたしました。
しかし今回これを横並びにして使う際に、問題が発生したのです。
実際に触ってみていただければわかると思いますが、下記の通り
メニューを開くと、横並びになっている要素がつられて下に下がってしまします。
See the Pen KdRbMJ by swelldesign (@w-swelldesign) on CodePen.
ｄivを縦に分けたり。positionを使ったり色々と試しましたがどれもうまくいきませんでした。
試行錯誤した結果
下記方法でうまく行ったので備忘録として記録します。
See the Pen NGMeNL by swelldesign (@w-swelldesign) on CodePen.
原因は以前紹介したdisplay: inline-block;でした。
横並びにするさい、他の要素に影響されないようにfloat: left;で浮かせてやる必要があったみたいです。
皆普通にfloat: left;を使っているからなのか、検索しても出てきませんでした。
自己解決に至るまで随分かかりましたので他の人の役に立てればと思います。
Playframework2.3.9をAWS環境で快適に運用する(1)
Playframework2.3.9を利用して開発したアプリをAWS環境で快適に運用するための方法を記載します。ここでは以下を快適とします。
- リリースの負荷が低い
- サーバ監視の負荷が低い
- データ消失のリスクが低く管理コストも低い
- サーバのダウンタイムが少なく管理コストも低い
既にAWSを利用していることなどトータルで考えるとAWS Elastic Beanstalkに答えがありそうなので調べて実際に取り組みました。
AWS Elastic Beanstalk （ アプリケーション管理 - サービスとしてのプラットフォーム）| アマゾン ウェブ サービス（AWS 日本語）
ちなみに偶然にも以下が発表されたのも追い風になりました。
Amazon Web Services ブログ: Elastic Beanstalk アップデート - JavaとGoのサポート
大まかな流れとしては以下の通りです。
- VPC+RDSを利用したElasticBeanstalkを稼働する
- 開発したアプリをElasticBeanstalkで動くようにdistする
- 開発したアプリをElasticBeanstalkにデプロイする
それでは具体的な方法を見ていきましょう。
１．VPC+RDSを利用したElasticBeanstalkを稼働する
何回でも同じ環境が作れるようにするため、環境作成をウェブサービスから行うのではなく、機械的にやる方法で検討しておりました。
最初に辿り着いた方法はAWS CLI、EB CLIを利用しコマンドベースで操作する方法でした、VPCの構築やElasticBeanstalkの作成はある程度出来たのですがそれぞれで生成したIDを使いまわすので面倒くさいですし手動感満載なのでお勧めしません。
※ElasticBeanstalkの環境作成は失敗します（原因が分からないまま頓挫）
（AWS CLI、EB CLI インストール）
https://www.python.org/downloads/ Python 3.4 をインストールし以下 set path=%path%;C:\Python34;C:\Python34\Scripts pip install aws pip install awsebcli aws configure AWS Access Key ID [None]: AWS Secret Access Key [None]: Default region name [None]: us-west-2 Default output format [None]: json
（AWS CLIを利用したVPC環境構築）
# VPC作成 aws ec2 create-vpc --cidr-block 10.0.0.0/16 # VPC名前付け aws ec2 create-tags --resources [VPC ID] --tags Key=Name,Value="[VPC Name]" # RouteTable(main)の確認 aws ec2 describe-route-tables --filters "Name=vpc-id,Values=[VPC ID]" # RouteTable(main)名前付け aws ec2 create-tags --resources [RouteTable ID] --tags Key=Name,Value="[RouteTable Name]" # NetworkACLの確認 aws ec2 describe-network-acls --filters "Name=vpc-id,Values=[VPC ID]" # NetworkACL名前付け aws ec2 create-tags --resources [NetworkACL ID] --tags Key=Name,Value="[NetworkACL Name]" # SecurityGroupsの確認 aws ec2 describe-security-groups --filters "Name=vpc-id,Values=[VPC ID]" # SecurityGroups名前付け aws ec2 create-tags --resources [SecurityGroups ID] --tags Key=Name,Value="[SecurityGroups Name]" # VPCのDNSホスト名を有効化 aws ec2 modify-vpc-attribute --vpc-id [VPC ID] --enable-dns-hostnames # Subnet作成 aws ec2 create-subnet --vpc-id [VPC ID] --cidr-block 10.0.0.0/24 (--availability-zone [AZ]) # Subnet名前付け aws ec2 create-tags --resources [Subnet ID] --tags Key=Name,Value="[Subnet Name]" # IGW(InternetGateway)作成 aws ec2 create-internet-gateway # IGW(InternetGateway)名前付け aws ec2 create-tags --resources [IGW ID] --tags Key=Name,Value="[IGW Name]" # IGW(InternetGateway)をVPCにアタッチする aws ec2 attach-internet-gateway --internet-gateway-id [IGW ID] --vpc-id [VPC ID] # IGW(InternetGateway)の確認 aws ec2 describe-internet-gateways --internet-gateway-id [IGW ID] # RouteTable(public)の作成 aws ec2 create-route-table --vpc-id [VPC ID] # RouteTable(public)名前付け aws ec2 create-tags --resources [RouteTable ID] --tags Key=Name,Value="[RouteTable Name]" # RouteTable(public)とIGW(InternetGateway)の関連付け aws ec2 create-route --route-table-id [RouteTable ID] --destination-cidr-block 0.0.0.0/0 --gateway-id [IGW ID] # SubnetをRouteTable(public)に切り替え aws ec2 associate-route-table --route-table-id [RouteTable ID] --subnet-id [Subnet ID]
（EB CLIを利用したElasticBeanstalk環境構築）
# EB環境設定（アプリケーション作成） eb init [EB NAME] --region us-west-2 --platform java7 --keyname SwdOregon # EB環境作成 eb create [EB NAME] --sample --single --tier webserver --cname [EB CNAME] --instance_type t2.micro --database.engine postgres --database.instance db.t2.micro --database.username [RDS USER] --database.password [RDS_PASSWORD] --vpc.ec2subnets [Subnet ID],[Subnet ID] --vpc.elbsubnets [Subnet ID],[Subnet ID] --vpc.dbsubnets [Subnet ID],[Subnet ID] --vpc.id [VPC ID] --vpc.securitygroups [SecurityGroups ID] --vpc.publicip --vpc.elbpublic # EB環境変数の設定 eb setenv RDS_USER=[RDS_USER] RDS_PASSWORD=[RDS_PASSWORD] RDS_URL=[RDS_URL] JDBC_LOGLEVEL=[JDBC_LOGLEVEL]
（削除関連）
# EB環境削除 eb terminate [EB NAME] # SecurityGroups削除 aws ec2 delete-security-group --group-id [SecurityGroups ID] # Subnet削除 aws ec2 delete-subnet --subnet-id [Subnet ID] # RouteTable(public)削除 aws ec2 delete-route-table --route-table-id [RouteTable ID] # IGW(InternetGateway)をVPCからデタッチする aws ec2 detach-internet-gateway --internet-gateway-id [IGW ID] --vpc-id [VPC ID] # IGW(InternetGateway)削除 aws ec2 delete-internet-gateway --internet-gateway-id [IGW ID] # VPC削除 aws ec2 delete-vpc --vpc-id [VPC ID]
次にやった方法はCloudFormationを使っての環境の自動生成です。サンプルテンプレートをもとに自分のやりたい事に近づけましたが、ここでもAWS ElasticBeanstalkの環境作成だけは、どうも上手くいきませんでした。。1回試行するのに15分くらいかかるので時間がかかりすぎるためAWS ElasticBeanstalkの環境作成だけは手動で行うことにしました。（CloudFormationのテンプレートは長いので割愛）
AWS CloudFormation （ 設定管理 & クラウドのオーケストレーション）| アマゾン ウェブ サービス（AWS 日本語）
最終的には以下のような環境が出来上がりました。
CloudFormationのView in Designerから切り取ったのですが分からづらいので文字で補足すると以下のような感じです。
└Subnet(public0)←InternetGateway
└ EC2(app server) ← Elastic Beansttalk
└ EC2(bastion)
└Subnet(private0)
└Subnet(data0, data1)
└ RDS ← Elastic Beansttalk
※余裕ができたら必要に応じてpublic1, private1を追加しpublicにloadbalancerをおきapp serverはprivateに持ってこようかと考えてます。
次回は
2.開発したアプリをElasticBeanstalkで動くようにdistする
3.開発したアプリをElasticBeanstalkにデプロイする
を書きたいと思います。
j.k
とりあえずbuttonを設置したいけど、ただのbuttonじゃ可愛くないし
こんにちは、スウェルデザインのWです。
とりあえずbuttonを設置したいけど、デフォルトのbuttonじゃ味気ないしカッコ悪いって時ありますよね
ひとまずでいいからそれなりに見せたい時のボタン用CSSをメモします。
弊社は医療系のHPが多いので、少しフォーマルなデザイン
See the Pen gavbRy by swelldesign (@w-swelldesign) on CodePen.
シンプルだけど、ちゃんとグラデーションと角丸が効いているデザイン
See the Pen OyQPZL by swelldesign (@w-swelldesign) on CodePen.
buttonらしい立体的なデザイン
See the Pen Button Links by swelldesign (@w-swelldesign) on CodePen.
とりあえず3つ程使いそうなものを選出しました。
コピペでぱっとbuttonが様変わりします。
