さくらの VPS + CentOS7 で 俺専用 Mastodon インスタンスを立ててみた話
Mastodon （マストドン） が先週の頭、4月10日くらいから日本でも急激に話題になって、@nullkal 氏が自腹で mstdn.jp インスタンスを立ててくれた辺りからはもう一部でお祭り騒ぎになっていました。 で、いい機会だし、ちょっとお勉強を兼ねて自分専用の Mastodon インスタンス （所謂、おひとり様インスタンスですね） を立ててみようと週末に思い立ち、土曜日の空いた時間でやってみたら 2～3時間で比較的簡単に立てられましたので、備忘録がてらエントリーにしてみようと思います。 tootsuite/mastodon: A GNU Social-compatible microblogging server mastodon.burnworks.com 使用した環境としては下記のような基本構成に、適時必要なものをいくつか入れた感じ。サーバは元々テストサーバとして使っていたやつ
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
5分でわかる Tumblr の始め方
すでに使っている人には今更なんですが、これから始めるって人向けに簡単なまとめ。 Tumblr といってもその用途は人それぞれ。自分の Blog として使う人もいるでしょうし、情報（ネタ）収集のツールとして使いたい人もいるでしょう。今回は情報収集 & クリッピングツールとしての使い方に主眼を置いて紹介してみようと思います。 アカウントを取得する とりあえず他の人をフォローしまくる ダッシュボードをしばらく眺めてみよう Reblog と Like Tumblr をもっと便利に使う Firefox を使え アドオン ： Tombloo と Greasemonkey を入れる ユーザースクリプト ： AutoPagerize, LDRize （+ Minibuffer）, ReblogCommand, play on tumblr を入れる マイページなんて飾りです iPhone と Tumblr
短縮 URL を自前で提供してみる
Twitter キッカケで急速に広まった感のある、いわゆる短縮 URL サービスですが、無駄なリクエストを増やすとか、本当のリンク先がわかりにくくてスパム業者に悪用されるよだとか、色々と言われています。 つい最近も 「短縮URLは必要悪か、単なる悪か。 （原文：Are URL Shorteners A Necessary Evil, Or Just Evil?）」 なんて議論で盛り上がったり。 そんな一連の議論の中で、色々問題もあるけど、短縮 URL 自体は便利だし、だったらサイト管理者が自前で短縮 URL を提供して、それをみんなが使いやすくする仕組みがあればいいんじゃないの？という流れが生まれ、それが link 要素に 「rev="canonical"」 を組み合わせた方法として広がりそうな気配をみせています。 ちなみに、「rel="canonical"」 という記述は最近検索エンジン
CSS は正しくお使いください
立て続けに人のエントリーに乗っかってますが...... S i M P L E * S i M P L E さんで紹介されていた、「CSSだけで文字にドロップシャドウをつける方法」 （元ネタはこれ） に関してはちょっと気になったので書いておこうと思います。 実は S i M P L E * S i M P L E さんのエントリーの元ネタでは書かれているのですが、このようにテキストを 2回書いてそれを CSS によって重ねてしまう方法は、下記のような弊害があります。 CSS が OFF だと、テキストがだぶる 音声ブラウザは 2回同じテキストを読み上げることになる CSS が OFF という状況は、ブラウザでアクセスしてくる人間様相手の場合、あまり起こらない状況だと思いますが、ページをスクレイピングしていくようなユーザーエージェントは、CSS なんて基本的に読みません。例えば、Google
!important だらけの CSS にお別れを
CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができ... CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができなかったりと、思わぬところで無駄な時間をとられたりします。 で、結果として !important 宣言を連発、気が付いたら CSS が !important 宣言だらけになるなんてオチが待ってたりするわけですが、そうならないためにも CSS が適用される際の優先順位について簡単におさらいをしてみたいと思います。 CSS は、「Cascading Style Sheets」 という名前の通り、「Cascading」 されて （段階的に） 適用されます。よって、簡単に言っ
2007年の年間ランキングあれこれ
去年も同じエントリーをあげましたが、毎年恒例ということで各所から発表される年間の 「○○ランキング」 ってやつをまとめてみました。2006年と比べてどう変わったのでしょうか。 まずは検索ランキング各種。 Google.com ： 2007 Year-End Zeitgeist 毎年恒例の Google.com 年間検索キーワードランキング。去年までは年間で最も多く検索されたキーワードでしたが、今年は検索数の上昇率がランキングに反映されています。そんな中、1位になったのは 「iPhone」 。2位が 「Badoo」、3位が 「Facebook」。10位までは下記の通り。去年とかぶっているものが全くないというのも時代の移り変わりを感じます。 iphone badoo facebook dailymotion webkinz youtube ebuddy second life hi5 club
pre 要素に対する印刷用 CSS
サイトリニューアルと同時に印刷用スタイルも書いてみたんですが、ふと気がついたのは、pre 要素の中身って印刷するとき紙からはみ出しちゃって全部印刷できてないじゃんっていうこと。 Blog の記事を印刷する人ってそんなにはいないと思いますが、一応対策しておくかということで書いてみました。と言っても、別に目新しいことはしていませんので期待せずにお願いします。 さて、当サイトで使用している pre 要素には、画面表示用のスタイルとして、「overflow: scroll;」 を指定、改行せずにはみ出した部分はスクロールバーで表示させていますが、当然ながら印刷時はスクロールバーなんて出ないので、普通に紙からはみ出して終了と。 なので、印刷スタイルでは pre 要素を基本的に整形済みテキスト （Preformatted Text） として表示しつつも、印刷領域からはみ出してしまう場合のみ適当に改行が
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
optgroup 要素を CSS でひと工夫してみる | WWW WATCH
フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな... フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな時のために optgroup 要素が存在するわけですが、こいつを使用した上で、CSS をあてて見た目を装飾する方法と、一部ブラウザでの注意点などを簡単にまとめてみました。 基本的なことのみで、すごいかっこいい見た目を実現とかそういうのではありませんので、期待せずにどうぞ。 例えば都道府県などの選択をさせる際を想定すると、マークアップ自体はこんな感じになりますよね。面倒なので全部は書きませんが。 <select name="location"> <optgroup la
div要素をクロスフェード表示するJavaScript | WWW WATCH
結構前に公開されているので、すでに使っている人もいるかと思いますが、最近、個人的な用途で使わせていただいたので紹介。 Brand Spanking New で公開されている、「Javascript / CSS Crossfader」 は、JavaScript ひとつで簡単に、任意の div 要素 （じゃなくてもいいんですが） をクロスフェード表示で切り替えてくれるスクリプト。スクリプト自体が軽いのと、設定も簡単なので、ちょっとした画像の切り替えなんかに重宝しそう。 デモがこちらで公開されています。 必要なのは JavaScript ファイル 1つのみ。ダウンロードした JavaScript ファイルをサーバに上げたら、(X)HTML ファイルに読み込みます。 <script type="text/javascript" src="/js/bsn.Crossfader.js"></scrip
角丸に関するあれこれ
最近、というか Web2.0 的デザインなんてものが言われ始めてからというもの、「角丸」 ってやつがとっても人気ですね。(X)HTML、CSS 関連の話題でもよく取り上げられています。 ということで、角丸の作り方をいくつかの種類別に、また、数値などを入力するだけで、角丸のソースを生成してくれる角丸ジェネレータなどをいくつかまとめてみました。 角丸の作り方その1、画像を使う方法 ソースがどうこうとか、まったく気にしないで塗りつぶしの角丸ボックスを作るだけなら、4つの角に配置する画像を用意した上で、下記のような感じにすれば得に難しくもなく角丸完成と。しかもフレキシブル。しかしソース汚い。 <!--HTML--> <div class="left-top"> <div class="right-top"> <div class="left-bottom"> <div class="right-b
XHTML、CSS を学ぶ時の 6つの間違い
XHTML、CSS を学ぶ時にやりがちな間違いを私の個人的独断と偏見でつらつらと書いてみます。今から (X)HTML を学ぶのであれば、HTML よりも XHTML でしょということでタイトルや本文内では XHTML と書いていますが、ここは HTML に置き換えてもらっても同じだと思います。 1、とりあえず Dreamweaver を買ってくる 別に 「Dreamweaver」 だけに限らず、オーサリングツールさえ手に入れれば XHTML なんて簡単に習得できると思っている人は少なくない気がしますが、これは大きな誤解です。この誤解を抱えたまま 「オーサリングツールが使える = XHTML を理解している」 だと思い込んでいると後になって困ることになると思いますよ。 オーサリングツールは、コーディングスキルを補うツールではなく、コーディング作業を効率化するツールです。XHTML、CSS に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
