friendly_rium

リウムおもしろブログ

ホームページ作成システム(CMS)とか、顧客管理システム(CRM)とか、
メール配信システムとかを開発している有限会社リウムのスタッフブログです。

11

実録4コマ#3 「なんでも見えている…!?」

03

実際には超能力は使えませんので、できるだけ詳しくお困りの症状をお聞かせください…。



13

実録4コマ#2 「がんばれパインアメ」

02
リウムでお出ししているコーヒーやお菓子はどんどんお召し上がりください!
もちろんこの漫画を機にパインアメもぜひ・・・!
10

お店のホームページに使える写真素材集サイト

リウムスマイル!などのCMSを使ってホームページを作成されている場合、お店の方ご自身で簡単にホームページの内容を作り込めます。
ですので、お店のホームページにはサービス、商品への熱いこだわりを書き込んで欲しい。もう熱くて火傷するほどの。

それが完成したら次は写真です。写真が一瞬で伝えるインパクトは強烈です!
リラックスできる店内の雰囲気、美味しそうな料理達、親しみやすい店長の笑顔…。
そんな写真も沢山載せて欲しい。

でも、なかなかイメージ通りのものが、すぐに用意できない事もありますよね。わかります。

そんな時に使える、商用利用無料なとてもありがた~いお店のホームページ向きの写真素材集のサイトを集めてみました。

ご自身のお店のホームページに、ひと味加えたいなという時に、参考にご覧いただければと思います。

なお、基本的には、お店の方がご自身のお店のホームページに使用する場合に問題なく使えそうなものをピックアップしておりますが、ご利用の際はそれぞれの利用規約をご確認ください。


足成
風景写真や植物など、自然系が特に充実しています。


ぱたくそ
雑貨やオブジェ系の可愛らしい写真が多いです。


モデルピース
人物モデルの写真が豊富です。


ラブフリーフォト
海中の魚の写真などが綺麗です。


Futta.NET
海外の写真が豊富です。


取り放題.com
写真ではありませんが、プレゼントリボンやセールバッジなど、キャンペーン告知ページなどに使えそうです。


のーちゃんの素材集
自然系の写真素材や、アイコンが豊富です。



あまりに色んな種類の写真をあっちにもこっちにも貼り付けると、すぐに素人っぽいホームページ一丁上がりとなってしまいます。
要所で使うようにしましょう。

 

21

実録4コマ#1 「4コマまんが始動」

01
ということで、リウムの良さを分かりやすく伝えるために、
リウムでの日常を描いた4コマ漫画を月に一度あげていくことになりました!

笑い、シリアス、感動……などあるか分からないですけど
「リウムってこんな会社なんだ!」「おもしろい人たちだなあ」「この人たちと一緒になにかしたいな」
なんてゆるーく思いながら読んでいただけたら嬉しいです(^ω^)
16

名前がハイフン「-」から始まるファイルの削除、リネーム(linux)

こないだひょんなことから、ハイフンで始まる名前のファイルを作ってしまいました。

-test.txt

みたいなのです。

rm -test.txt

と、早速消そうとしたけど、消せません…。

「そんなオプションないよ!」的な事を言われて、怒られます。

こまったなぁと思って、名前を変えようとしましたが、mvコマンドでも、同じように怒られます。

どうしたもんかとグーグル先生に尋ねたら、

rm -- -test.txt

のように、コマンドの後にハイフンを2つ書けば、削除できるようです。

すごく基本的なことなんだと思うのですが、これまで遭遇せずで、知らずに過ごしておりました。

どなたかの参考になりますれば。


8

ImageTTFTextで縁取り文字画像の動的生成

phpでImageMagickを使わずに、ImageTTFTextで縁取り文字の画像を、動的に生成するサンプルを作りました。

こんな感じの縁取り文字を生成します。
↓↓
logo


ImageMagickを使えば、色々かっこ良いのがサクッと作れると思うのですが、バージョンの問題やアレやコレやの事情で使えない場合に、ImageTTFTextで縁取り文字画像を生成するサンプルです。

大きめの文字を書いて、順々に中に小さい文字を書いていくという、恐ろしく単純な作りです。


  1. <?php
  2. $text = '有限会社リウム';                                            //画像化する文字列
  3. $fontsize = 30;                                                        //フォントサイズ
  4. $padding = 10;                                                        //上下左右パディング
  5. $fontname = '/usr/share/fonts/ja/TrueType/kochi-gothic-subst.ttf';    //フォントファイル
  6. $fontcolor = array(                                                    //フォントカラー
  7.                 array('r'=>102, 'g'=>51, 'b'=>0, 'thick'=>4)        //一番外側の色、太さ
  8.             ,    array('r'=>255, 'g'=>255, 'b'=>255, 'thick'=>2)        //中の色、太さ
  9.             ,    array('r'=>64, 'g'=>32, 'b'=>0, 'thick'=>0)            //一番中の色、太さ
  10.                 );
  11. //生成するイメージの幅、高さを算出
  12. $text    = mb_convert_encoding($text,"UTF-8","auto");
  13. $result = ImageTTFBBox($fontsize, 0, $fontname, $text);
  14. $width    = ($result[2]-$result[6]) + ($fontcolor[0]['thick']*2) + $padding*2;
  15. $height = ($result[3]-$result[7]) + ($fontcolor[0]['thick']*2) + $padding*2;
  16. // イメージリソースを生成
  17. $img = ImageCreate($width, $height);
  18. $white = ImageColorAllocate($img, 255, 255, 255);
  19. // 背景を透明にする
  20. imagecolortransparent($img, $white);
  21. // 背景を塗りつぶす
  22. ImageFilledRectangle($img, 0,0, $width,$height, $white);
  23. if (is_array($fontcolor)) {
  24.     foreach( $fontcolor as $key => $val ) {
  25.         //カラー作成
  26.         $imgcolor[$key] = ImageColorAllocate($img, $val['r'], $val['g'], $val['b']);
  27.     }
  28.     //imgに文字を書いていく
  29.     foreach( $fontcolor as $key => $val ) {
  30.         $x = -$val['thick'];
  31.         while ($x <= $val['thick']) {
  32.             $y = -$val['thick'];
  33.             while ($y <= $val['thick']) {
  34.                 $xx = $fontcolor[0]['thick'] + $x + $padding;
  35.                 $yy = $height - $fontcolor[0]['thick'] + $y - $padding;
  36.                 ImageTTFText($img, $fontsize, 0, $xx, $yy, $imgcolor[$key], $fontname, $text);
  37.                 $y++;
  38.             }
  39.             $x++;
  40.         }
  41.     }
  42. }
  43. // PNGとして出力
  44. header("Content-type: image/png");
  45. ImagePNG($img);
  46. ?>

こんなの誰が欲してる?と思ったのですが、どなたか、一人でも「参考になった!」という方がいらっしゃれば…。

7

ネスカフェのバリスタがやってきました!

どうも研修生のじゃすみんです。

昨日ネスカフェのバリスタがリウムにやってきました!
DSC_0002

午前中に注文したのに夕方には届けてくれるなんてアスクルすごい…!
バリスタはボタンひとつでカプチーノもエスプレッソも作ってくれます。
コーヒーはインスタントなのですが、飲んでみるとインスタントは思えないぐらいおいしいです!(*^∇^)
他にもひと手間加えるだけでアイスエスプレッソフロートアイスメープルカフェラテなども作れちゃいます!

リウムにお越しの際は、ぜひ一度ご賞味ください!(^o^)

22

iPadでのフリック入力キーボードの表示方法

先日iOSのアップデートがありましたね!
いろいろ便利な機能が追加されたようなのですが、
僕が一番待ち望んでいたのが・・・

Evernote 20111118 20-04-44

iPadでのフリック入力キーボードの実装!

つ、つついに念願がかないましたよ!
日本語フリック入力のファンは多くて、
今は亡きAppleの前CEOのジョブズさんに直訴メールをした方もいる程なんですよ!


■フリック入力キーボードを表示させる方法

ちゅーことで、iOS5へのアップグレードを行いました。
めちゃめちゃ時間がかかって・・・
ワクテカしながら、ドラフトパッドを開いてキーボードを表示させる。

Evernote 20111118 20-03-54

・・・ない!
日本語フリック入力キーボードがない!
なんだかそのまんまの設定では表示されないらしいです。

慌てずに・・・
「設定」「一般」を開き
下の方の「キーボード」をタップ
そして「各国のキーボード」をタップして”日本語テンキー”を選択!
 
Evernote 20111118 20-04-02


これで、iPadで日本語50音キーボードが表示されるようになります!
Evernote 20111118 20-04-09


んで、右下のキーボードマークを長押しして”Split”を押すと

Evernote 20111118 20-04-13

ヒャッハー!
これが夢にまで見たiPadでの日本語フリック入力キーボードですよ!



■iPadでの日本語フリック入力キーボードの感想

いやあ念願の日本語フリック入力キーボードです。
さっそくバリバリと・・・


あれ・・・
ちょっと使いにくい・・・
「出現位置が中央だったり、下部だったり・・・不安定」
「ちょっと小さい」
「フリックの感度が悪い」


いや、そんなことは無いハズだ。

僕が慣れていないだけだ。
日本語フリック入力キーボードを実装してくれたAppleは悪くない。
慣れていない僕が悪いんだ。
一瞬でも疑ってしまった僕を許しておくれ・・・


必ず特訓してモノにします!

18

主流になりつつある!?iPhone対策のレスポンシブ・ウェブデザイン

こんにちは。
リウムのーちゃんです。

最近、スマートフォン利用者がものすごいスピードで増えているのを感じます。

Webサイトを制作している立場の私からすると、いろんなブラウザ、そのバージョン違い、その他にもスマートフォンやタブレットPCと、制作するときに気にしないといけないことが増えていき毎日大変な思いです・・・。

せっかく作ったWebサイトですが、パソコンではキレイに表示されるのに、スマートフォンでは・・・
なんてことになると、閲覧者は見にくい、お客様は悲しい、私も悲しい・・・。

そんなことにならないように、弊社のシステム「リウムスマイル!」で作成していただいているWebサイトの構造も日々改善につとめております。

このたび、iPhone・スマートフォン対策として、レスポンシブ・ウェブデザインを取り入れてみましたので、その方法をご紹介いたします。





レスポンシブ・ウェブデザインとは?

Webサイトのページレイアウトを閲覧者の環境(PC、タブレットPC、iPhone、Android など)に応じて動的に変更させる方法です。
メディア・クエリ(Media Queries)でスタイル(CSS)を設定してレイアウトなどを切り替えます。
htmlファイルを別に用意する必要はありません。
リキッド・レイアウトとも似ていますが、下図のような違いがあります。


20111117_001





レスポンシブ・ウェブデザインの設定方法

メディア・クエリ(Media Queries)でスタイルシートを設定していきます。

メディア・クエリというのは簡単に言うと、出力媒体や閲覧状況に応じて、いつ、そのスタイルをきくようにするかという設定です。

よく使われるのは、印刷時の設定でしょうか。
下記のように指定するとパソコンに表示する際には赤色で、印刷する時には太字で強調という風になります。

@media screen {
  .hogehoge { color: red; }
}
@media print {
  .hogehoge { font-weight: bold; }
}


これを使用して、閲覧者の環境(ブラウザの幅)に応じて設定していくだけです。

iPhone用に設定する場合は次のように記述します。

iPhone用に別にスタイルシートを作成する場合

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="iphone.css" />
同じスタイルシートを使用する場合
@media screen and (max-device-width: 480px) {
 .column {
  float: none;
  iPhone用のスタイル
 }
}

iPhoneのSafariはディスプレイを320×480ピクセルで認識するようなので、max-device-width を 480px にして、iPhone(ディスプレイの最大幅が480pxのデバイス)で閲覧した時は、iPhone用のスタイルということになります。





スタイルの設定
  • 各ブロックの横幅を%設定に
    表示領域に合わせてレイアウトブロックの幅が動的に変わるように%指定に変更します。
  • 画像も相対的に表示されるように、max-width を100% で指定
  • 文字サイズの調整
  • 各ブロック内のレイアウトも変更

このような設定をすることで、閲覧者の環境に応じたレイアウトでwebサイトを表示することができます。





まとめ

今回取り入れた、レスポンシブ・ウェブデザインという方法以外にも、スマートフォンやいろいろな環境でキレイにwebサイトを表示させる方法はあると思います。

スタイルシートで設定できるこの方法は、現在のhtmlを大幅に変更することなく設定できるので、比較的取り入れやすいのではないでしょうか。



記事の最初でもご紹介いたしましたが、弊社のシステム「リウムスマイル!」では、レスポンシブ・ウェブデザインを取り入れております。

作成されたwebサイトをiPhoneでご覧いただくと、自動的に見やすい表示になっております!

レスポンシブ・ウェブデザインとは別の話ですが、何と携帯サイトも自動で作成されるシステムとなっております!


webサイトの作成や、携帯サイト、スマートフォン対策のされたwebサイトの作成をお考えの方は、「リウムスマイル!」のwebサイトをご覧ください!!

リウムスマイル!
http://riumsmile.jp/

17

はじめまして、研修生のじゃすみんです。

はじめまして。有限会社リウムの研修生じゃすみんと申します!
今月入社したばかりでまだ一応学生ということもあり、分からない事やしどろもどろになる事など多々ありますが、精進していきますのでどうぞよろしくお願いします。

私は高知出身で先月の終わりに大阪に引っ越してきました。念願の一人暮らしです!
今住んでいる場所は実家と違って徒歩5分以内にはスーパーやコンビニもあるし、地下鉄は10分以内に次の電車が来るし、セブンイレブンやサイゼリヤやかっぱ寿司もあるし、人が多くて外国の人も沢山いるし・・・・
旅行では何度か来たことはありますが、いざ住んでみると同じ日本の中なのに色々と違う事が目につきます。
(というより四国・・・いや高知がハブられてるだけなのかも・・・・)
ほんと大阪って便利!が住み始めた時の第一印象です。今も変わってません。
何に関しても不便な高知で育ってきたからかもしれませんが・・・・
色々と言ってますがやっぱり地元ですし高知は好きです。特に食材と空気とどこに行くにもほぼ一本道に関しては。
リウムスマイル!
最新コメント
QRコード
QRコード
記事検索
リンク
RSS
rss
  • ライブドアブログ