ホームページ制作会社、サイト制作、その他各種システムの構築、CGI、PHP等のWEBアプリ開発

ホームページ制作・システム構築・DB設計ホームページ制作・システム構築・DB設計
ホームページ制作とWEBシステムの構築、カスタマイズから運用サポートまで。
スペーサー

総合的なサポートでネット集客(売上)を改善します。

当サイトは、ホームページ制作、WEBデザイン、および各種プログラムの制作を通して、クライアントの皆様の集客や売上げの改善を行っています。

ネットからの集客を改善するためにはホームページを作るだけではなく、その後の運用が大切です。

弊社ではネットマーケティングに特化した総合的なスキルでクライアントの成長を促します。
ホームページ制作のご発注、WEBプログラムのご依頼が初めて方でも安定運用までサポートいたします。お問い合わせはこちらから。




スマホ専用、ブックマーク促進プログラム。(jquery)

2017年2月18日 11:51
ブックマークバブルスマホ用のランディングページを作る機会があって、そのクライアントからお気に入りに入れられるようなjavascriptプログラムを作って欲しいというオーダがあった。しかもホーム画面へ追加できるプログラムというオーダだ。

そのクライアントから以前も同じオーダがあったのだか、「スマホの場合、PCブラウザと違って、そのようなjavascriptは存在しない、それはスマホのネイティブ機能を触ることになり、そのようなプログラムは存在しないし、存在してはいけない」という回答をしていたのだが、先日「これこれ」と見せられたのが、
http://qiita.com/narikei/items/4240f03542f29e313989
だった。

確かにブクマを促進しているが、そこまでである。できることは促進まで。

ローカルストレージを使ったり、一週間に2回訪問しないと表示されなかったりとか制約がいろいろある。SSLも必須だし、なかなか手間だ。Androidでしか動かない。

同じようなものを探すとiPhone、Androidで動くものもあった。
http://myenigma.hatenablog.com/entry/2015/07/21/113109
試してみたが、やはりlocalStrageを使ったり、少し使い勝手が悪い。

いろいろ考えてみると、やはりそのクライアントのようにランディングページで商売している人にはブックマーク促進プログラムは必要不可欠な機能だと思う。

1クリック幾らの支払いをして、再訪問だろうが、商売敵だろうが、プロモーション経費として払っている人ならば、ブックマークをユーザに促して、少しでもクリック費用を抑えたいのがホンネだろうと思う。

そこで作ってみました。「スマホ専用、ブックマーク促進プログラム。(jquery)」

いろいろサンプルコードを解析しながら、iPhone、Androidでも動くプログラムである。
ユーザがホーム画面に追加というボタンを押すことを促すだけである。
スマホのホーム画面からアイコンをクリックしていただければ、ブックマークバブルは再訪問のため表示されない。

致し方ないのだが、画面をリフレッシュすると再訪問とみなされ、ブックマークバブルは表示されない。
ブックマークバブルをクローズしても、お気に入りに登録というボタンを押せば、またブックマークバブルが表示される。

PCで確認する場合はこちら。(再訪問判定とユーザエージェント判定がありません。)
実際に稼働させるにはこちら。(再訪問判定とユーザエージェント判定が厳密です。)
ダウンロードはこちら。改変はご自由に。
お仕事のご依頼はこちら。

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-3503
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+


linkstationのRAIDが壊れたはなし。

2017年1月30日 22:57
linkstationの1TB機をRAID構成で500GBにして、長年使っていた。
以前にもlinkstationのHDDを壊したことがあり、ほこりには大変気を使っていた。
気がつけばエアスプレーでマメに掃除していたのだが、先日気がつくと電源が落ちていることが判明。
何かの都合で落ちたのだろうと電源を入れなおしたところ、片側のHDDから異音が発生していることに気がつく。
「RAIDだからね、片側が壊れただけでデータ飛ばないもんね。」と前にも一度片側のHDDを自分で交換した時と同じ要領で、新品のHDDを購入して装着。
RAIDの再構築を試みる。そのまま就寝。
そして次の朝に確認するとまた電源が落ちていた。
これは少し問題がややこしいのではないかといろいろな方法を模索する。
通電するがしばらくすると電源が落ちてしまうlinkstation固体については見切りをつけて、データの復旧、データの救済だけに尽力する。
まずはSATA->USBをアキバで購入。HDDが売っているエリアにありました。
そのまま装着するが、もちろんwindowsでは読み込める訳でもなく、サルベージソフトが必要となる。
まずはExt2Fsdというソフト。残念ながら救済できず。Ext2FsdはNASのext2形式、ext3形式だけとある。
続いて復旧天使のお試し版。windowsから無事に接続できて、HDDもマウントできた。
調べてみると私のlinkstationの場合、xfs形式だったことが分かる。
階層も確認することが出来て、ディレクトリの構成も確認できた。
そうでしょ。データが破損しているわけないもんね。
復旧天使は有料版しかなく、一定の容量をサルベージするためには購入が必要とのこと。
ちと高い。RAIDで組んで、Linuxで、データ救出にそんな金だけせないでしょ。
とほかの方法を模索する。
ネットで調べるとLinuxが動作するPCが必要ということ。
ubuntuをダウンロードしてCD起動。
CDから起動する場合は、ダウンロードしたiosファイルを右クリックからディスクイメージの書き込みからCD上にファイルを展開する必要がある。何度も焼き直ししてやっとCDからLinuxが起動した!
でもマウントできない。いろいろ試したけど、マウントできない。
うーん。では別のLinuxOSを試す。
knoppixをダウンロードしてCD起動。
でもマウントできない。いろいろ試したけど、マウントできない。
「RAIDだからね、片側が壊れただけでデータ飛ばないもんね。」と呪文のように自分に言い聞かせる。
復旧天使か。それしかないだろ。小さなファイルでもお試しで救済できたし、正規版を購入に踏み切る。
クレジット決済からシリアル番号を取得して、重いファイルを移動しながら就寝。
翌日、windows7を確認すると電源が落ちている。理由不明。
よく分からないまま、windows7を起動して、再度復旧天使からデータ移行を試みるが、なぜかコピーできない。
復旧天使では、このフォルダを参照できませんというメッセージが表示されている。
もうお手上げ!完全にお手上げ!
データ復旧の専門業者に連絡しました。(涙)
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-3503
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+


ZendFrameworkのZend/Mail.phpで、差出人が文字化けする件。

2015年3月 8日 22:04

料理本の通りにやっても上手く動きませんでした。
ZendFrameworkのZend/Mail.phpは日本語きらいですかね。

// コンポーネントをロードする
require_once 'Zend/Mail.php';

// 文字コード設定
$mailCharset = 'ISO-2022-JP';
$crrCharset = 'UTF-8';

// メールの内容を設定する
$fromMail = 'from@example.com';
$sendName = '送信者名';

// 文字コードを「ISO-2022-JP」に変換する
$sendName = mb_convert_encoding($sendName, $mailCharset, $crrCharset);

// インスタンスを生成する
$mail = new Zend_Mail($mailCharset);

// メールを作成する
$mail->setFrom( $fromMail , $sendName );
↑これでは差出人名が文字化けしてしまいました。↓だとGmail受信して差出人名が文字化けしませんでした。
$mail->setFrom( $fromMail , "=?ISO-2022-JP?B?".base64_encode($sendName)."?=" );

沢山省略しています。大切なところだけ記述していますので、ご了承ください。

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-3503
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+


PC用とスマホ用の表示切り替えをCSSだけで行う方法(その3)

2015年2月 7日 10:28

PC用とスマホ用の表示切り替えをCSSだけで行う方法(その3)

PC用とスマホ用の表示切り替えをCSSだけで行う方法について、追記します。
弊社では、現在そのほとんどがbootstrapのフレームワークを使って構築しています。

少しとっつきにくいbootstrap(ブートストラップ)ですが、構造を理解していただければ、非常に簡単なCSSフレームワークです。

PC用のソースとスマホ用のソースが一枚のhtmlファイルに記述できるので、簡単です。

<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
ここに表示したい内容
</div><!--/.col-lg-3 col-md-3 col-sm-3 col-xs-12 -->
</div><!--/.row -->
</div><!--/.container -->
というように記述します。

以下、class指定している設定値の説明です。
col-lg-数字 = 画面サイズが≥1200pxの場合このクラスが適応されます。
col-md-数字 = 画面サイズが≥992pxの場合このクラスが適応。
col-sm-数字 = 画面サイズが≥768pxの場合このクラスが適応。
col-xs-数字 = 画面サイズが<768pxの場合このクラスが適応。
となります。
数字には、ブロック要素として1〜12が入ります。

デバイスごとに隠したいコンテンツがある場合は、
hidden-を使います。
hidden-lgとか、hidden-xsとかです。
弊社では、bootstrap.cssの1580行目付近にある、
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
という設定を、
@media (min-width: 1200px) {
.container {
width: 970px;
}
}
という設定に変更して、画面が1200以上でも、横幅を970に設定しています。

サンプルサイトはこちら。
ブラウザの右下をつかんでウインドの幅を変更すると状態が変更されます。



bootstrapのサイト構成は以下。
bootstrap/
├── css/
│ ├── bootstrap.css
│ └── bootstrap.css.map
├── js/
│ └── bootstrap.js
└── fonts/
  ├── glyphicons-halflings-regular.eot
  ├── glyphicons-halflings-regular.svg
  ├── glyphicons-halflings-regular.ttf
  ├── glyphicons-halflings-regular.woff
  └── glyphicons-halflings-regular.woff2

bootstrapで作ったサイトはこちら。
http://www.kankyo-d.co.jp/
http://www.frogrock.jp/
http://www.pleasure-mikunigaoka.com/
いずれもおなじHTMLファイルがCSS制御で表示しています。



PC用とスマホ用の表示切り替えをCSSだけで行う方法(その1)
PC用とスマホ用の表示切り替えをCSSだけで行う方法(その2)
PC用とスマホ用の表示切り替えをCSSだけで行う方法(その3)
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-3503
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+


bootstrapに夢中

2015年1月30日 11:40
少し前からほぼすべてのホームページ制作でbootstrapを使っています。
スマホ、PC用とひとつのhtmlファイルでレスポンシブルに表示してくれるので、設計だけちゃんとしていれば、きれいなサイトが出来上がります。

まあ、bootstrap臭というフレームワーク特有の雰囲気が出ることは致し方ありません。

bootstrap管理画面系

また、管理画面系のUIにも非常に相性が良く、ボタンひとつでも視覚的に訴求したい場合にCLASSで括ればよいだけなので、大変楽です。
バージョンが3に上がってからはより使いやすくなったと思っています。 あまりメジャーなアップデートがあると少しやっかいですが。。。

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-3503
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+





Valid XHTML 1.0 Transitional スペーサー 正当なCSSです!