Thursday, October 10 2024 @ 09:56 PM JST

TOPICS

UIkitカスタマイズ uk-hidden@xs, uk-visible@xs を追加する

  • Wednesday, December 08 2021 @ 05:59 PM JST
  • 投稿者:
  • 表示回数 4,492
OSS UIkitでuk-hidden@xs, uk-visible@xs を追加すると便利です。

[code]
/* iPhone 5 landscape and bigger */
@media (min-width: 375px) {
.uk-hidden¥@xs {
display: none !important;
}
}
/* iPhone 5 portrait and smaller */
@media (max-width: 374px) {
.uk-visible¥@xs {
display: none !important;
}
}
[/code]

Jitsi Meetのカスタマイズ

  • Sunday, March 21 2021 @ 12:55 PM JST
  • 投稿者:
  • 表示回数 11,316
OSS Zoomをオープンソースで実現するJitsi Meetをさくらのクラウドのインストールスクリプトでインストールした場合のカスタマイズについての覚書です。

公開path:
/usr/share/jitsi-meet

log:
/var/log/jitsi/jicofo.log

録画機能は、Chromeの拡張機能を使えばよく、わざわざJitsiサーバー側で録画するプログラムを追加する必要はないのでメニューから消したほうが良いです。消す方法は、

/etc/jitsi/meet/〜.js
以下がコメントアウトされていますがそれを外します。
RecordingのfileRecordingsEnabled: false

MailtoUI の日本語化

  • Friday, December 25 2020 @ 11:32 PM JST
  • 投稿者:
  • 表示回数 5,754
Diary

メールへのリンクには、class="mailtoui" を追加します。

MailtoUIの日本語化は以下のようにオプションを追加します。

<a class="mailtoui" href="mailto:xxx@xxxx.com">お問い合わせ</a>
<script src="https://cdn.jsdelivr.net/npm/mailtoui@1.0.3/dist/mailtoui-min.js"  data-options='{ "title":"メールを開く方法を選んでください", "buttonText1": "Gmailをブラウザーで開く", "buttonText2": "Outlookをブラウザーで開く", "buttonText3": "Yahooをブラウザーで開く", "buttonText4": "デフォルトのメーラーで開く" , "buttonTextCopy": "コピー" }'></script>

MailtoUIのDEMO

【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方

  • Saturday, July 25 2020 @ 05:47 PM JST
  • 投稿者:
  • 表示回数 10,522
Geeklog

【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方

参考サイト:
https://yuyauver98.me/scroll-visible-range-underline-animation/

Geeklogで活用するには以下のように自動タグで利用します。

html

<p>[text-scroll-underline:pink ピンクの事例]</p>
<p>[text-scroll-underline:yellow 黄色の事例]</p>
<p>[text-scroll-underline: ブルーの事例]</p>
css

.Text-Span {
  position: relative;
  z-index: 1;
}
.Text-Span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0%;
  height: 8px;
  background: #dfdfff;
  z-index: -1;
  transition: all 0.8s;
}
.Text-Span.isActive:after {
  width: 100%;
}
.Text-Span-pink:after {
  background: #FFDFEF;
}
.Text-Span-yellow:after {
  background: #ffffbc;
}
Javascript追加

$(window).on('scroll',function(){

  $(".JS_ScrollAnimationItem").each(function(){
    var position = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > position - windowHeight + 100 ){
      $(this).addClass('isActive');
    }
  });

 });
自動タグ: text-scroll-underline
<span class="Text-Span Text-Span-#1 JS_ScrollAnimationItem">#2</span></p>

リンクとアンダーライン

  • Friday, July 24 2020 @ 05:02 PM JST
  • 投稿者:
  • 表示回数 11,227
Geeklog

自動タグ:[ a-blue:/ pink pink pink ]:
[a-blue:https://www.papalagi.co.jp/ blue blue blue]

自動タグ:[ a-pink:/ pink pink pink ]:
[a-pink:/ pink pink pink]

自動タグ:[ a-yellow:https://www.papalagi.co.jp/ yellow yellow yellow ]:
[a-yellow:https://www.papalagi.co.jp/ yellow yellow yellow]

自動タグ

a-blue:

<a href="#1" class="underline-leftinright underline-height-3px">#2</a>
a-pink:

<a href="#1" class="underline-leftinright underline-color-pink underline-height-3px">#2</a>
a-yellow:

<a href="#1" class="underline-leftinright underline-color-yellow underline-height-3px">#2</a>

cssの例: https://www.ivysoho.net/layout/modern_geek/css/underline.css

参考サイト: https://www.nxworld.net/tips/css-hover-underline-animation-examples-and-sass-mixin.html

WEB会議システムのオープンソース Jitsi(ジッツィ)

  • Sunday, July 19 2020 @ 11:09 PM JST
  • 投稿者:
  • 表示回数 4,720
OSS WEB会議システムのオープンソース Jitsi(ジッツィ)があります。

コミュニティーは無料で利用できます。
https://meet.jit.si/

さくらのクラウドでスタートアップスクリプトが用意されています。
https://cloud-news.sakura.ad.jp/2020/...jitsimeet/

導入過程:
https://qiita.com/mshigefuji/items/40...3bb354bd44

https://qiita.com/zembutsu/items/a50c...b501caf6c4

録画機能はJitsiのプラグインを入れるのではなく、Chromeの録画機能で用を足しますので、Jitsiから録画コマンドを削除します。

/etc/jitsi/meet/〜.js
Recordingの
fileRecordingsEnabled: true,
をfalseにします。

EPUBをWEBで表示するオープンソース Bibi

  • Sunday, July 19 2020 @ 11:07 PM JST
  • 投稿者:
  • 表示回数 3,913
Geeklog EPUBをWEBで表示するオープンソース Bibiがあります。
EPUB形式へは、MACのPagesなどでも書き出すことができます。

ダウンロード:
https://bibi.epub.link/

Bibiは特定のディレクトリに20弱のソースファイルをアップロードするだけで動くので、Weeblyでも動きます。

Copyrightの記述

  • Wednesday, January 15 2020 @ 11:25 PM JST
  • 投稿者:
  • 表示回数 4,368
Diary

Copyrightの記述について、日本は万国著作権条約に加盟しているので本来記載不要ですが、今までの慣習からフッタにないと収まりが悪いかもしれません。 また、Copyrightと(c)は被っているので、(c)だけで大丈夫です。

All right reservedは古いブエノスアイレス条約で必要だったのが残っているだけで今では不要なので記載不要です。 年表記については、いつから、が必要なのですが、古い年号だけだとサイトが動いていないような印象を受けるので、2014-2020というように表記するのが無難でしょう。

現在の年号を毎年書き換えるのは面倒なのでjsで以下のように記述します。


<small>&copy; 2014-<span id="thisYear"></span> xxx inc.</small>

<script type="text/javascript">
  date = new Date();
  thisYear = date.getFullYear();
  document.getElementById("thisYear").innerHTML = thisYear;
</script>

実行した結果:
© 2014- xxx inc.

参考:
https://hajipion.com/2288.html

形から漢字を探す

  • Friday, December 20 2019 @ 08:20 PM JST
  • 投稿者:
  • 表示回数 4,823
おしらせ mojinavi
https://mojinavi.com/

検索性を追求した漢和辞典。 Unicodeに登録済みの6万文字の漢字から 使用頻度の高い6,654字

お名前メールを活用する際のDNS設定

  • Monday, December 16 2019 @ 09:37 AM JST
  • 投稿者:
  • 表示回数 42,792
おしらせ お名前ドットコムには、メールだけ使うお名前メールというサービスがあります。ホームページは別のサーバーでメールだけお名前ドットコムを利用する場合の設定方法をご紹介します。


ホスト名 TYPE TTL VALUE / MX優先 状態 削除
hogehoge.com NS 86400 01.dnsv.jp 有効
hogehoge.com NS 86400 02.dnsv.jp 有効
hogehoge.com NS 86400 03.dnsv.jp 有効
hogehoge.com NS 86400 04.dnsv.jp 有効
imap.hogehoge.com CNAME 3600 imap22.gmoserver.jp 有効
pop.hogehoge.com CNAME 3600 pop22.gmoserver.jp 有効
pop3.hogehoge.com CNAME 3600 pop22.gmoserver.jp 有効
smtp.hogehoge.com CNAME 3600 smtp22.gmoserver.jp 有効
hogehoge.com MX 3600 mx22.gmoserver.jp /10 有効
hogehoge.com TXT 3600 v=spf1 include:spf22.gmoserver.jp ~all 有効


hogehoge.com は該当のドメイン名を入れてください。


ただ・・・

お名前ドットコムの、CNAMEはうまくうごいていない感じがします。

popは pop22.gmoserver.jp
smtpは smtp22.gmoserver.jp

これを直接記述した方が無難だと思います。
詳しい方、ご教示いただけると助かります。

ページナビゲーション