講演会のブースに出ました。＋苦労話
こんにちは、スウェルデザインのWです。
今週の体育の日、社長が高松の支店へ出張されました。
講演会で弊社の新サービスの紹介ブースを出店するためです。
その準備の為にかなり大変な思いをしたので投稿します。
話自体まあまあ突然聞かされ、ブース建設の為の話し合いをしたのですが
いかんせん他の仕事もあり、なかなか手を付ける時間も無く
週末ギリギリに作業を開始しました。
ブース出展には見栄え上テーブルクロスが必要不可欠な事を話し
調べると会社のロゴまで綺麗に刻印しているクロスの画像がヒット
私も社長も注文発注している時間がないので冷静に焦り始めます。
結局布は私が容易して、ロゴに関してはカッティングシートを注文する事になりました。
初めはカットも私がする予定だったのですが、Swelldesignの文字数的に無理だったので、クワックワークさんでお急ぎ便を使いました。
綺麗に仕上り、対応も丁寧だったのでおすすめします。
注文後足早に日暮里のTOMATOへ
繊維街として有名な通りにある、おそらく日本で一番種類豊富な生地が安く手に入る場所です。
ｍ/￥380の少ししっかりした生地を買い、その日は直帰しました。
会社にミシンとアイロンと裁縫道具を持って行くのは難儀だったので自宅での作業です。
家について色々とご飯など済ませ、21時くらいから作業開始・・
正直予想していたより60cm × 180cm × 70cmという大きさの布に手こずります。
全ての端を垂直にアイロンがけするのですが、それだけで1時間以上かかりました。
普段裁縫しないというのもありますが・・。
必死の思いで垂直を図り折り縫い
端の処理が終わったのがAM3:10・・・・私の手が遅いんでしょうか・・・
自分でもこんなに時間がかかると思っていませんでした・・。
拾い物のミシンなのでボビンの調子が悪く、何度も縫い直しはしましたが
それでもいくらなんでも6時間かけて布の処理だけっていうのがかなりガッカリですよね・・
中心線から垂直って言うのがアナログだと大変です、もう二度とこんなことしません。発注したほうが良いです。
なにはともあれ、残りは長机に固定する為のマジックテープを三箇所、布の裏に縫い付け作業終了。
ほぼ徹夜の作業でした。
まあマジックテープも相当手こずりましたが、割愛です。
ゴム部分とマジックテープ部分が分厚過ぎて12回も縫い直したりしてました・・。
そして完成品がこちら
素晴らしい！！それなりに見えます（笑
ロゴシールも貼るのが大変でしたが、とても綺麗な仕上がりですよね
クワックワークさんありがとうございました！
Webサイトのfontを好きな書体にカスタマイズする
こんにちはスウェルデザインのｗです。
今日はWebサイト上で閲覧者の所持しているfontにかぎらず
CSSで指定した書体にする方法をメモしていきます。
これはCSS3を使った方法で、fontのデータをサーバーにアップし
画像やスプリクトファイルと同じようにパスで呼び出して使用します。
① まずfontを用意しましょう
オススメのフリーフォントサイト
この時気をつけなければならないのが、商業個人共にfreeになっているfontでもライセンスによってWebでの使用が禁止されてる場合もあります。
② ダウンロードしたotfファイルをサーバーの最上部に保存
fontなどの名前をつけたフォルダに入れましょう。
③ CSSに記述
See the Pen dYWjro by swelldesign (@w-swelldesign) on CodePen.
今回はh1に指定しましたが、あとはfont-familyで指定したいフォント名を記述して完了です。
正しくパスの指定がされていて、otfファイルがアップロードされていれば表示されるはずです。
他にもWebフォントでfontを変える方法もあるので、ページのロード時間などを気にする方はそちらでの検討もおすすめします。
すりガラス風背景
こんにちは、スウェルデザインのWです。
背景画像を流行りのすりガラス風にする紹介です。
一見背景が透明になっているように見えますが、親要素の背景をガウスでぼかし
子要素の背景にすることで、まるですりガラスのような透明感を出しています。
See the Pen NqQoey by swelldesign (@w-swelldesign) on CodePen.
Cordova ＋ OnsenUIを使ったハイブリッドアプリ環境構築（Android編）
今回は以下の観点でハイブリッドアプリを利用したアプリ開発を行うことにしました。
Monaca(https://ja.monaca.io/)というブラウザを利用して開発のできる素敵なクラウドサービスがありましたが、やはり既存のSVNによる履歴の管理やチーム開発を考えるとまずはローカルでの対応にしたいと思います。
Monacaにも上記要望に応えるようなLocalkitという魅力的なツールが用意されていましたが、30日のトライアルで以降年額9800円ということで、取り合えづはフリーで始められ方法を。
※以下 > はコマンドの実行
◆Android SDKインストール
まずはAndroidの実行環境を準備
１）Toolsをダウンロードし「tools」をパスに設定
http://developer.android.com/sdk/index.html
SDK Tools Only
android-sdk_r24.3.4-windows.zip
> android
３）以下をインストール
Tools
├Android SDK Platform-tools 23.0.1
├Android SDK Build-tools 23.01.1
Android5.1.1(API 22) ※最新のAndroid6.0(API 23)でないことに注意
├以下すべて
Extras
├Android Support Library 23.0.1
├Google USB Driver 11
├Intel x86 Emulator Accelerator(HAXM installer) 5.4
４）高速エミュレータ（HAXM）インストール
以下を実行
extras\intel\Hardware_Accelerated_Execution_Manager\intelhaxm-android.exe
５）Android Virtual Device Managerを起動
> android avd
６）AVDを新規作成
Android Virtual Devices > Create..
Target: Android 5.1.1 -API Level 22
CPU/ABI: Intel Atom(x86_64)
Memory Options: RAM:512
Emulation Options: Use Host GPU
※上記以外任意
◆Cordovaを用いた開発環境を構築
Cordova: ハイブリッドアプリの開発には専用のフレームワーク「Apache Cordova」のこと
１）「node.js」をダンウンロードしインストール
https://nodejs.org/en/
２）インストール確認
> node -v
v4.0.0
> npm -v
2.14.2
３）「cordova」のインストール（-g：マシンのグローバルな領域）
> npm install cordova -g
４）「WARN」が出ましたが、ひとまずはインストールされていることを以下の方法で確認
> cordova -v
5.3.1
５）プロジェクトの作成
> cordova create hello com.example.hello Helloworld -d
６）アンドロイド環境を追加
> cd hello
> cordova platform add android
７）エミュレータ起動（-d：詳細表示）
> cordova emulate android -d
８）実機での確認（-d：詳細表示）
> cordova run android -d
※USBデバッグをONにしたAndroid端末と開発マシンをUSBケーブルで接続
◆OnsenUIを試す
１）以下より試したいテンプレートをダウンロード
http://ja.onsen.io/download.html#download-templates
２）展開したファイルから「www」を入れ替える
動かすとこまでは出来ました。
後はアプリを作りこんでいきたいと思います。
j.k
テキストボックスの初期値にグレーの文字で値を入力しておく
こんにちは、スウェルデザインのWです。
入力欄の中に例文や項目名を入れ、入力を誘導する為に
予めテキストボックスの中に影響の受けない初期値を薄く入れておく事ってよくありますよね
placeholder="ここの中の物がグレーで表示されます"
See the Pen gapQbY by swelldesign (@w-swelldesign) on CodePen.
value=""に入力すると編集可能な初期値として影響のあるテキストが入ります。
おまけとして、placeholderにスタイルを適用させる方法をメモします。
See the Pen wKaQBK by swelldesign (@w-swelldesign) on CodePen.
上記CSSで各ブラウザにも対応したスタイルが当てられます。
この場合は色を変えてみました。
ご活用ください。
floatに頼らない！inline-blockでblock要素を横並びにできる！
こんにちは、スウェルデザインのWです。
今まで要素を横並びにする時は、floatを活用していたのですが
floatっていうのは厄介なヤツで、使用した後はclear: both;でfloatを食い止めないと
後の要素に影響してしまいます。
そもそもの用途は、画像にtextを回りこませる為に浮かせる役割を持っていて
block要素を横並びにするスタイルではありませんでした。
floatを使った例がこちら
See the Pen OyJaWm by swelldesign (@w-swelldesign) on CodePen.
なので、本来と違った使い方をすると色々な弊害が出てきてしまいます。
この場合も左寄せが綺麗に揃ってません。
そこで代わりになるスタイルを今更発見してしまいました。
あったんですねこんな便利なスタイルが・・
それが『inline-block』
このスタイルはブロック要素をinlineとして扱ってくれるので
See the Pen NGWEdw by swelldesign (@w-swelldesign) on CodePen.
こんな感じ、左のラインも揃ってます。
ブラウザの幅に合わせて横並びにしてくれるのでレイアウトが崩れにくく
更にdivとしての良い所は残るという優秀なスタイルでした。
今後は活躍させていきたいと思います。
テキストをグラデーションにしてみましょう
CSSで美しいグラデーションをテキストにかけることができます。
ページのタイトルやアクセントにいかがですか？
<h1 title="SwellDesign">SwellDesign</h1>
タグで囲った表示したいテキストとtitleの中身を同じにします
h1, h1:before { position:absolute; top:0; left:0; color:#8AE2DA; } h1:before { display:block; content:attr(title); color:#80A7DB; -webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1)); }
そしてCSSで擬似クラスにグラデーションマスクをして完成です。
See the Pen waVNRP by swelldesign (@w-swelldesign) on CodePen.
こんなかんじになりました！
