サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
h2o-space.com
「店舗一覧」や、「●●ができる場所の一覧」など、複数のマーカー（ポイント）を一括で マップに表示させたいというニーズは一定数ありますが、ざっと検索して調べる限りでは 「Yahoo！地図」を使った機能でページに埋め込みづらい 無料で使うと広告が表示される 無料だが、ひとつひとつ手動でポイントを登録していく必要がある などの方法が検索上位に出てきます。 かといって、マップをキャプチャして、マップ画像にマーカー（ポイント）を示していくという方法は取れません。（マップツール作成者の著作権侵害になるからです。） そこで今回は、「Google マップを使う」「無料」「広告が入らない」「一括で登録」ということにこだわった手順をご紹介します。 （準備１）リストを作成する まずは一覧にしたいマーカー（ポイント）のリストを作成します。 リストには、 ① 各マーカー（ポイント）のタイトル（地名、施設名など）情報
WordPressでメールニュースを配信できるプラグインは数多くありますが、複雑な条件で送信ユーザーを設定できる、日本製のプラグイン『Bluff Post』を紹介します。 プラグインをインストールする Bluff Postのインストールは、他のプラグインと同様で「プラグイン→新規追加」からインストールと有効化をするだけで利用できます。「Bluff Post」といったキーワードで検索すると良いでしょう。 メルマガ登録フォームを作成する プラグインを有効にすると、ウィジェットに「Bluff Subscribe Widget」が追加されます。
kintoneは、APIを通じて外部のプログラムからアクセスできます。例えば、PHPと連携すればフォームから入力された情報を kintoneに格納したり、kintoneの情報をウェブページに一覧したりできます。 そして、これらの作業をサポートしてくれるライブラリーが『Cybozu HTTP client for PHP』です。Yuichi Ochiaiさんが開発され、GitHubで公開されています。早速使ってみましょう。 インストール 本ライブラリーを利用する場合は、Composerを利用すると良いでしょう。インストールしていない場合は、次のコマンドかまたは公式サイトからセットアッププログラムをダウンロードして、セットアップします。 curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/local/bi
WordPressでのサイト開発で面倒なのが、ローカルで開発したサイトをサーバー上にアップロード（デプロイ）する時。テーマファイルのアップロードだけなら簡単ですが、設定を変えたときや固定ページなどを絡めた場合は、簡単にはサーバーと同期をする事ができません。 そんなデプロイ作業に、WordMoveというツールが超便利でした。 welaika/wordmove 筆者の場合は、VCCWに同梱されていたWordMoveを利用したので、こちらで解説します。 VCCW – A WordPress development environment. VCCWをセットアップ まずは、VCCWをセットアップします。先に、Vagrant環境を整える必要があるので、このあたりは他のブログなどを参照してください。 ZIPをダウンロードするか、gitからクローンします。 git clone git@github.co
{“id”:”6c77e872-b499-47bc-8871-f34e728efcf0″,”type”:”UPDATE_RECORD”,”app”:{“id”:”9″,”name”:”サイト制作実績”},”record”:{“レコード番号”:{“type”:”RECORD_NUMBER”,”value”:”64″},”更新者”:{“type”:”MODIFIER”,”value”:{“code”:”master@h2o-space.com”,”name”:”TANIGUCHI Makoto”}},”作成者”:{“type”:”CREATOR”,”value”:{“code”:”master@h2o-space.com”,”name”:”TANIGUCHI Makoto”}},”文字列__1行_”:{“type”:”SINGLE_LINE_TEXT”,”value”:”1231″},”sta
みんビズが採用しているJimdoでは、標準でスマートフォンへの対応もできています。しかし、見た目はいかにもなスマホサイトで、デザインも自由になりません（たぶん）。 そこで、CSSを動的に切り替えるいわゆる「レスポンシブ・Webデザイン」にする方法を紹介します。 スマホ表示をOFFにする まずは、標準のスマホ表示をOFFにします。 独自レイアウトにする Jimdoの無料プランだとできない（たぶん）のですが、みんビズはProプランなので「独自レイアウト」を選ぶことができます。レイアウトメニューから選びます。 メディアクエリーを記述する このあたりからが特殊ですが、JimdoはCSSファイルを別途アップロードすることができません。そのため、link要素でCSSを読み替えたりはできず、この1ファイル内で切り替えを頑張るしかありません。 CSS内で、メディアクエリーを効かせるには次のように記述します
オンライン上で生放送の授業を毎日行っているサービス「スクー」に、出演させて頂きます。 テーマは「WordPressでテーマ制作ライブ授業」として、90分の授業時間ないに企業サイトを1つ制作するというライブ構築を中心とした授業となります。 生放送という場で、しかもチャットを利用してアクティブに参加できる場となっていますので、ぜひ質問やリクエストなどをどしどしいただいて、ライブ授業の内容を変えていって頂ければ幸いです。 無料で全国どこからご利用頂けます。ぜひともご覧頂けると幸いです。 たにぐちまこと先生と、WordPress テーマ制作LIVE授業 ～ 90分で企業サイトを作ろう 商号 株式会社エイチツーオー・スペース（英称：H2O space. Co., Ltd.） 所在地 〒157-0071 東京都世田谷区千歳台4-17-15 TEL 03-6411-3292 Email support@
Web制作ワークフローで活用しているツール 14選 – CPI Fanトークナイト vol.2 2014年 9月 5日に、『CPI Fan☆トークナイト！』が開催されました。 「CPIエバンジェリストが選ぶ優良ツール100選」と題されたこのイベントでは、同じCPIエバンジェリストの後藤 賢司さん、阿部 正幸さんとともに100選・・まではいきませんが、いくつかのツールを紹介しました。 私、たにぐち まこと が紹介したツール群のスライド資料はこちらです。 CPI Fanトークナイト vol.2 以下にリンクを置いておきます。ご活用くださいませ。 Backlog すべての業務の中心。弊社のすべてのプロジェクトがここに詰まっていて、クライアントさんを含めてほぼすべての方がここでコミュニケーションをしています。 また、最近は Gitのホストとしても大活躍しています。文字通りなくてはならないツール
2018.09.08 kintone devCamp 2018の開催レポートが掲載されました 2018年 8月 2日に東京日本橋で開催された、『kintone devCamp 2018』に H2O spaceの 谷口 允が登壇いたしました。 その開催レポートが、サイボウズのブログサイトに掲載されました。当日利用し […] 2018.08.27 kintone構築のお手伝いをした FACE to FUKUSHI様がサイボウズの事例に掲載されました H2O spaceが、kintone及びそのウェブサイトとの連携をお手伝いした、一般社団法人 FACE to FUKUSHI様が、サイボウズ社のウェブサイトにおいて、導入事例として掲載されました。 記事では、それまでの煩 […]
昨日は外出なし。セミナーも終わり、いろいろとたまっていた仕事を片付けました。しかし、アルバイト君がお休みの日で、もう一人の社員は風邪でお休み。ということで、オフィスの中に私一人しかいなかったため、いまいち集中力も上がらず、もう一息進みませんでした・・うぅむ、反省。皆様も、お体に気をつけてください。 さて本題。最近、Webサイトの編集作業にCodaという編集ソフトを愛用しております。非常に軽い上に、エディタ・FTPクライアント・ターミナルまでがセットになっていて使いやすい。Macらしいソフトで愛用しています。 Codaの特徴の一つが「Subversion」のクライアントを持っていることなのですが、これを使うとバージョン管理ができるようになります。今回は詳しいことは割愛してしまいますが、これも非常に便利。 で、Subversionのホスト先として使っているのがBacklogです。これを使えば、
もはや、HTML制作の時には必須のテクニックとなった「Zen Coding」。私も、DreamweaverやCodaでバンバン活用しています。 で、Codaの場合「TEA for Coda」というプラグインで機能を拡張するのですが、これがちょっと困ったことに<html>要素の「lang」属性が「en-US」になっています。 日本でやるなら「ja」または「ja-JP」にせねばならず、これを毎回書き換えなければなりません。これ、設定ファイルで書き換えることができます。 Finderで自分のユーザーディレクトリから次のパスを辿ります。 「ライブラリ→Application Support→Coda→Plug-ins」 そして、「TEA for Coda.codaplugin」ファイルが見つかったらこれを右クリック、コンテキストメニューから「パッケージの内容を表示」を選びましょう。すると、さらにこ
WordPressのビジュアルエディタは使いやすくて非常によいのですが、見た目は独自のCSSがあてられているため、文章を書いている間はできあがりを想像して書き、後はこまめに「プレビュー」をして実際の様子を見るしかありません。 しかし、これが意外と不慣れな方にはストレスのようで、ビジュアルエディタで見たまま編集したい！ と言うご要望をいただきます。そこで、ちょっとこのビジュアルエディタを改造してみることにしました。 WordPressのビジュアルエディタにはTiny MCEというエディタツールが使われています。これが、WordPressでは、次の場所にインストールされています。 /wp-includes/js/tinymce/ この中のファイルを編集すると、改造を施すことができます。 エディタ内のCSSを整える エディタ内のCSSは、次のファイルが司っています。 /wp-includes/j
エンジニアが、ちょっとしたデモサイトや社内で使うWebシステムを作るときなどで、デザイナをつけて貰えないなんてことは良くあります。 そんな時、エンジニア自身がHTMLやCSSを駆使してサイトを作るわけですが、案の定センスのないださいサイトになりがちです（筆者を含む）。 そこで、さくっとセンスの良いサイトを作れるCSSテンプレートが『Bootstrap, from Twitter』。名前の通り、Twitterのサイトをデザインしているチームが公開しているテンプレートで、シンプルだけどきりっと引き締まった、非常にセンスの良いサイトが簡単に作れます。 さらに、JSライブラリなども同梱されており、ちょっとした動きなどもつけられるようです。詳しくはIDEA*IDEAさんの記事をどうぞ。 意欲的にアップデートもされているようで、今後の発展も楽しみですね。 Bootstrap, from Twitter
GoogleとKDDIのJimdoが始めた、中小企業向けのサイト構築サービス『みんなのビジネスオンライン』。 1年間無償で、簡単な手続きで始めることができる上に、Jimdoの高機能なCMSをフル活用できてGoogleのアドワーズも 5,000円分利用できるなど、至れり尽くせりのサービスと言えます。 特に、業界の人に衝撃を与えたのは「.jpドメインが1年間無料」という点。通常、最後が「.jp」で終わるドメインは、年間で 2,000円〜3,000円の維持費がかかるなど、他の「.com」などに比べて割高なため、これが無料というのは非常に魅力に映ります。 ただ、筆者はちょっと懸念することがあったため、自力で調べたりサポートの方にお聞きしたりしたのですが、結論から言えばこのドメイン取得は「利用しない方がよい」でしょう。 その理由は、ドメインの移転が現状できないためです。 ドメインというのは、通常「
国内唯一の Windows Phone7端末「IS12T」ですが、スマートフォンとして振り分けたい場合など、ユーザーエージェントの情報が必要になることもあるでしょう。 どんな情報になるかと調べてみたら、記載されているサイトがありました。 Windows Phone IS12Tの機種情報 － 携帯向け開発者のための機種情報サイト ：： KEITAIALL：ケータイ・オール これによれば、次のような文字列になるようです。 Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; FujitsuToshibaMobileCommun; IS12T; KDDI) ということで、素直に「Windows Phone」あたりで引っかければ良さそうですね。 iPhone+Android スマート
iPhoneアプリで特有な操作の一ついえば「シェイク」。本体を振ることで、例えば操作を取り消したり、ゲームなどでキャラクタを激しく動かすといったことが可能です。 そして、Webページ内でも、このシェイクイベントを取得できるJSライブラリが『gShake』。使い方は非常に簡単です。 配布サイトからライブラリをダウンロードして、HTMLファイルと同じところにコピー。あとは、読み込んで次のようにイベントを取得します。 $(document).ready(function() { $(this).gShake(function() { alert("シェイクされました") }); }); 残念ながら、iPhone以外のスマートフォンでは取得できないようですし、シェイクは電車の中などでは恥ずかしい動作でもあるので、他の操作方法も準備しておきましょう。 gShake iPhone+Android ス
先日日本でも発売された、Windows Phone。Web制作に携わる人間としては、今後無視できない存在になる可能性は出てきます。 そこで、サイトの確認を手軽にできるエミュレータをインストールしておくと便利でしょう。ダウンロードはこちらから。 Windows Phone SDK 7.1 RC (リリース候補) ダウンロードしてセットアップを始めると、700MB近いファイルをダウンロードし始めるので気長に待ちましょう。 再起動してさらにセットアップを進めると、ようやく完了画面が表示されます。 ここで、「製品を今すぐ実行」を選んでしまうとVisualStudioが起動してしまうので、キャンセルしてスタートボタンから「Windows Phone Emulator」を選びます。これでようやく起動。 インターネットにも接続でき、表示はしっかり確認することができそうです。しかし、Windows P
先日公開された、プログラム言語学習サイト「Codecademy」。チュートリアル形式で、実際に操作をしながら学習することができる面白いツールで、JavaScriptの基本的な知識を学ぶことができます。 ブラウザ内に準備されたエディタに実際にプログラムを打ち込んで、間違えるときちんとエラーが表示されるので、理解度を確かめたり、腕試しができたりとオンライン学習には非常に良いのではないでしょうか。 しかし、残念ながら現在は英語しかないため、英語が苦手でプログラム学習も初心者という方にはなかなか壁が高い。そこで、つたないながらすべてのメッセージを日本語訳してみましたので、参考にしてください。 Googleドキュメントに取り込む チュートリアル作成者も募集しているようなので、今後、さらに言語が増えるかも知れませんね。ぜひ、学習してみてください！ Codecademy
最近、さまざまなアプリを使っていると妙に多いのが、これみたいな真ん中がぽこっとした下付けツールバー。 こちらとか これも サイトでも取り入れているものがあったりします。 Instagramあたりが始めたレイアウトでしょうか？ 真ん中にメインの機能をおいて、ぽこっとさせる。分かりやすくて良いかも知れませんね。
スマートフォンサイトを作った際、PCサイトと相互で行き来するためにユーザーエージェント情報を使って、振り分けをすることがあります。 「iPhone+Android スマートフォンサイト制作入門」でも、記載はしたのですが、その後Androidの「タブレット端末」が増えてきて、これへの対処が必要となりました。 Androidタブレットは、画面サイズが非常に大きく、スマートフォン向けのサイトを表示してしまうと逆に使いにくくなってしまいます。Flashも表示できますし、デスクトップサイトを普通に表示する方が親切と言えるでしょう。 Androidタブレットの場合、ユーザーエージェントは「Android」でスマートフォンで同じ物の、元にしているブラウザが「Mobile Safari」ではなくて「Safari」とクレジットされます。この「Mobile」というキーワードを使えば振り分けることが可能です。と
CodeIgniterで、ライブラリファイルを読み込む場合、通常は $this->load->library(...); といった記述で読み込むことができます。 しかし、きちんとしたオブジェクト指向で記述されていないライブラリなどの場合で、単に「require」などで読み込みたいだけの場合、そのファイルをどこにおいて、どのように読み出せばよいでしょう？ ファイルを設置するのは、他のライブラリと同様で「application/libraries」フォルダで良いようです。 しかし、読み込むときは単に require('/application/libraries/...'); としてもパスが通らないのですが、標準定数の「APPPATH」を利用すれば読み出せます。 require(APPPATH . 'libraries/...'); これで、どんな外部ファイルも読み込むことができます。簡単
新しいことを勉強して、久々に心底感動しました。 Facebookである方が「もうすぐCodeIgniterカンファレンスが開催される」といったつぶやきをしているのを拝見し、この時初めてその存在を知りました。。 PHPのフレームワークで、習得が早く、動作速度が爆速だということだったので、ちょっと触ってみるかとダウンロードしてドキュメントを読みながら Hello World!を作ってみる。すると・・・ こ・・これはすごい・・ なにがすごいって、これまで私は「CakePHP」を超愛用していました。CakePHPは、もちろんそのほとんどがすごくいいのですが、若干だけ不満があったのです。しかし、codeIgniterではCakePHPの好きなところはそのままに、不満が全部吹っ飛んでいたのです。 では、その全貌をご覧入れましょう。 モデル・ビューが不要 CakePHPもcodeIgniterも、MV
一度ブログでも大絶賛した、CodeIgniterですが、その後もちくちくと触っております。 とにかく手軽で、何でもできるところが良いですね。素敵です。 ということで、試しに Twitterに OAuthログインをする仕組みを作ってみました。これも非常に簡単。ただし、別のところではまったので、メモもかねて。 Twitterでアプリ登録する まずは、TwitterのDevelopersサイトでアプリの登録をします。 ココではまりポイント。Nameや Descriptionにはアプリ名と説明を記述し、WebSiteにはアプリのURLを記載するのですが、「Callback URL」は必須項目になっていません。そこで、省略して進めてしまうと、後ではまることになるので、ココにも必ず記入しましょう。 後で作りますが、例えば「http://example.com/index.php/tweet/log
ページ内リンクを張る場合、通常はid属性などを付加した要素に「#xxx」という形でリンクを張ります。しかし、Androidの一部の端末ではこの時にURLが変化して「http://example.com/#xxx」といった形になってしまう上、それ以上タップをしてもページリンクが機能しなくなってしまいます。（URLが同じだから無視するようです） そのため、基本的にAndroidではページ内リンクを使わずに、折りたたみの仕組みなどを使って同じような機能を再現するか、「ページの先頭へ」の機能の場合は、代わりに、次のスクリプトで対応します。 window.scrollTo(0, 0); これでページの先頭に移動します。
昨日は、クライアント様のコージーインテリアラボ様がご来社。先月のホームページのご様子や、今後の計画などをお聞きいたしました。 ホームページ更新のペースもつかめてきて、次のステップへ進む時期ですね。是非がんばりましょう！ そして、弊社も本日より新しいチャレンジをスタートしました。とはいえ、今更な感じではありますが、ようやく携帯サイトをお受けできる体制が整いました。 携帯サイトプラン これまで、ずっとリクエストをいただいていたにもかかわらず、なかなか実現できなかったのですが、各種技術を開発して効率の良い携帯サイト制作が出来るようになりました。 本ブログでも、その技術の一端をご紹介していきたいと思います。 iPhoneとAndroidを PHPで振り分ける方法 携帯サイトの場合、アクセスしてきたキャリアや機種に応じて、ページを振り分けたり、要素の表示・非表示を切り替えたりすることがよくあります
Lionをインストールしてから数日ほど。最初は違和感が拭えず、試行錯誤したり、設定を昔の状態に戻してしまおうかと考えていたのですが、なんとか慣れてきたようで、何も考えなくても素直に操作できるようになってきました。 そして、Lionに飼い慣らされると分かるのが「マウスというデバイスが終焉を迎えている」ということです。実は私はここ最近、マウスを使っておらず、デスクトップで使う場合もMagic Trackpadを利用しています。 一応、Magic Mouseも傍らにおいてあり、いつでも利用できる状態にしているのですが、特に必要性を感じません。 要塞化したマウス マウスは、はじめ2つボタン（Appleは1つボタン）からスタートしました。その後ホイールがつきました。更にそのホイールは押せるようになりました。更には、サイドエリアにもボタンが増え、ホイールを横に倒せるようになり、そのそばにもボタンがポコ
カテゴリ CakePHP (1) jQuery Mobile (7) link (1) post (1) status (2) WordPress (4) たにぐちまことの日記 (40) スマホサイト集 (4) 書籍レビュー (1) コンテンツ H2O Space. マークアップガイドライン H2O Space. のサイト H2O Space. H2O Blog. H2O Blog. on tumblr H2O Blog.(English) 最近のコメント 最近のタグ RSS スマートフォン ( 1 ) RSS 芸能 ( 1 ) RSS 自動車 ( 3 ) RSS tweet ( 1 ) RSS iPhone ( 8 ) RSS Mac ( 4 ) RSS wordpress ( 3 ) RSS coda ( 3 ) RSS todo ( 1 ) RSS
カテゴリ CakePHP (1) jQuery Mobile (7) link (1) post (1) status (2) WordPress (4) たにぐちまことの日記 (39) スマホサイト集 (4) 書籍レビュー (1) コンテンツ H2O Space. マークアップガイドライン H2O Space. のサイト H2O Space. H2O Blog. H2O Blog. on tumblr H2O Blog.(English) 最近のコメント 最近のタグ RSS スマートフォン ( 1 ) RSS 芸能 ( 1 ) RSS 自動車 ( 3 ) RSS tweet ( 1 ) RSS iPhone ( 8 ) RSS Mac ( 4 ) RSS wordpress ( 3 ) RSS coda ( 3 ) RSS todo ( 1 ) RSS
次のページ
このページを最初にブックマークしてみませんか？
『Web制作会社 エイチツーオー・スペース』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
