<http://www.html5.jp/tag/elements/img.html>ということなので、<・・・前略・・・>そのスライダーアイテムにsrc属性が指定されたimgもしくはiframeがあったら、<・・・中略・・・>、(※ここから)もし画像がダウンロードされてたらその画像をロードしてね、ここでload()って何よっていうエラーなんですね。最初のアイテムに画像が含まれていなければ、普通に動くということみたいです。iframeだと普通に動くな。早期アクセスでは、現時点で完全にはサポートしていないフォントを試験的に提供しています。ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。早期アクセスを通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。日本語早期アクセスより引用ということですから、完全にサポートされているわけではありません。日本語の無料で使えるWebフォントが少ないっていうのは常々の悩みでしたし。いろんなデバイスを考えた時に明朝体がうまいものがなくて、泣く泣く画像にしたりしてましたから。「はんなり明朝」とか好きなフォントですし、嬉しいですね!ただフォントによっては漢字のないものや、ひらがなもないものもあるのでその辺は要注意です。漢字のない明朝系のフォントは、漢字部分はデフォルトフォントで表示されるみたいです。フォントファミリーに他の明朝体も入れておくといい感じになるかもしれませんね。Japanese漢字なしはんなり明朝こころ明朝ニクキュウニコモジひらがななしニクキュウせっかくなのでbxSliderと新しい日本語WebフォントでDEMOを作ってみました。よかったら見てみてくださいね。コメントを残すWixの新機能を試してみました無料で使えるWebサイト作成ツール「Wix」。自由度の高いレイアウトや、アニメーションなどの目を引くデザインが、コードをいっさい書かなくても簡単に実装できてしまいます。Wix.comhttp://ja.wix.com/数ヶ月前にWixでWebサイトを作ることがあった時にも、その簡単さに驚いたのですが、それからもどんどん新しい機能が追加され、より多岐にわたったデザインを作ることができるようになりました。その新機能の中でも特に気になった2つ。8月に実装されたばかりの新しいスクロールエフェクトと、全画面に対応したカラムレイアウトについて、今回はご紹介します。コメントを残すIFTTT使って自動でGoogleスプレッドシートに記録していくGoogleスプレッドシートを使ってますか?仕事していると必須なExcelですが、職種によってはあのセルが並んでいる画面を見るのも嫌だっていう人がいるのも事実。使ってみると、それはそれで便利なものですよ。そんなExcelをブラウザ上で使うことができるGoolgeスプレッドシートを上手に活用すると、作業の効率アップに繋がるかもしれません。Analyticsのレポートを作るときに記事の情報が必要だったり。必要になってから慌てて作るよりも、ブログを更新したら自動的に記録できたら楽ですよね。そんなときのIFTTTです。IFTTTの説明はこちらでご紹介しています。IFTTTを使っていろんなサービスと連携(例えばTwitterからFacebookにアルバムを作る)ブログの更新記録を作る。IFTTTのアカウントやチャンネルの登録は済んでいる前提でお話しします。手順チャンネルの登録は全部で7Stepあります。全部英語の画面ですし、ちょっと多い気がするかもしれませんが、そんなに難しくないのでチャレンジしてみてください。「this」をクリックします。Step1:チャンネルを選択するトリガーとなるチャンネルを選択します。今回は記事リストを作りたいので「RSS」を選択しました。チャンネルとなるサービスがたくさんあるので、検索ボックスを使って探すと早いです。Step2:何をトリガーにするかStep2ではStep1で選択したチャンネルで何が起きたらトリガーになるかを選択します。matches」の2種類を選ぶことができます。item」を選択しました。Step3:アクション「that」をクリックします。Step4:チャンネルを選択するアクションさせるチャンネルを選択します。Step5:どんなアクションをするかStep4で選択したチャンネルで何が起きたらトリガーになるかを選択します。spreadsheet」を選びます。Step6:何をするのかを選択するStep6で選択したアクションの具体的な中身を決めて行きます。内容は選んだチャンネルによって変わってきます。この例では入力できる項目が3つあります。path」はスプレッドシートまでのパス(フォルダー構成)です。Action」をクリック。ここでこのレシピのタイトルを変更することもできます。Recipe」をクリック。これでこのレシピがマイチャンネルに登録されました。手順は多そうに見えますが、ポチポチクリックしていくだけなのであっという間です。※画像はイメージですこれでブログを更新すると自動的にGoogleスプレッドシートに行が追加されていきます。日付でソートしていったりエクセルと同じように使えるので、リスト管理が一気に楽になりました。実はバックアップの代わりにもできる?これのおもしろいところは、WordPressのRSSをトリガーにしていたりすると、本文がHTMLの文字列で保存されるというとこですね。簡易的なバックアップのかわりにもできます。DBのバックアップや画像ファイルなどはダウンロードできていませんが、あくまで簡易的に。記事データだけ加工して使いたいとか言う時は便利かもしれません。方法はStep6で記録するデータの中に「EntryContent」を含めればOKです。入力エリアをクリックしてアクティブにすると、ボックスの右上に青いフラスコのアイコンが表示されるのでクリック。セレクトボックスが表示されるので、使いたい項目をクリックすればOKです。他のトリガーでもいろいろできる今回はトリガーをRSSにしましたが、他のトリガー使ってGoogleスプレッドシートにリストを作っていくことができます。ここからはアイディア次第です。TwitterをトリガーにLikeしたツイートだけのリストを作るとか、Feedlyで後で読むにしたものをリストにしておくとかできそうです。何でもかんでもGoogleスプレッドシートでリスト化するのがいいとは思いませんが、やっぱりリストって何かとあると便利ですし、それを自動でやれるならそちらの方がずっと楽でいいと思います。リストを作るのって時間を取られたりするし、だったらその時間を別な何かに回すことができますから。以前にGoogleフォームの結果をGoogleスプレッドシートに記録するっていう記事も書きました。よろしければこちらもどうぞ。Googleスプレッドシートと連携!Googleフォームを使ってみた。コメントを残す【Gmailのメールをチャットワークにも投稿!】Zapierを使ってみた社内で使用している連絡ツール、チャットワーク。日本語でのUIが使いやすくて、ちょっとした記録なんかにも活用している今日この頃です。出社するとまず立ち上げてチェックするツールでもあるのですが、受信した内容が、チャットワークにも投稿される「メール確認ツール」としても使えないだろうかと、ふと思ったのです。Gmailでは複数アカウントがあるため、それを都度確認していくのはちょっと面倒...。来る、でも目は通しておきたいメルマガなんかのチェックができたらいいなと思ったのが始まりでした。チャットワークとGmail。違うサービスの連携ができるハブツールとして、真っ先に思いついたのがIFTTT。いろいろなサービスを対象としているこのIFTTTですが、残念ながらチャットワークはサポート外。ほかにチャットワークが使えるハブツールはないかと、探してみたらありました!その名もZapier!今回は、そのZapierというWebサービスについてご紹介したいと思います。Zapierって?以前ブログでもご紹介しているIFTTTやmyThingsのように、異なるWebサービスなどを連携させることができるツールです。何かが起こったとき(トリガー)に何かが起こる(アクション)。このサービスの組み合せを「ZAP」といい、無料プランでは5つまで作成することができます。対象アプリはなんと500以上!もちろんチャットワークも入っています。ZapierでGmailとチャットワークをつなげようということで、さっそくZapierでZAPを作ってみました。今回はGmailで特定のラベルがついたメールがくると、チャットワークのグループチャットにメールの内容が投稿されるという、ZAPを作成してみます。APIが必要なのですが、それを発行してもらうのにチャットワークへの事前申請が必要です。API申請ページへアクセスし、発行を申し込みます。ChatWorkでのご利用の方は、管理者経由でのみ申請が可能です。※申請からAPIの発行に3~5営業日かかるそうです。発行完了のメールがきたら、チャットワークの「動作設定」で「API発行」というタブが新たに表示されるので、チャットワークのpassを入力し、APIを確認します。Zapierでの操作でこのAPIが必要になりますので、コピーをしておきましょう。Zapierに登録Zapierからアカウントを登録します。登録には名前・メールアドレス・パスワードが必要です。ZAP!」をクリックし、トリガーとなるアプリ「Gmail」を選択します。次に、Gmail上でトリガーにしたいできごとを選択します。Email」をチェックします。Account」をクリックし、対象となるメールアカウントを選択します。Continue」をクリックして次に進みましょう。Gmail上に該当ラベルがあるかどうかがZapier上でチェックされ、問題なければ、これでトリガーのGmailの設定は完了です。「Continue」でさらに続けます。次にアクションとなるチャットワークを選択します。チャットワーク上でアクションにしたいできごとを選択します。Message」をチェックします。Account」をクリックし、次の表示画面でコピーしておいたチャットワークのAPIを入力し、アカウントを設定します。投稿するグループチャットと、投稿するメッセージの内容を設定。Data)」を選択しました。設定した内容で、実際にチャットワークへのテスト投稿が行われます。テストに問題がなければ下記の画面が表示され、「Finish」をクリックするとZAPの完成!名前をつけて、保存しましょう。変更がある場合は、サイドメニューから変更箇所を選択し、再度設定します。終わりに今回はチャットワークと連携できるという点に着目しましたが、他にもZapierでできることはたくさんあるようです。ZAPのエラーチェックや、2つ以上のサービスをつなげられるマルチステップ(有料プランのみ)、複数のアカウントの切り替えなどなど...無料プラン内では制限がありますが、シンプルに2つのサービスをつなげるIFTTTなどのハブツールと、良い具合に使い分けができたらと思っています。コメントを残す独自ドメインのサイトを広告無し100円以下で立ち上げてみる【2】無料サーバーにサイトを設置編~前回までのあらすじ~格安で独自ドメインのサイトを立ち上げてみるとしてスタート。ドメインはお名前.comで格安のxyzドメインを32円で取得。niigata360.xyzサーバーは比較的品質の高そうなxdomainを選択。ドメイン取得後、ネームサーバーの設定を済ませて反映されるのを待つ。今回は、実際にHTMLコンテンツをアップし、サイトを公開してみます。■サイトを設置テストサイトをHTMLで用意します。mapsのiframeによる埋込みくらいは盛り込んでおきます。今回設置するxdomainの無料サーバーは広告はつきませんが、下記の制限があります。他社で取得したドメインのメール設定は不可このあたりの制限が大きな制約になりそうです。やって書くと何もできなさそうですが、逆に独自ドメイン10個OK容量1GBFTPが使える。(ファイルマネージャーも別途用意されている。)と言うように、保存容量が比較的大きかったり、無料でもマルチドメインで設定していけることは大きなメリットです。個人的にはFTPでアップできるのも管理が楽で便利です。※xdomainの無料サーバーは広告を受け容れることでPHPやMySQLが使えたりWordPressの設置も可能なサーバーも使えます。WordPressでの広告はスマートフォンやタブレットなどモバイル環境のみでの表示と、結構控えめですね。今回は広告無しにこだわってみたいと思いますので、WordPressはあきらめ上記制約内で作ってみます。いうことで、シンプルな構成のWEBサイトを用意します。あとはUPするだけです。FTPの設定だけ載せておきます。図はFileZillaです。いれてログオンの種類を通常にしておけば繋がります。WEBベースのファイルマネージャーも用意されているので、そちらからUPしてもいいでしょう。接続先が直で公開用のルートフォルダになりますので、そのままHTMLファイルをアップすればOKです。実際にファイルをアップします。テストサイト→http://www.niigata360.xyz/■結果ブラウザが対応していればスライドショーなどのコンテンツの表示も特に問題ありません。有料のレンタルサーバーに比べると画像の表示などにもたつきが見られます。値段相応と言った所です。chromeでは表示できず「無効なURLです。」との表示が続いていました。FirefoxやIE、Edge、さらにMacのsafariでも正しく表示されます。chromeだけドメインの名前解決ができてない印象でした。原因がわからず難儀したのですが、結局は、chromeのDNSキャッシュが原因だったようで、クリアすると表示できるようになりました。chromeのDNSキャッシュクリアは設定からはできないので、アドレスに「chrome://net-internals/#dns」を入れて設定画面を出し、そこから消してください。過去に、無料WEBサイト制作サービスが流行って廃れた時期がありましたが、ここに来てふたたび盛り返してきている感があります。無料サーバーも思ったより使えそうですし、選択肢もいくつかあり、組み合わせ次第でランニングコストを極力かけずにWEBサイトを構築できます。テストサイトの構築や個人の学習には十分かと思います。実際に使ってみて無料サーバーと格安であっても有料サーバーには大きな隔たりを感じました。コストに問題なければ、個人のテストであっても有料サーバーを借りた方が面倒が少ないかと思います。)特にドメイン関連の設定に自信の無い方は、ドメインとサーバーは同じ会社から借りましょう。別々の会社から借りた場合、今回のようにトラブルがあると、原因の切り分けと追求に難儀します。■注意点ドメインは今回安く取得できましたが、2年目以降は普通に通常料金が掛かります。安くて飛びつくと、維持費が高く付くドメインもありますので、長く使う予定でしたら、一般的な.comや.net、.jpなどを取得しましょう。今回30円で取得したxyzは2年目以降は1480円です。無料サービスはいつ停止しても文句が言えません。そのあたりのリスクをよく考えてご利用ください。ウェブサイト制作サービスについて調べています。近々、弊社のサービスの一部として取り入れる予定もあります。調べて、最安プランを実行してみました。一応「広告無し」で考えます。(注:人件費は考慮しておりません。・ドメイン・サーバーが少なくとも必要です。通常はどちらも有料です。■ドメインまずはドメインです。ウェブサイトのアドレスですね。ドメインはサーバーを契約すると無料で1つもらえたりする所も多々あります。(この場合サーバー代がそこそこ必要です。)今回の実験にあたり、お名前.comの格安ドメインを取得してみました。お名前.comはマイナーなドメインのセールをよくやっています。今回は実験用のにxyzドメインを取得してみました。税込32円!安い!予算100円でしたので、大幅な節約となりました♪クレジットカードかデビットカードがあればさくっと取得出来ます。言うわけで取得してみました。niigata360.xyzです。ウェブサイトを置く場所ですね。今回はxdomainの無料レンタルサーバーを使ってみます。なんと無料にもかかわらず広告がありません。有料サーバーやドメイン契約への宣伝目的の為のサービスかと思います。個人的にxserverはレンタルサーバーの中でもかなり信頼しているサービスなので、xdomainにも期待大です。■ドメインの設定ひとまず先に取得したドメインを使えるように設定します。お名前.comのドメイン設定でネームサーバーをxdomain指定のものにしておきます。次にxdomain側で他社ドメインの登録作業を行います。今回はwhois認証を選びました。ちなみにドメインは10個登録出来るようです。設定後、数時間でネームサーバーの情報が行き渡り、FTPでのアクセスも可能になります。xdomainでは数時間から2日と書いてあります。これを書いている現在、数時間たってますが、いっこうにアクセスできません。して、これは2日コースか。続きは使えるようになってから書きます。